cocos creator 碰撞游戏

一个简简单单的切换场景的小游戏，怎么能知足得了我呢，因此在看了cocos creator的用户手册和JavaScript的新手教程以后，盘算着作一个稍微复杂一点的小游戏，对，稍微~~javascript

ps：看见蓝色的字就点一点啊，没准藏了个惊吓。html

首先呢，依旧是建立一个空项目，这一步不会作的话请点击这里，创建好相应文件夹，须要提前准备一些图片资源，能够去网上下载，并放入你的项目中的存放图片的文件夹中。再建立一个场景，命名为first。先给first场景添加一个背景图，找一张比较大的背景图，直接拖到Canvas下，命名为firstBg，并在右侧的属性检查器中的Node栏中配置好相应的数据，使这张背景图可以在后期用代码实现横向滚动。如：java

那条红线往左就是屏幕大小，蓝线框内就是这张背景图的大小。接下来，要作一个主角，随便取一张卡通人物图，把它拖到Canvas中，命名为hero，放在在firstBg的下面，与firstBg同级。层级的规则是：同级的状况下，在层级管理器，越下面的，就在运行后的屏幕上越前面。node

接下来，给hero加点料吧。新建一个JavaScript，命名为hero，添加：git

这部分的代码是给主角hero添加了，键盘上的WSAD的监听，分别表明上下左右，若是你不能理解的话，能够看看这个例子先。accLeft，accRight，accUp，accDown，是在该方向上是否能移动。moveSpeed指的是hero的移动速度。update是一个实时监听的函数，在里面写了若是在该方向上容许移动，则实时设置this.node的坐标，这个this.node就是主角hero。另外，为了更符合背景图的实际，我给hero在纵向上移动范围作了限制。而后回到first场景，点选hero，添加刚刚写的hero.js，(添加组件/添加用户脚本组件/hero)：github

设置移动速度为200，完成后，你能够保存一下，而后运行看看了。函数

那么问题来了，主角能够经过WSAD移动，可是背景图没有动。那么，新建一个javaScript脚本文件命名为bg：测试

bg.js里的bg和hero是给外部预留的接口，如同上面的moveSpeed。我就在update这个函数下作了一些移动范围的判断，具体的数值你要根据你的背景图大小来设置。若是嫌麻烦，就把背景图大小改为和我同样就得了。而后在firstBg的属性检查器中，添加刚刚写的bg.js脚本文件，再把Canvas下的hero和firstBg拖进来：动画

以后能够运行看看，屏幕会随着主角移动而移动了。ui

不过，感受空荡荡的，是否是应该添加点怪物？将怪物的小图片拖到Canvas中，由于怪物们不能随着主角的移动而移动，因此要把怪物放到firstBg下。下图请忽略置灰的UI。

而后给这些怪物加点动画，新建脚本命名为monster：

上面的代码就预留了monster1，monster2，monster3，boss，box，的外部接口，而后给一些怪物增长了移动动画。把这个脚本应用到firstBg上，再把相应的怪物拖进来：

运行，恩，怪物在动了。然而，主角与怪物碰撞时，什么都没发生，这可不行，总得让它们产生点激情的火花吧？恩，依次给monster1，monster2，monster3，boss，box，还有hero，都添加一个碰撞组件，碰撞组件有三种，矩形，圆形，多边形，试了下，仍是多边形比较好一些：

完成以下：

设置hero和box的碰撞组件的Tag为0，其余都为1。以便于区分胜负，碰到box为胜，碰到其余怪物为负。

既然都有胜负了，那么是否是应该有个胜负的弹窗呢？随便搭一个吧，就一个背景图，一个按钮，一个文本：

这个弹窗不能一开始就能够看到吧？因此resultView的属性检查器的那个可见的勾要去掉，在代码中能够用.active = true来显示：

而后新建脚本文件，命名为hit.js：

预留了弹窗和文本的接口。cc.director.getCollisionManager().enabled = true;表示碰撞系统开启。

onCollisionEnter: function (other, self) {

    if (self.tag === 0) {

        this.view.active = true;

        this.label.string = "you win";

    } else {

        this.view.active = true;

        this.label.string = "you lose";

    }

}

是碰撞的处理函数，self是被碰到的对象，若是被碰到的东西的tag是0，那个表示碰到了箱子，就赢了；反之，就输了。

而后将这个脚本文件应用到monster1，monster2，monster3，boss，box中：

到这里其实游戏已经差很少完成了。接下来把那个再玩一次的按钮添上脚本文件，不会的话请点击这里：

接下来是实际运行的效果图：

都说问题来自测试，我发现当游戏结束时（碰撞到胜利或者碰撞到怪物失败）hero还能接受WSAD的监听，还有怪物也依旧上下作着缓慢的动做，这个应该是不符合常理的。游戏结束了，hero和怪物们都要中止动做，保持在碰撞到的那一刻。

因此，我想了很久也问了好多人，终于获得了一个比较好的办法。首先在hero.js里cc.class的外面加上：

这段代码意思是：从cocos creator里找到hero这个控件，使它上下左右都不容许移动，移除自身全部的监听，并对外提供了 removeAll这个函数。这样我在别的脚本文件里，想让hero中止移动并移除监听只须要导入hero.js，而后调用removeAll函数就能够了。

同理，给monster.js添加：

最后在hit.js中调用，先导入上两个文件：

而后：

这样，当游戏结束时，hero和怪物们都会中止移动，并且你再按WSAD也对hero无效了。

至于

随便搭一下吧，至于关闭游戏的代码是  cc.director.end();

---

好了，新一代的菜鸟“神做”就这样完成了。什么？你要代码？好吧，我刚刚学会了用Github Desktop上传项目到Github，点击这里就能下载项目了。若是你真的须要看一些游戏项目的话，请点击这儿和点击那儿。这里有许多大神写的一些游戏项目供参考，固然要看懂的话，你至少须要把cocos creator的用户手册全都看一遍，毕竟大神们是没那么多时间来写对他们来说很low而对咱们来说很高大上的项目的教程的(摊手)。

若有错误，欢迎指正。若有补充，欢迎告知。

2017-07-24