游戏开发实战之《冰火世界》（二）

笔者在上一篇《游戏开发实战之《冰火世界》（一）》中忘记介绍这个小游戏的玩法了，现在来补充一下冰火世界玩法

1：主角有2种状态，冰状态（蓝色）和火状态（红色），开场时默认状态为冰状态。

2：颜色块有2种，冰块（蓝色）和火块（红色）。

3：主角冰状态下只能吃冰块，火状态下只能吃火块，每吃一个增加能量值----顶部的能量条会增加，积分也增加。

4：主角可以利用跳跃避开不符合自身状态的颜色块，也可以用跳跃吃到够不着的颜色块，跳跃支持2段连续跳跃；主角可以利用切换状态（ps:来回切换冰火状态，但切换状态会消耗能量值）来吃到即将触碰到的不同颜色块。

5：随着时间流逝，颜色块移动速度会增加，主角触碰到不同颜色块则游戏结束。

上一篇介绍了主角的走路帧动画，这篇完成主角的切换状态和跳跃。创建一个player.js脚本挂在player节点上如下：

游戏开发实战之《冰火世界》（二）

player.js脚本如下：

cc.Class({
    extends: cc.Component,

    properties: {
         currState:0,               //0为冰状态，1为火状态
         jumpState:0,               //0无跳跃，1处于1段跳跃状态，2处于2段跳跃状态
         jumpHeight:0,              //跳跃高度
         grade:0,                   //分数
         gradeLabel:{               //分数label
             default:null,
             type:cc.Label
         }
    },

    jump:function()
    {
        let y=this.node.y
        let jumpH=this.jumpState==1?this.jumpHeight:(this.jumpHeight+30)
        let jump=cc.jumpBy(0.5,0,(this.flootY-y),jumpH,1)
        let callback=cc.callFunc(function(){
            this.jumpState=0
        }.bind(this))
        let spawn=cc.spawn(jump,cc.rotateBy(0.5,360))
        this.node.stopAllActions()
        if(this.jumpState==2)
        {
            this.node.runAction(cc.sequence(spawn,callback))
        }
        else
        {
            this.node.runAction(cc.sequence(jump,callback))
        }
        
    },

    onJump:function()
    {
        if(this.jumpState==2)    //目前仅支持连续跳跃2次
        {
            return  
        }
        else if(this.jumpState==1)
        {
            this.jumpState=2
        }
        else if(this.jumpState==0)
        {
            this.jumpState=1
        }
        this.jump()
    },
}

切回编辑器，设置一下跳跃高度jumpHeight:

游戏开发实战之《冰火世界》（二）

笔者设为100，读者可以自己按照喜好设置。

其中onJump是跳跃按钮的回调函数，jumpState用来判断当前是一段跳跃还是二段跳跃，将跳跃按钮的回调函数设置为onJump：

游戏开发实战之《冰火世界》（二）

emmm，这里实际上不是设置为onJump，因为一个游戏可能有多个操作，因此笔者分离出操作，新建operator节点，并在operator节点上挂了operator.js脚本，其内容如下：

cc.Class({
    extends: cc.Component,

    properties: {
        m_player:{      
            default:null,
            type:cc.Node          //玩家
        },
        m_power:0,                                      //当前能量值
        m_changeStateNeedPower:0,                       //切换一次状态所需能量值
        m_addPower:0,                                   //得分一次获得的能量值
    }

    onClick:function(event,customData)
    {
        if(customData=="1")                           //跳跃
        {
            this.m_player.getComponent("player").onJump()
        }
    }

}

真正设为回调的是onClick，可以看到里面调用了主角的onJump函数。然后，需要把player节点传进来如：

游戏开发实战之《冰火世界》（二）

好了，运行一下，看看跳跃和连续的二段跳跃是不是完成了？什么报错了？对，原因是this.flootY未定义。this.flootY是地板的高度，在player.js里面增加onload函数（ps:onload会被自动执行的哦）：

    onLoad () {
        this.node.color=this.currState==0?new cc.Color(136,183,255):new cc.Color(240,139,175)           //初始状态的颜色
        this.flootY=this.node.y                                     //因为一开始主角是站在地板上的，主角高度为地板高度
        this.roleAni=this.node.getComponent(cc.Animation)           //获取动画组件
        this.run()                                                  //主角帧动画
}

看到了一个陌生的run函数？那就是上一篇完成的主角行走的帧动画：

 run:function()
    {
        this.roleAni.play("run")
    },

现在运行，不出意外主角已经可以1段跳跃和2段跳跃了。由于笔者是完成了游戏才写的教程，读者有问题可以留言提问。

那么，接下来切换状态，在player.js脚本中新增函数:

    changeState:function()          //切换状态
    {
        this.currState=this.currState==0?1:0
        this.node.color=this.currState==0?new cc.Color(136,183,255):new cc.Color(240,139,175)
    },

然后操作脚本里增加：

 onClick:function(event,customData)
    {
        if(customData=="0")             //切换状态
        {
            this.m_player.getComponent("player").changeState()
        }
        else if(customData=="1")                           //跳跃
        {
            this.m_player.getComponent("player").onJump()
        }
}

把切换状态的按钮回调设置为：

游戏开发实战之《冰火世界》（二）

注意传customEventData,跳跃的是1，切换状态为0。现在运行游戏，可以看到点击切换状态，主角的颜色会来回变化。

游戏开发实战之《冰火世界》（二）

相关推荐