Cocos Creator實現左右跳遊戲，提供完整遊戲程式碼工程
- 2019 年 10 月 15 日
- 筆記
1. 玩法說明
遊戲開始後，點擊螢幕左右兩側，機器人朝左上方或右上方跳一步，如果下一步有石塊，成功得1分，否則遊戲結束。
2. 模組介紹
遊戲場景分為2個：主頁場景（home）、遊戲場景（game）。
主頁場景（home）作為遊戲入口，沒有其他功能，單純提供遊戲入口。
遊戲場景（game）實現遊戲玩法以及遊戲邏輯控制，介面如下：
遊戲的主體功能，都在遊戲場景內，遊戲場景的主要功能結構如下圖：
3. 開發說明
這裡主要介紹遊戲場景的邏輯，按照上面功能結構進行介紹，先看一下遊戲場景內的所有課件UI組件：
下面分模組介紹：
石塊邏輯（Box）
腳本掛載在石塊預製上，實現石塊相關邏輯，主要有2個：
1. 石塊往下運動
根據機器人當前螢幕位置，機器人跳動後，無論成功還是失敗，讓石塊往下方運動，運動到螢幕外，對應程式碼如下：
down(y: number){ this.node.runAction(cc.sequence( cc.moveBy(0.4, 0, y), cc.callFunc( () => { NodeMgr.putBox(this.node); }) )); }
2. 記錄數據
private mPrevBox: cc.Node = null; // 上一個石塊 private mNextBox: cc.Node = null; // 下一個石塊 private mOffset: number = 0; // 左右偏移量 [-4,4]
上下石塊主要是為了提供給機器人使用，讓機器知道下一個跳過去的位置在哪裡，而偏移量則記錄石塊在螢幕水平方向上的位置，從左到右，取值[-4,4]整數。
節點管理邏輯（NodeMgr）
遊戲中的石塊，最多的時候，只鋪滿3個螢幕高度，超出了以後，幕布會移動到最下，石塊重繪，如此循環，以達到一直玩下去的目的，所以石塊是反覆的移除和添加的，使用節電池，能讓遊戲有更好的表現。
1. 獲取石塊節點
判斷節電池中是否已經有，有就去現成的，沒有則返回空，讓遊戲邏輯自己生成一個新的節點，程式碼如下：
2. 回收石塊節點
移除節點時，直接把節點放入節點池，提供下次需要時使用，程式碼如下：
遊戲邏輯（Game）
Game腳本組件掛載在遊戲場景的根節點上，石塊管理腳本組件也一樣，如下圖：
主要功能有3個：
1. 點擊事件邏輯
根據點擊位置的x坐標判斷，在螢幕左邊往左跳，在螢幕右邊往右跳。能不能跳之前，需要判斷機器人現在是否正在跳，需要注意，程式碼如下：
2.遊戲背景運動控制
遊戲開始時，計算背景運動的最大y坐標，運動前，判定跳以後是否超過最大坐標，移動到第一屏位置，類似石塊擺放邏輯，主要程式碼如下：
bgDown(){ let maxY = -cc.winSize.height / 2 - 2 * cc.winSize.height; let interval = this.node.getComponent('BoxMgr').getIntervalY(); // 超出了，刷屏 if(this.nodeBg.y - interval <= maxY){ this.nodeBg.y += 2 * cc.winSize.height; this.reloadBoxs(); } // 下移 this.nodeBg.runAction(cc.sequence( cc.moveBy(0.2, 0, -interval), cc.callFunc( () => { }) )); }
3.控制石塊重繪
結合遊戲背景控制邏輯，判斷所有石塊是否需要重繪製。
石塊管理邏輯（BoxMgr）
掛載在遊戲場景根節點，主要完成以下3項功能：
1. 生成新的石塊
對應程式碼中的 reloadNew函數，程式碼太多，就不貼程式碼了，需要的話，下載工程程式碼看。
2. 載入所有石塊
先判斷有沒有上一屏保留的，有的話，先繪製上一屏，再繪製新的，新的在第三螢幕能顯示的，需要保留，用來下次切屏的時候繪製。
3. 清理石塊
清理所有石塊，保留在NodeMgr中，程式碼如下：
機器人邏輯（Robot）
主要功能
根據下一跳方向，判斷機器人能否跳過去，對應程式碼中的jump函數。
關注微信公眾號『 一枚小工 』獲取遊戲源碼，微信掃描以下二維碼，關注公眾號。
