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

最新推荐文章于 2019-07-08 16:53:35 发布

原创最新推荐文章于 2019-07-08 16:53:35 发布 · 391 阅读

0 ·

CC 4.0 BY-SA版权

游戏开发同时被 2 个专栏收录

10 篇文章

订阅专栏

cocosCreator

6 篇文章

订阅专栏

在前面3篇里，主角的切换状态、跳跃；背景循环、颜色块随机出现都做好了。那么现在就缺个最核心的功能了，那就是：碰撞检测。主角碰撞到颜色块然后触发一些事件：比如加分或者游戏结束。

在creator里有种组件叫碰撞组件（collider），切换到编辑器，双击打开fire预制，在右边的属性栏点击“添加组件”选择“添加碰撞组件”，这里笔者选择的碰撞组件是boxColloder：

同理操作ice预制。

接下来切换回场景，选中player节点同样在右边的属性栏点击“添加组件”选择“添加碰撞组件”，这里笔者选择的碰撞组件是polygonColloder（多边形碰撞组件，因为玩家不是刚刚好四四方方的盒子，如果是，那就直接boxColloder）：

看到下方的points10了吧？这表示此多边形有10个顶点，勾选Editing可以看到玩家周围会画出目前的“多边形碰撞盒”，比如我的：

这样玩家的碰撞检测就算比较精细了，之后：

设置完之后，点击保存，回到场景，选中player节点将default分组变更为player分组：

分别切换到ice和fire预制，将default分组变更为iceOrfire分组：

在一个你认为能首先执行的地方（通常是某个脚本的onload合适），写上这行cc.director.getCollisionManager().enabled=true。至此在游戏中主角和颜色块已经会产生碰撞了，但我们需要知道碰撞的那一刻，来执行我们需要的操作，当设置好以上的这些步骤后，选择ice.js脚本，在其中增加一个函数onCollisionEnter，这是碰撞的回调函数：

onCollisionEnter:function(other,self)
    {
        console.log("碰撞回调")
        if(null!=this.m_player&&!this.m_game.m_bGameOver)
        {
            if(this.type!=this.m_player.getComponent("player").currState)
            {
                this.m_game.gameOver()
            }
            else
            {
                this.m_player.getComponent("player").addGrade()
             this.m_game.jsOperator.setPower(this.m_game.jsOperator.getPower()+this.m_game.jsOperator.m_addPower)
                this.node.stopAllActions()
                this.node.removeFromParent()
            }
        }
    },

看到了3个陌生的函数addGrade、setPower、getPower、gameOver它们很简单。在player.js中增加累计分数的变量和显示分数的label：

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
         }
    },
    //此处省略了很多代码
}

还有addGrade函数：

    addGrade:function()
    {
        this.grade++
        this.gradeLabel.string="得分："+this.grade
    },

记得在编辑器里把节点挂好：

setPower和getPower是用来设置和获取能量的，在operater.js脚本中增加函数：

 setPower:function(power)
    {
        if(this.m_power>=this.m_powerBar.totalLength)
        {
            return
        }
        else if(power>=this.m_powerBar.totalLength)
        {
            this.m_power=this.m_powerBar.totalLength
        }
        else
        {
            this.m_power=power
        }
        this.m_powerBar.progress=this.m_power/this.m_powerBar.totalLength
    },

    getPower:function()
    {
        return this.m_power
    },

不要忘记添加声明：

cc.Class({
    extends: cc.Component,

    properties: {
        m_player:{      
            default:null,
            type:cc.Node          //玩家
        },
        m_power:0,                                      //当前能量值
        m_changeStateNeedPower:0,                       //切换一次状态所需能量值
        m_addPower:0,                                   //得分一次获得的能量值
        m_powerBar:{                                    //能量进度条
            default:null,
            type:cc.ProgressBar 
        },
        //此处省略了很多代码
}

然后把进度条控件挂到脚本上：

最后来看看gameOver函数，在game.js脚本中增加：

gameOver:function()
    {
        let arr=this.node.children
        for(let i=0;i<arr.length;i++)
        {
            arr[i].stopAllActions()
        }
        this.m_player.getComponent("player").stopRun()    //停止主角的帧动画
        this.m_label.node.active=true                     //一开始这个label被笔者隐藏
        this.m_label.string="游戏结束，得分："+this.m_player.getComponent("player").grade
        this.unschedule(this.createIceOrFire)             //结束定时器
        this.m_bGameOver=true
        this.m_againBtn.active=true                        //显示再来一局按钮
    },

在player.js脚本中，增加stopRun函数：

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

再来一局按钮的回调函数是cc.director.loadScene("game")，就是把游戏场景重新加载，读者可以自己创建这按钮，笔者一开始隐藏了它。

现在运行，不出意外主角每碰到一个同颜色的颜色块就会加分，反之游戏结束。