CocosCreator之KUOKUO带你做疯狂木板-过桥（2）

本次引擎2.0.5

编辑工具VSCode

目标：

第二部分，过桥与得分。

接着上一节：

我们实现了木板的变长与下落。

现在我们实现一个牛逼的平台，怎么说它牛逼呢？我准备全程就用它一个来完成所有功能。

看KUOKUO怎么实现。console.log(滑稽)

首先，我们复制个ground然后改名字为move_ground,然后拖到中间。

好了，然后我们在mian脚本里声明它：

接下来，我们在onLoad中提前随机个位置和宽度：

位置在0到150之间；宽度在100到200之间吧（你们看心情随机）

我们写个方法：

然后在onLoad开始时调用一次：

好了,随机的平台弄好了，我们在结束触摸时进行长度判断吧：

就是先计算一下可以踩住桥的一个范围，然后看看木板的height在不在范围内：

看注释(第二个式子的注释应该是右边界)：

这样就可以判断游戏状态了。

接下来我们写一下判断成功后的动画（判断失败那里我打印了Gameover，小伙伴们去自定义吧，嘿嘿）

然后，成功后小人走过去，木板长度归零，角度回到0，

记得声明个zhujue节点；把主角拖过去：

在长度判断成功后这样：

小人走过去之后把板子复位，然后平台跟小人一起回去，但是板子回去的多，直至出屏幕 

怎么样，注释全吧！！！

嘻嘻！

看看效果：

 

怎么样？

来，加个分数显示吧！

怎么样，不难吧。

 

好了，由于这个小游戏就用到了一个脚本（其实不是好习惯，还有我的代码并不是最优的，主要是思维要到位！）

我就不打包上传网盘啦！给出代码：

main.js

cc.Class({
    extends: cc.Component,

    properties: {
        // 木板节点
        blank : cc.Node,
        // 变长标志
        long_flag : 0,
        // 移动平台
        move_ground: cc.Node,
        // 主角
        zhujue : cc.Node,
        // 分数显示
        fen_label : cc.Label,
        // 分数
        fen : 0
    },

    onLoad () {
        this.fen_label.string = this.fen + '';
        // 初始化时木板为0
        this.blank.height = 0;
        // 随机平台属性
        this.randomGround();
        // 触摸开始
        this.node.on('touchstart',function() {
            this.long_flag = 1;
        },this);
        // 触摸结束
        this.node.on('touchend',function() {
            this.long_flag = 0;
            // 计算可通过平台的范围
            // 移动平台的 x 坐标减去木板的 x 坐标再减去宽度的一半为左边界
            var left = this.move_ground.x - this.blank.x - (this.move_ground.width / 2);
            // 移动平台的 x 坐标减去木板的 x 坐标再加上宽度的一半为左边界
            var right = this.move_ground.x - this.blank.x + (this.move_ground.width / 2);
            // 如果在这个范围内
            if (this.blank.height >= left && this.blank.height <= right) {
                // 小人走过去动作
                // 注意 y 轴坐标是zhujue的
                var act_go = cc.callFunc(function() {
                    this.zhujue.runAction(cc.moveTo(1,this.move_ground.x,this.zhujue.y));
                    // 加分
                    this.fen ++;
                    this.fen_label.string = this.fen + '';
                },this);
                
                // 开始旋转90度后小人走过去
                this.blank.runAction(cc.sequence(cc.rotateBy(1.5,90),act_go));

                // 1.1秒 + 1.5秒 后小人跟平台一起往回走
                this.scheduleOnce(function() {
                    // 板子复位
                    this.blank.height = 0;
                    this.blank.rotation = 0;
                    // 注意各自 y 坐标
                    this.zhujue.runAction(cc.moveTo(1,-220,this.zhujue.y));
                    this.move_ground.runAction(cc.moveTo(1.5,-330,this.move_ground.y));
                },2.6);

                // 平台出屏幕后把 y 减小，然后随机位置浮现
                this.scheduleOnce(function() {
                    this.move_ground.y = -750;
                    this.randomGround();
                    this.move_ground.runAction(cc.moveBy(1,0,500));
                },2.6 + 1.5);
            }
            else {
                console.log('Gameover');
            }
        },this);
    },

    // 随机移动平台属性
    randomGround () {
        this.move_ground.x = 0;
        // 随机x坐标在 0 - 150
        this.move_ground.x += 150 * Math.random();
        // 随机宽度 100 - 200；
        this.move_ground.width = 100 + 100 *Math.random();
    },

    update (dt) {
        if (this.long_flag == 0) {
            return;
        }
        else {
            this.blank.height += 100 * dt;
        }
    }

});

Get ！~~~

加我QQ群：（博客里面的项目，群文件里都有哦）

706176551

我们一起学习！

O(∩_∩)O~~