轉載請保留原文連結，個人公眾號：xinshouit（新手程式設計師），歡迎關注

準備工作

把背景圖拉長，很長很長的那種。。。。一會我們要讓它滑動起來

背景動畫

為背景節點新增滾動動畫

現在背景就迴圈滾動起來了（圖是我後來截的，這步猴哥還沒登場呢）

猴哥動畫

導彈動畫

這裡我們要新增兩個Clip，一個是高空導彈，一個是低空導彈

這裡我們要給導彈加幾個幀事件，在導彈導彈猴哥頭上的幾個幀上新增judgeDown事件，當導彈到達猴哥頭上，猴哥還沒低頭，那就遊戲結束，低空導彈同理，需要猴哥跳起

結束場景

遊戲指令碼

Game.js

cc.Class({
    extends: cc.Component,

    properties: {
        king:{
            default:null,
            type:cc.Node,
        }
    },

    onLoad: function () {
        var self = this;
        //左側蹲，右側跳
        this.node.on('touchstart',function(event){
            var visibleSize = cc.director.getVisibleSize();
            if
 
(event.getLocationX()<visibleSize.width/2){
                self.king.getComponent('King').down();
            }else{
                self.king.getComponent('King').jump();
            }
        });
        //左側鬆手就恢復跑的狀態
        this.node.on('touchend',function(event){
            var visibleSize = cc.director.getVisibleSize();
            if
 
(event.getLocationX()<visibleSize.width/2){
                self.king.getComponent('King').downRelease();
            }else{
                // self.king.getComponent('King').jump();
            }
        });
    },

});

King.js

cc.Class({
    extends: cc.Component,

    properties: {
        // 主角跳躍高度
        jumpHeight: 0,
        // 主角跳躍持續時間
        jumpDuration: 0,
        //主角狀態
        state:'run',
    },

    //跑
    run:function(){
        this.getComponent(cc.Animation).play('king_run');
        this.state = 'run';
    },

    //跳
    jump:function(){
        if(this.state == 'run'){
            this.state = 'jump';
            this.getComponent(cc.Animation).stop();
            this.node.runAction(cc.sequence(cc.jumpBy(this.jumpDuration, cc.p(0,0), this.jumpHeight, 1),
                                cc.callFunc(function() {
                                    this.run();
                                }, this)));
        }
    },

    //彎腰跑
    down:function(){
        if(this.state == 'run'){
            this.state = 'down';
            this.node.runAction(cc.scaleTo(0.05, 1, 0.5));
        }
    },

    //腰累了
    downRelease:function(){
        if(this.state == 'down'){
            this.node.runAction(cc.sequence(cc.scaleTo(0.05, 1, 1),
                                cc.callFunc(function() {
                                    this.run();
                                }, this)));
        }
    },
});

Bomb.js

cc.Class({
    extends: cc.Component,

    properties: {
        king:{
            default:null,
            type:cc.Node,
        }
    },

    //判斷高空導彈來時，猴哥是否蹲下(響應之前設定的幀事件)
    judgeDown:function(){
        if(this.king.getComponent('King').state == 'down'){
            console.log("down---------------------");
        }else{
            cc.director.loadScene('Over');
        }
    },  

    //判斷低空導彈來時，猴哥是否跳起
    judgeJump:function(){
        if(this.king.getComponent('King').state == 'jump'){
            console.log("jump---------------------");
        }else{
            cc.director.loadScene('Over');
        }
    },

    onLoad: function () {
        let self = this;
        //每隔2秒隨機發射高空和低空導彈
        this.schedule(function(){
            if(Math.random()>0.5){
                this.getComponent(cc.Animation).play('bomb_high');
            }else{
                this.getComponent(cc.Animation).play('bomb_low');
            }
        },3);
    },
});

Over.js

cc.Class({
    extends: cc.Component,

    properties: {
    },

    reTry: function(){
        cc.director.loadScene('Game');
    },

    onLoad: function () {

    },

});

最終效果：