一个简简单单的切换场景的小游戏，怎么能满足得了我呢，所以在看了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
网友评论