「獲取源碼」
點擊上方藍字關注公衆號「遊戲開發小白變怪獸」，回覆「重力球」獲取源碼及美術資源。
「遊戲玩法」
通過手機陀螺儀，調整手機，讓球從上一層的間隔中落到下一層，樓層會不斷上漲，如果球碰到上方或者下方的火焰，遊戲結束。
「遊戲預覽」
「開發工具」
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的組件，如下圖：
到這一步，我們就可以看到效果了，用瀏覽器運行，如下圖：
運行出來後，是不是發現界面太大，要滑動滑條才能顯示完整，這樣開發起來會比較麻煩，我們要想個辦法讓他變小點：
4.1將canvas的DesignResolution改成360*640；
4.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 配置重力加速度：
cc.director.getPhysicsManager().gravity= cc.v2(0, -1000); //cc.v2（x方向的重力，y方向的重力）
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);
基本流程就已經完成了，最後再加音效，算得分，就是一個完成的遊戲啦！
推薦閱讀：
我是「Super於」，立志做一個每天都有正反饋的人！
