Cocos Creator 实现左右跳游戏

本文首发于：一枚小工（caizj_cn）

Cocos 经授权转载，感谢作者创作

1

玩法说明

游戏开始后，点击屏幕左右两侧，机器人朝左上方或右上方跳一步，如果下一步有石块，成功得1分，否则游戏结束。

2

模块介绍

游戏场景分为2个：主页场景（home）、游戏场景（game）。

主页场景（home）作为游戏入口，没有其他功能，单纯提供游戏入口。

游戏场景（game）实现游戏玩法以及游戏逻辑控制，界面如下：

游戏的主体功能，都在游戏场景内，游戏场景的主要功能结构如下图：

3

开发说明

这里主要介绍游戏场景的逻辑，按照上面功能结构进行介绍，先看一下游戏场景内的所有课件 UI 组件：

下面分模块介绍：

1

石块逻辑（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]整数。

2

节点管理逻辑（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;
    }
}

3

游戏逻辑（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）控制石块重绘

结合游戏背景控制逻辑，判断所有石块是否需要重绘制。

4

石块管理逻辑（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 = [];
    }
}

5

机器人逻辑（Robot）

主要功能：根据下一跳方向，判断机器人能否跳过去，对应代码中的 jump 函数。感兴趣的开发者可关注公众号“一枚小工”，发送“左右跳”获取完整工程源码。感谢小工的创作！

如果您在使用 Cocos Creator 的过程中，获得了独到的开发心得、见解或是方法，并且乐于分享出来，帮助更多开发者解决技术问题，加速游戏开发效率，期待您与我们联系！

更

多

精

彩

创意小游戏橙皮书发布

Cocos技术派|3D小游戏《快上车》技术分享

用 Cocos Creator 快速制作打地鼠游戏

1周开发，7留35%，小游戏《成语消消对战》团队专访

Cocos Service 全面解析

我的小游戏开发之路|腾讯TGideas周桂华

创意小游戏《荒野日记》Cocos专访：游戏如何讲故事？

5G 云游戏亮相 Chinajoy，大作一键秒玩

Cocos Creator 接入微信小游戏引擎插件指引

Cocos海外开发者专访：遗憾的是没早点开始做游戏

Cocos Creator 重力球游戏制作教程

用 Cocos Creator 制作平台跳跃游戏