Cocos Creator實現左右跳游戲，提供完整游戲代碼工程

​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函數。

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

​