模擬“嫦娥五號(hào)”探月小游戲【附源碼】
1. 嫦娥五號(hào)
大家好，歡迎來(lái)到編程教室，我是 Crossin。
昨天凌晨，也就是2020年12月17日的1點(diǎn)59分，嫦娥五號(hào)返回器攜帶月球表面的土壤樣品安全返回著陸，這也標(biāo)志著探月工程嫦娥五號(hào)任務(wù)順利完成。這是我國(guó)航天史上的首次。我國(guó)也因此成為了地球上第三個(gè)從月球上成功采樣的國(guó)家。
為了慶祝這一重大時(shí)刻呢，我做了一個(gè)模擬探月的小游戲。
2. 一個(gè)小游戲
這個(gè)小游戲模擬了嫦娥五號(hào)探測(cè)器在月球表面降落、采樣、上升、對(duì)接這一系列過(guò)程。
在實(shí)際的探月過(guò)程中，這些操作都是由程序精確測(cè)量和控制的。而在這個(gè)游戲里，則需要玩家手動(dòng)完成 降落 和 上升對(duì)接 這兩個(gè)操作。
點(diǎn)擊屏幕中間的區(qū)域，可以控制發(fā)動(dòng)機(jī)點(diǎn)火，從而在降落時(shí)制動(dòng)減速，以及之后讓上升艙起飛。點(diǎn)擊屏幕兩邊的區(qū)域則可以調(diào)整探測(cè)器的姿態(tài)，從而實(shí)現(xiàn)左右位置的調(diào)整。這在最后與軌道艙對(duì)接時(shí)非常關(guān)鍵。
如果降落時(shí)和對(duì)接時(shí)速度過(guò)快，那我們的任務(wù)就失敗了。所以，你需要通過(guò)你靈巧的手指，讓探測(cè)器在保持一個(gè)平穩(wěn)的狀態(tài)。
看著是不是還挺簡(jiǎn)單的？不過(guò)已經(jīng)試玩過(guò)的朋友里，我知道的還沒有一個(gè)人可以第一次就對(duì)接成功的。
同樣，當(dāng)我們?cè)谛侣劺锟吹芥隙鹞逄?hào)很輕松很順利發(fā)射、入軌、降落、采樣、上升、對(duì)接、返回，其背后是幾代航天人艱苦卓絕的努力，難度之大遠(yuǎn)超一般人的想象。這里再次向他們致敬。
如果你想挑戰(zhàn)一下，可以在公眾號(hào)“Crossin的編程教室”里回復(fù)：嫦娥
獲取試玩地址。
3. 開發(fā)環(huán)境
這個(gè)小游戲是用 cocos creator 進(jìn)行的開發(fā)，使用的語(yǔ)言是 JavaScript。
我的一位小伙伴提供了游戲的畫面素材。
獲取游戲的源碼，請(qǐng)?jiān)诠娞?hào)“Crossin的編程教室”里回復(fù)：嫦娥
4. 開發(fā)思路
這里我從技術(shù)層面簡(jiǎn)單介紹一下這個(gè)游戲的核心開發(fā)思路，也是用 cocos 開發(fā)游戲的基本套路。
首先，是3個(gè)重要的概念：層、動(dòng)作、狀態(tài)機(jī)。
可以這么說(shuō)，弄清楚這三個(gè)概念，90% 以上的小游戲你都可以搞定了。
4.1 層
雖然現(xiàn)在的 Cocos Creator 已不需你去手動(dòng)創(chuàng)建層（CCLayer），但層級(jí)的概念始終是存在的。各種節(jié)點(diǎn)通過(guò)層級(jí)添加，構(gòu)成了游戲的場(chǎng)景。
直觀的理解，就好比現(xiàn)實(shí)中這樣一個(gè)玩具的效果：
表示大陸的節(jié)點(diǎn)添加在整個(gè)背景板上，其他節(jié)點(diǎn)又加在大陸節(jié)點(diǎn)上。
層級(jí)結(jié)構(gòu)既決定了游戲元素的顯示先后，也決定了它們所處的坐標(biāo)位置。
在這個(gè)游戲中，層級(jí)比較簡(jiǎn)單。唯一復(fù)雜的點(diǎn)在于：上升器原本被添加在著陸器之上，這樣它可以隨著著陸器位移和旋轉(zhuǎn)；而在上升階段，我又將它從原本父節(jié)點(diǎn)上移除，添加到了背景上，這樣方便后續(xù)的坐標(biāo)計(jì)算。
4.2 動(dòng)作
動(dòng)作系統(tǒng)是 cocos 的一大特色，不過(guò)本文不詳細(xì)展開講了。游戲中，主要的控制部分并沒有借助動(dòng)作系統(tǒng)，也沒有使用物理引擎，而是直接通過(guò)數(shù)學(xué)計(jì)算位移實(shí)現(xiàn)。動(dòng)作系統(tǒng)主要用在月壤采集階段的動(dòng)畫效果上。鉆探、采集是用了縮放動(dòng)作 cc.ScaleTo；升旗是用了旋轉(zhuǎn)動(dòng)作 cc.rotateTo；然后再配合上延遲動(dòng)作 cc.delayTime 和函數(shù)回調(diào) cc.callFunc。
參考代碼：
flag1 () {this.flag.opacity = 255;var a1 = cc.rotateTo(1, 360);var a2 = cc.callFunc(this.flag2, this);this.flag.runAction(cc.sequence(a1, a2));},
4.3 狀態(tài)機(jī)
游戲的本質(zhì)就是一個(gè)主循環(huán)加上各種狀態(tài)的切換。在循環(huán)中，游戲要處理游戲邏輯、用戶輸入、畫面渲染、數(shù)據(jù)更新、電腦角色AI等事務(wù)（本游戲主要是前三個(gè)，核心邏輯都在 update 函數(shù)里）。為什么配置低的電腦玩游戲會(huì)“卡”，原因就是每一次循環(huán)需要的時(shí)間更長(zhǎng)，以至于無(wú)法讓游戲的“幀數(shù)”達(dá)到人無(wú)法感知的程度。
只有主循環(huán)，游戲仍然是“死”的。只有加上各種“狀態(tài)”，游戲才能推進(jìn)、勝利或者失敗。（可留意代碼中 phase 變量的作用）
狀態(tài)機(jī)示意圖（非本游戲）：
4.4 數(shù)學(xué)
有人常問，數(shù)學(xué)對(duì)于學(xué)編程到底重不重要？我覺得吧，不要擔(dān)心，大多數(shù)情況你在開發(fā)中是用不到數(shù)學(xué)的。但如果你是一個(gè)游戲程序員，那至少你得對(duì)初中程度的數(shù)學(xué)和物理滾瓜爛熟。
前面有提到，這個(gè)游戲的核心控制是用數(shù)學(xué)來(lái)計(jì)算的。其實(shí)可以理解為，用代碼實(shí)現(xiàn)了一套牛頓三大定律的世界：
飛行器始終受到一個(gè)向下的重力G
當(dāng)“點(diǎn)火”時(shí)，飛行器會(huì)收到一個(gè)向頂部方向（未必是向上）的推力F
根據(jù)飛行器當(dāng)前的姿態(tài)角度，計(jì)算出這個(gè)推力F分別在x軸和y軸上的分量（要用到三角函數(shù)）
因?yàn)榱图铀俣瘸烧?，所以最終計(jì)算出的軸向作用力就可以當(dāng)做加速度來(lái)使用。這個(gè)加速度會(huì)在每一幀去改變飛行器在x軸和y軸上的速度，同時(shí)速度又會(huì)在每一幀去改變飛行器在x軸和y軸上的位移
參考代碼：
var change = this.node;this.speed_y += this.ctrl.G;var f_x = Math.sin(-Math.PI / 180 * change.angle);var f_y = Math.cos(Math.PI / 180 * change.angle);this.speed_x *= 1.001;this.speed_x += f_x * this.ctrl.F;this.speed_y += f_y * this.ctrl.F;change.x += this.speed_x * dt * 60;change.y += this.speed_y * dt * 60;change.angle?+=?this.ctrl.R;
你可能猜不到，這個(gè)簡(jiǎn)單的小游戲里，最復(fù)雜的一段代碼是哪里：
是的，就是這個(gè)落地后調(diào)整姿態(tài)的小動(dòng)作。如果你看到代碼里這一通復(fù)雜的計(jì)算操作一臉懵逼，就跳過(guò)它吧。
4.5 引擎
如果你的目標(biāo)是寫出好玩的游戲，那么選一個(gè)合適的引擎很重要。對(duì)我個(gè)人來(lái)說(shuō)，這次的噴火效果是一個(gè)小彩蛋，用了 Cocos Creator 里的粒子系統(tǒng)。這是我第一次用它，花了十來(lái)分鐘就搞定了，效果還不錯(cuò)?？梢詫?duì)比下我之前做的火箭回收小游戲，算是相當(dāng)真實(shí)了！
假如你要閱讀源碼，或在基礎(chǔ)上做進(jìn)一步修改，可以重點(diǎn)對(duì)照以上幾點(diǎn)進(jìn)行閱讀。
如果你對(duì)游戲編程感興趣，或者還想看點(diǎn)其他類型游戲的話，可以在文章下留言，我會(huì)參考大家的意見。如果你喜歡我的內(nèi)容，歡迎點(diǎn)贊和轉(zhuǎn)發(fā)。
獲取游戲演示及源碼：
請(qǐng)?jiān)诠娞?hào)“Crossin的編程教室”里回復(fù)關(guān)鍵字：
嫦娥
_往期文章推薦_