​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. 獲取石塊節點

判斷節電池中是否已經有，有就去現成的，沒有則返回空，讓遊戲邏輯自己生成一個新的節點，程式碼如下：

public static putBox(box: cc.Node){
    if(this.mBoxNodePool == null){
        this.mBoxNodePool = new cc.NodePool('boxs');
    }
​
    if(box != null){
        this.mBoxNodePool.put(box);
    } 
}

2. 回收石塊節點

移除節點時，直接把節點放入節點池，提供下次需要時使用，程式碼如下：

public static getBox(){
    if(this.mBoxNodePool != null && this.mBoxNodePool.size() > 0){
        let box = this.mBoxNodePool.get();
        box.stopAllActions();
        return box;
    }else{
        return null;
    }
}

遊戲邏輯（Game）

Game指令碼元件掛載在遊戲場景的根節點上，石塊管理指令碼元件也一樣，如下圖：

​

主要功能有3個：

1. 點選事件邏輯

根據點選位置的x座標判斷，在螢幕左邊往左跳，在螢幕右邊往右跳。能不能跳之前，需要判斷機器人現在是否正在跳，需要注意，程式碼如下：

onTouchCallback(event: any){
    if(!this.mIsPlaying){
        return;
    }
​
    if(this.nodeRobot.getComponent('Robot').isJumping()){
        return;
    }
​
    this.bgDown();
​
    this.mIsPlaying = true;
    let location = event.getLocation();
    if(location.x < cc.winSize.width / 2){
        this.robotJumpLeft();
    }else{
        this.robotJumpRight();
    }       
}

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中，程式碼如下：

clearAll(){
    if(this.mMemBoxs != null){
        for(let i = 0; i < this.mMemBoxs.length; i++){
            this.putBox(this.mMemBoxs[i]);
        }
        this.mMemBoxs = [];
    }
​
    if(this.mNewBoxs != null){
        for(let i = 0; i < this.mNewBoxs.length; i++){
            this.putBox(this.mNewBoxs[i]);
        }
        this.mNewBoxs = [];
    }
}

機器人邏輯（Robot）

主要功能

根據下一跳方向，判斷機器人能否跳過去，對應程式碼中的jump函式。

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

​

『 往期精選 』

CocosCreator一步一步實現重力球遊戲

用 CocosCreator 快速開發推箱子游戲

CocosCreator列表元件ListCompo