Cocos Creator一步一步實現重力球遊戲，附完整代碼
- 2019 年 10 月 15 日
- 筆記
『 遊戲玩法 』
通過手機陀螺儀，調整手機，讓球從上一層的間隔中落到下一層，樓層會不斷上漲，如果球碰到上方或者下方的火焰，遊戲結束。
『 遊戲預覽 』
『 開發工具 』
1. CocosCreator 2.1.2
2. VisualStudio Code
『 參考API 』
1. PhysicsManager
2. SystemEvent
3. View
4. action
5. audioEngine
6. ParticleSystem
『 遊戲模塊 』
1. 遊戲層
2. 物理場景層
3. 結算層
『 開發流程 』
1. 創建項目
選擇一個HelloWorld項目，設置保存路徑，點擊新建項目。
2. 創建遊戲場景
我們直接將新建的helloworld場景改名為我們的遊戲場景gameScene。
3. 設計分辨率和初始場景
遊戲有橫屏也有豎屏，我們在開發一款遊戲時，需要先確定好設計方向，選擇”項目”=>”項目設置”=>”項目預覽”，修改設計分辨率為：寬720，高1280，勾選上適配屏幕寬度。修改初始化預覽場景為上一步創建的gameScene.fire場景。（初始化預覽場景是在我們運行這個項目時，默認顯示的第一個場景，如果場景比較多時，設置初始場景可以更方便的展示我們想看的界面。）設置完成後點擊保存。
4. 搭建遊戲界面
我們先將項目的目錄結構做一下調整，新增一個resources文件夾，將Texture文件夾放到它的下面，並在resources文件夾下創建一個sound文件夾，用來存放遊戲音效（後面用到）。
Texture文件夾：用來存放遊戲圖片。
sound文件夾：用來存放遊戲音效。
接着將背景圖放到Texture文件夾中，如下圖：
打開CocosCreator，設置gameScene的Canvas屬性，刪除下方綁定的腳本組件和名為Label和cocos的組件，如下圖：
設置background屬性，刪除名為Label和cocos的組件，如下圖：
到這一步，我們就可以看到效果了，用瀏覽器運行，如下圖：
運行出來後，是不是發現界面太大，要滑動滑條才能顯示完整，這樣開發起來會比較麻煩，我們要想個辦法讓他變小點：
1. 將canvas的DesignResolution改成360*640；
2. 將background 的Scale縮放屬性X,Y都改成0.5。
再次瀏覽器運行，就完整的顯示出來了，這個設置在遊戲開發完後我們需要還原，切記。
5. 創建遊戲腳本
我們就直接將HelloWord.js改個名字，改名為gameLayer.js，刪除多餘代碼，只保留基礎框架，如下圖：
6. 綁定腳本
現在界面和腳本都創建好了，我們再將他們關聯起來，選中gameScene場景的Canvas組件，將gameLayer.js拖到右邊屬性欄中，如下圖：
這樣就將腳本和場景關聯了。
7. 綁定屬性
通過在組件腳本中聲明屬性，我們可以將腳本組件中的字段可視化地展示在屬性檢查器中，從而方便地在場景中調整屬性值。
要聲明屬性，僅需要在 cc.Class 定義的properties字段中，填寫屬性名字和屬性參數即可，如下圖：
這時候，我們可以在屬性檢查器中看到上面定義的這個屬性，如下圖：
再將background組件拖到定義的這個屬性上，就將background組件和腳本中定義的bg屬性關聯上了，在代碼中用的this.bg就是background組件，後面所有的組件綁定同上方式，如下圖：
8. 創建預製
在assets下創建一個Prefab文件夾，再創建一個預製體，直接在gameScene中新建一個節點，將節點拖到Prefab文件夾下，就是一個預製體了。我們把名字改成ball，如下圖：
截止這一步，基礎方法已經了解了，接着我們再來實現遊戲功能。
9. UI和腳本綁定
先搭建遊戲ui界面，在腳本中聲明屬性，並將屬性和ui上的組件綁定起來，如下圖：
10. 重力傳感系統設置
10.1 開啟重力傳感系統
cc.systemEvent.setAccelerometerEnabled(true); cc.systemEvent.on(cc.SystemEvent.EventType.DEVICEMOTION,this.onDeviceMotionEvent, this);
10.2 關閉重力傳感系統
cc.systemEvent.off(cc.SystemEvent.EventType.DEVICEMOTION,this.onDeviceMotionEvent, this);
11. 物理系統設置
11.1 開啟物理系統：
cc.director.getPhysicsManager().enabled= true;
11.2 開啟物理調試狀態：
cc.director.getPhysicsManager().debugDrawFlags= true;
11.3 配置重力加速度：
12. 小球設置
接着我們創建一個小球，給小球綁定一個剛體，它就會沿着重力加速度方向做自由落體運動了：
現在運行項目，就可以看到一個小球垂直落下啦。
13. 小球擋板數值
板子的寬度，板與板之間的間隔，板子的坐標，都需要隨機獲取。所以，我們先預定義一些區間範圍的數據，在創建的時候用到
14. 先創建出一個擋板
擋板的預製體上已經綁定了多邊形的物理組件，（詳情請看cocosCreator編輯器中board.prefab的board節點上綁定的組件屬性）在設置完擋板的大小等一系列屬性後，需要調用apply()方法，這個方法可以刷新擋板身上綁定的多邊形組件的大小。
15. 擋板設計思路
接着再創建一行擋板,一行擋板的計算比較多，詳細代碼請參考gameLayer.js的第155~202行，設計思路如下：
先隨機計算一個擋板的寬度，再判斷是不是這行擋板的第一個擋板，如果是，則隨機獲取一個X坐標，否則通過上一個擋板的坐標和寬度計算當前擋板的坐標，直到不需要再創建為止。
16. 擋板初始化
遊戲未開始時，我們需要在界面上創建多行擋板：
17. 擋板移動控制
遊戲過程中，擋板向上運動，通過定時器無限循環調用移動函數，並判斷如果擋板超出可視範圍，就創建一行新的：
18. 擋板難度控制
為了增加遊戲難度，我們再實現一個升級功能，每隔10s加快擋板的運行速度，但也有上限，配置如下：
BOARD_COLOR是配置不同等級下擋板顯示的顏色。
19. 遊戲升級
升級功能比較容易，通過判斷時間戳的差值可以得出間隔時長，注意時間戳的單位是毫秒。我們用到的擋板的圖片顏色是白色的，在遊戲中通過自己設置圖片顏色，可以變換成任意我們想要的顏色，設置方法如下：
難點是如何做成漸變色，通過初始顏色和結束顏色的RGB值，計算出一系列的中間值，再用runAction方法執行顏色變化動作就可以了，詳細代碼請參考computeGRB（）和computeUpgrade（）這兩個函數。
20. 遊戲結束判斷
當小球碰撞了上下燃燒的火焰時，判定遊戲結束，這時需要進行碰撞監聽，我們創建一個contact.js腳本，綁定在火焰剛體和小球剛體上，並將這兩個剛體開啟碰撞監聽，將tag值設置為0（我們將除這兩個以外的其他剛體的tag都設置為1）如圖：
然後在腳本中實現碰撞監聽函數：
通過判斷碰撞物體身上的tag值來決定是否需要處理碰撞回調。
21. 遊戲得分記錄
當判定遊戲結束後，我們展示遊戲結算界面，並本地保存得分，本地存儲方式如下：
設置本地存儲：
cc.sys.localStorage.setItem("ballBestScore", this.curScore);
獲取本地存儲：
let ballBestScore = parseInt(cc.sys.localStorage.getItem("ballBestScore") || 0);
基本流程就已經完成了，最後再加音效，算得分，就是一個完成的遊戲啦！
關注微信公眾號『一枚小工』獲取遊戲源碼，微信掃以下二維碼，關注公眾號。
