cocos creator 碰撞游戏

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

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

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

firstBg和它的Node属性

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

hero和它的Node属性

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

hero.js(1)

hero.js(2)

hero.js(3)

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

给主角hero添加hero.js

设置移动速度为200，完成后，你可以保存一下，然后运行看看了。

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

bg.js

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

给firstBg添加bg.js

之后可以运行看看，屏幕会随着主角移动而移动了。

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

创建怪物

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

monster.js(1)

monster.js(2)

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

给firstBg添加monster.js

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

添加碰撞组件

完成如下：

多边形碰撞组件

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

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

resultView

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

去掉勾为不可见

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

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中：

添加hit.js

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

再玩一次按钮添加脚本文件

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

进入时

碰到怪物为输

碰到箱子为赢（中间没有碰到怪物）

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

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

hero.js补充

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

同理，给monster.js添加：

monster.js补充

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

hit.js补充

然后：

hit.js补充

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

至于

文本和关闭按钮

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

---

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

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

2017-07-24