原创

Cocos Creator零基础游戏实战《左右跳》JS教程04-实现机器人左右跳

本章简介

我们分析一下左右跳的玩法。点击屏幕左侧,机器人向左跳跃,点击屏幕右侧,机器人向右跳跃。本章内容教大家如何使用Cocos Creator来实现机器人向左跳跃向右跳跃

创建机器人节点

在编写脚本控制机器人左右跳跃之前,我们先把机器人拖放在想要的位置。选中start场景,把机器人素材player拖放到Canvas节点下,会自动创建player节点

file

声明机器人节点

在用start脚本控制机器人player节点之前,我们先要在start脚本声明机器人player节点

properties: {
        l1: cc.Node, //左侧背景1
        l2: cc.Node, //左侧背景2
        r1: cc.Node, //右侧背景1
        r2: cc.Node, //右侧背景2
        speed: 50, // 背景移动速度
        player: cc.Node, //机器人节点
 },

引用机器人节点

start脚本声明好机器人player节点,我们还需要引用player节点。因为start脚本挂载在start场景,我们选中start场景,点击左上角的Canvas节点,在右侧可以看到刚才声明的player节点。我们把机器人player节点拖放进去即可完成引用。

file

添加机器人左右跳跃方法

在完成机器人player节点的引用后,我们就可以编写脚本来控制机器人左右跳跃了。在start脚本添加两个方法。
向左跳跃:

playerMoveLeft () {
        console.log('向左跳跃');
},

向右跳跃:

playerMoveRight () {
        console.log('向右跳跃');
},

编写点击屏幕方法

点击屏幕左侧,调用向左跳跃方法playerMoveLeft 。点击屏幕右侧,调用向右跳跃方法playerMoveRight

onTouchStart (event) {
        console.log('点击屏幕');

        var touchLoc = event.getLocation();
        if (touchLoc.x >= cc.winSize.width/2) {
            // 向右
            this.playerMoveRight();
        } else {
            // 向左
            this.playerMoveLeft();
        }    

        this.bgMove();
},

运行后,点击屏幕看看效果

file

编写机器人向左和向右跳跃方法

向左跳跃我们会用到两个方法。
cc.moveTo: 在设定时间,移动到目标位置。
cc.sequence: 顺序执行动作,创建的动作将按顺序依次运行。

playerMoveLeft () {
        console.log('向左跳跃');
        // 用0.1秒的时间,向上移动100px
        var up = cc.moveTo(0.1,cc.Vec2(this.player.x,this.player.y+100));
        // 用0.1秒的时间, 向下移动100px
        var down = cc.moveTo(0.1,cc.Vec2(this.player.x,this.player.y));
        // 先向上移动,再向下移动
        var jump = cc.sequence(up,down);
        // 执行动作
        this.player.runAction(jump);
        // X轴翻转,1表示正向,-1表示反向
        this.player.scaleX = 1;
},

向右同理,只不过我们的机器人需要反向翻转。

playerMoveRight () {
        console.log('向右跳跃');
        // 用0.1秒的时间,向上移动100px
        var up = cc.moveTo(0.1,cc.Vec2(this.player.x,this.player.y+100));
        // 用0.1秒的时间, 向下移动100px
        var down = cc.moveTo(0.1,cc.Vec2(this.player.x,this.player.y));
        // 先向上移动,再向下移动
        var jump = cc.sequence(up,down);
        // 执行动作
        this.player.runAction(jump);
        // X轴翻转,1表示正向,-1表示反向
        this.player.scaleX = -1;
},

给动作添加回调

我们想要的结果是点击屏幕,机器人一直在原地跳跃,可是我们发现如果快速的点击屏幕,机器人会逐渐向上移动,这是因为我们点击过快,在一个动作还没有执行完,又开始执行下一次点击动作,导致y坐标上移,所以我们要在一个动作执行完成,才可以让用户点击屏幕。

playerMoveLeft () {
        console.log('向左跳跃');
        // 用0.1秒的时间,向上移动100px
        var up = cc.moveTo(0.1,cc.Vec2(this.player.x,this.player.y+100));
        // 用0.1秒的时间, 向下移动100px
        var down = cc.moveTo(0.1,cc.Vec2(this.player.x,this.player.y));
        // 执行回调
        var callback = cc.callFunc(this.jumpIsOver, this); 
        // 先向上移动,再向下移动
        var jump = cc.sequence(up,down,callback);
        // 执行动作
        this.player.runAction(jump);
        // X轴翻转,1表示正向,-1表示反向
        this.player.scaleX = 1;
},
jumpIsOver () {
        console.log('跳跃完成');
},

file

声明一个jump的属性,true表示可以跳跃,false表示不可以。

properties: {
        l1: cc.Node, //左侧背景1
        l2: cc.Node, //左侧背景2
        r1: cc.Node, //右侧背景1
        r2: cc.Node, //右侧背景2
        speed: 50, //背景移动速度
        player: cc.Node, //机器人节点
        jump: true, //是否可以跳
},

在触摸函数onTouchStart加入判断

onTouchStart (event) {
        console.log('点击屏幕');
        if(!this.jump){
            return;
        }
        // 点击后就不让点击,直到动作执行完成
        this.jump = false;

        var touchLoc = event.getLocation();
        if (touchLoc.x >= cc.winSize.width/2) {
            // 向右
            this.playerMoveRight();
        } else {
            // 向左
            this.playerMoveLeft();
        }    

        this.bgMove();
},

跳跃完成可以点击

jumpIsOver () {
        console.log('跳跃完成');
        // 跳跃完成,可以点击
        this.jump = true;
},

本章源码地址

码云地址:https://gitee.com/cbb123/LR04

本章内容到此结束,觉得对你有帮助的记得收藏本站,谢谢老铁们的支持!

正文到此结束
本文目录