​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列表组件ListComponent

Cocos Creator实现左右跳游戏的更多相关文章

  1. Cocos Creator实现左右跳游戏,提供完整游戏代码工程

    ​1. 玩法说明 游戏开始后,点击屏幕左右两侧,机器人朝左上方或右上方跳一步,如果下一步有石块,成功得1分,否则游戏结束. 2. 模块介绍 游戏场景分为2个:主页场景(home).游戏场景(game) ...

  2. cocos creator开发微信小游戏记录

    先用cocoscreator实现游戏逻辑 在cocoscreator项目里可以调用微信小游戏api 在cocos里面判断小游戏的运行环境 if (cc.sys.platform === cc.sys. ...

  3. cocos creator制作微信小游戏

    2019-05-30 22:11:47 基础: javaScript基础   https://www.bilibili.com/video/av34087791?from=search&sei ...

  4. [Cocos Creator]安卓上微信小游戏加载到100%就进不去了

    最近用Cocos Creator 开发微信小游戏,构建发布到微信上,用安卓手机预览打开后加载到100%就不动了,开始以为微信开发工具版本的问题,后来用苹果的手机测试了一下,发现也有同样的问题. 仔细分 ...

  5. 新编辑器Cocos Creator发布:对不起我来晚了!

    1月19日,由Cocos创始人王哲亲手撰写的一篇Cocos Creator新品发布稿件在朋友圈被行业人士疯狂转载,短短数小时阅读量突破五位数.Cocos Creator被誉为“注定将揭开Cocos开发 ...

  6. cocos creator入门

    前面的话 Cocos Creator 是一个完整的游戏开发解决方案,包括了 cocos2d-x 引擎的 JavaScript 实现,以及快速开发游戏所需要的各种图形界面工具.Cocos Creator ...

  7. cocos creator 入门理解点

    简单解释, [来源:官方文档] Cocos是触控科技推出的游戏开发一站式解决方案,包含了从新建立项.游戏制作.到打包上线的全套流程.开发者可以通过cocos快速生成代码.编辑资源和动画,最终输出适合于 ...

  8. 教你使用Cocos Creator制作国旗头像生成器,附源码!

    关注「编程小王子」公众号回复[头像生成器]获得源码! 下面我重点介绍一下Cocos Creator H5头像生成的实现方法: 获取手机相册图片 在 Cocos Creator 中加载相册图片 Coco ...

  9. 反复横跳的瞄准线!从向量计算说起!基于射线检测的实现!Cocos Creator!

    最近有小伙伴问我瞄准线遇到各种形状该怎么处理?如何实现反复横跳的瞄准线?最近刚好在<Cocos Creator游戏开发实战>中看到物理系统有一个射线检测,于是,基于这个射线检测,写了一个反 ...

随机推荐

  1. JVM(十三):后端编译优化

    JVM(十三):后端编译优化 在 JVM(一):源文件的转变 中我们介绍了 Java 中的前端优化,即将 Java 源代码转换为字节码文件.在本文中,我们将介绍字节码文件如何转换为本地机器码,并如何对 ...

  2. Zookeeper之Leader选举过程

    Leader在集群中是一个非常重要的角色,负责了整个事务的处理和调度,保证分布式数据一致性的关键所在.既然Leader在ZooKeeper集群中这么重要所以一定要保证集群在任何时候都有且仅有一个Lea ...

  3. P2518 [HAOI2010]计数 类似数位dp

    题意 你有一组非零数字(不一定唯一),你可以在其中插入任意个0,这样就可以产生无限个数.比如说给定{1,2},那么可以生成数字12,21,102,120,201,210,1002,1020,等等. 现 ...

  4. 求树的重心 DFS

    树的重心 何谓重心 树的重心:找到一个点,其所有的子树中最大的子树节点数最少,那么这个点就是这棵树的重心,删去重心后,生成的多棵树尽可能平衡. 树的重心可以通过简单的两次搜索求出,第一遍搜索求出每个结 ...

  5. BZOJ2655 Calc - dp 拉格朗日插值法

    BZOJ2655 Calc 参考 题意: 给定n,m,mod,问在对mod取模的背景下,从[1,m]中选出n个数相乘可以得到的总和为多少. 思路: 首先可以发现dp方程 ,假定dp[m][n]表示从[ ...

  6. [普及]NOIP 2015 推销员 贪心

    NOIP 2015 推销员 题意: 有一个喜欢疲劳的推销员,告诉你在一个单口胡同(数轴)中的n户家庭的位置,和向他们推销可以获得的疲劳度.分别输出向(1,2,3,4...n)户人家推销可以得到的最大疲 ...

  7. Marvelous Mazes UVA - 445

    #include<iostream> #include<stdio.h> #include<string> #include<cstring> #def ...

  8. UVA 494 Kindergarten Counting Game map

    Everybody sit down in a circle. Ok. Listen to me carefully.“Woooooo, you scwewy wabbit!”Now, could s ...

  9. git连接远程分支

    今天在再用git连接到远程的dev分支的时候出现了下面的情况 $ git checkout -b dev origin/dev fatal: 'origin/dev' is not a commit ...

  10. Quartz.Net使用教程

    在项目的开发过程中,难免会遇见后需要后台处理的任务,例如定时发送邮件通知.后台处理耗时的数据处理等,这个时候你就需要Quartz.Net了. Quartz.Net是纯净的,它是一个.Net程序集,是非 ...