自从微信的跳一跳出来后，很多公司都着手小游戏的开发，对于小游戏来说最重要的就是不用安装，微信传播广泛，容易上手利用用户碎片时间。
然后我也开始学习小游戏的开发，用1、2天时间看完了技术胖的教程后，就撸起袖子开始模仿一个小游戏来入手熟悉了。
这里有相关的学习资料，供大家参考http://forum.cocos.com/t/creator-3-31/39917
刚好在朋友的分享下玩了JD最近开发的小游戏——一起爬梯，觉得这游戏适合练手，所以就从这款游戏开始了。
图片素材可以在这里找到爱给网。
PS：看见蓝色的字就点一点吧，没准藏了小惊喜。
一、准备工作
准备的素材
因为只是一个demo并且没有美术设计，就在爱给网通过搜索相应关键词来找到所需要的素材。其实也比较简单，找一张竖的场景背景图，然后相应的楼梯方块和一张人物素材就可以了。
二、创建项目
把素材都找好后就可以开始创建项目了，我把项目命名为Climb-Stairs，然后把项目的场景、脚本和素材都创建好，分好文件类目，大概就是下面这样了。
项目整体架构
三、开始编写核心代码
在开始编写代码前，首先需要分析游戏的玩法，和实现的思路。一起爬梯，就是角色在不停的往上爬，需要点击屏幕左右来控制角色的方向，如果方向错了，或者时间到了，角色将会掉落万丈深渊，游戏结束。
通过游戏我们能发现，其实游戏中的人物一直都是在屏幕的固定位置，只是在动作上有左右的变向。而正真在移动的只有每一块台阶，点击屏幕左边台阶就从左往角色中间移动，点击屏幕右边台阶就从右往角色中间移动。这就让用户有错觉角色是一直在往上爬的效果了。
那我们开始先创建一个GameScene的场景。
GameScene场景
把背景图和角色都拖进里面，然后再加入一个Label来显示分数。
之后再创建一个stair的Prefab，因为是重复的对象所以创建Prefab方便使用。
stair的Prefab
同时我调整了stair的Size，因为这是别人做好的素材，在大小上可能有点大了，所以我们可以根据自己的需要来调整大小。
因为如果每个台阶单独在场景中添加的话，那每一步都需要对已经生成的stair节点进行位置的移动，这无疑是不科学的，然后我想到的方法就是添加一个空节点，相当台阶的容器view，这样只要把生成的stair都加在里面就可以了。这样点击时候的台阶移动，就是容器view自己在移动，达到了整体移动的效果。
台阶生成
台阶生成的位置
这里我们通过随机数来生成台阶的位置，是左边还是右边，因为游戏刚开始时第一块是在角色的正下方，所以设置好第一块的位置。之后根据随机数小于等于0.5的在左边，大于0.5的在右边，然后每生成一块就记录上一块的位置，这样就可以不停的往上增加了。
生成台阶后，我们就需要在屏幕上添加点击事件的方法。让角色和台阶都动起来。
点击事件添加
因为我们不能只让台阶在移动而角色一动不动，这样对于一款游戏来说太过死板了，所以我们给角色添加了一个向上跳跃的动作，之后再回到原来的位置。而之前也说了台阶的移动实际上是该节点容器的移动，通过计算得出了需要移动的距离，这样角色和台阶在点击时一起运动就可以了。
四、添加碰撞检测
一直没想通如果用户点击方向错误，角色踩空掉落万丈深渊的判断方法，之前看过可以通过两个节点的交集来判断，但这样会和其他的台阶也有交集的可能。之后想到了通过碰撞的方法来实现角色是否触碰到了台阶，解决了角色踩到台阶还是踩空的Over条件。如果大家还有其他更好的判断方法，可以在下方评论。
第一步为角色添加不规则碰撞
player添加不规则碰撞
点击player然后添加组件—添加碰撞组件—Polygon Collider，然后点击Editing，这样就可以通过手动调节碰撞的位置了。我们知道角色与台阶的碰撞主要是角色的脚和台阶的正中位置，这样就可以避免了角色与其他台阶的误触发。
stair的Prefab添加不规则碰撞
同样的，我们给台阶也加入不规则碰撞，因为碰撞是需要两个物体触发的，所以两个节点都需要添加。而如果在一些场景需要不同的节点产生不同碰撞效果的，我们可以编辑对应的组别。
分组管理
分组管理可以清晰看到，哪组对应的组别才会发生碰撞。
在节点上添加了碰撞区域后，之后就可以在代码上添加碰撞后所触发的事件了。
碰撞方法
这三个是官方的碰撞方法，只要开启了碰撞监测添加以上方法就会触发。
五、添加游戏结束条件
之前也说过了，现在游戏里面判断角色踩空的判断条件不是很好，所以这里只说出了游戏现在的做法。
点击方法
检测状态判断是否触碰到
其实现在主要通过点击后启动一个定时器去检测角色是否与台阶触碰，通过onCollisionEnter方法可以知道如果碰撞了就是没有问题isTouched为true，如果方向错了那在指定时间内就会是false，这样就可以认定为踩空，会掉落万丈深渊而游戏结束。
这里的判断条件是根据定时器来触发，所以如果点击比较快的时候，出现了时间差那isTouched有可能是false而认定为失败。还有就是在踩空的时候会出现一小段停滞才会触发掉落的动画，因为定时器调用的方法时间还没到，所以整体不够顺畅。望大家有更好的方法分享出来。
六、添加分数更新
在Game.js中已经添加了scoreLabel来显示分数，那我们要在产生碰撞的方法来增加分数，我们都知道了碰撞成功就代表方向对了没有踩空。所以在这个方法里面添加相应的方法就可以了。
增加分数
把分数添加到缓存里面，然后在当前的Canvas下找到scoreLabel的节点，定义为cc.Label类，在使用前判断一下是否为nil来避免报错。就这样整个游戏就基本完成了。
七、游戏结束重新游戏
添加一个显示最终得分的和重新游戏按钮，点击按钮后将重新加载游戏场景。
Over.js
八、游戏效果和展望
因篇幅有限，有部分细节没有写出来，大家可以下载源码查看，已添加好相关注释。
游戏源码请戳这里，欢迎大家来star，谢谢！
游戏算是基本完成了但还没有达到和一起爬梯的效果，后期可以加入带有炸弹、花的阻碍物。还有还没加入时间倒数，踩到台阶后台阶会逐渐加速下降，让用户不点击跳跃的话也会结束游戏。还需要加入不同的声效来让游戏体验更好，这些功能将会在之后慢慢完善。
入坑cocos creator还不是很久，欢迎大家来吐槽。
最后广告时间五年日记本——一天一问感受变化的自己。
网友评论