『 遊戲玩法 』

  通過手機陀螺儀，調整手機，讓球從上一層的間隔中落到下一層，樓層會不斷上漲，如果球碰到上方或者下方的火焰，遊戲結束。

『 遊戲預覽 』

​

『 開發工具 』

  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 配置重力加速度：

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);

  基本流程就已經完成了，最後再加音效，算得分，就是一個完成的遊戲啦！

關注微信公眾號『一枚小工』獲取遊戲原始碼，微信掃以下二維碼，關注公眾號。