cocos creator猴哥跑酷简单游戏

思考一：能动的精灵（背景，猴哥，子弹）怎么制作

参见官网：创建Animation组件和动画剪辑

参考文章：【Cocos Creator 实战教程(2)】——天天酷跑(动画、动作相关)

Animation组件：

clip.png

子弹添加动画事件

animationEvent.png

动画事件截图

jump.png

帧事件代码

judgeJump:function () {
    let self = this;
    console.log('跳跃判断');
    //在低子弹飞来时是否跳跃，没跳跃就挂了
    if (self.king.getComponent('King').state == 'jump') {
        console.log('jump*********************************');
    }else{
        cc.director.loadScene('over');
    }
},

judgeDown:function () {
    let self = this;
    console.log('下蹲判断');
    //在高子弹飞来时是否下蹲，没下蹲就挂了
    if (self.king.getComponent('King').state == 'down') {
        console.log('down*********************************');
    } else {
        this.current = cc.audioEngine.play(self.voiceLose, false, 1);
        cc.director.loadScene('over');
    }
 },

子弹动画，在页面加载后不能自动播放，可以在代码中控制

bomb.png

cc.Class({
    extends: cc.Component,    
    onLoad () {
        this.schedule(function () {
            //定时器 随机播放 boom_low 或 boom_hight 动画
            if (Math.random() > 0.5) {
                this.getComponent(cc.Animation).play('boom_low');
            }else{
                this.getComponent(cc.Animation).play('boom_hight');
            }
        }, 3);
    }
})

思考二：跳跃和下蹲动作怎么做？

提一下，动作类(Action)

cc.JumpBy(duration, position, y, height, jumps) 持续时长，位置，y坐标，高度，跳跃步长

cc.scaleTo 下蹲动作是缩放动作

cc.sequence 是一种封装多个动作的对象，当这个对象执行时被封装的动作会顺序执行

官方文档：动作序列(Sequence)

xxBy 与 xxTo区别：xxBy以当前节点状态为参照，xxTo直接变化到某种状态

cc.callFunc(function(target, data) {
        //target  默认是调用这个action的本体Node，Sprite等等
        //data 传递的参数，多个参数可以用[data1, data2] 的Array方式组合

    },
    this, //通常绑定最外围的HelloWorldLayer 之类的， 可以方便调用， 比如为了removeChild

    data //参数，任意格式
);

// 跳跃
jumpUp:function () {    
    if (this.state == 'run') {
        this.state = 'jump';
        this.getComponent(cc.Animation).stop();
        var callbackJump =  cc.callFunc(function () {
                                console.log('跳完了');
                                this.run();
                            }, this);
        this.node.runAction(
            cc.sequence(
                cc.jumpBy(this.jumpDelay, cc.p(0,0), this.jumpHight, 1),
                callbackJump
            )
        );
    }
}

show.png

项目源码参考文档中有，我没做啥改动，就不发了，晚安！