cocos creator实例--FlappyBird游戏的分析

玩法介绍

身为一个只会撸码的程序猿，每天写bug，改bug，成了一个循环。写文章这种事，好像离我很遥远。最近一段时间关注了很多技术号，在拜读各位大神的文章时，受到了不少启发。所以也就想着分享一些自己做的东西。

说干就干，趁着这个周末不加班，写了个小游戏，分享给大家。本来准备了一大段FlappyBird的介绍，但想想又删掉了，这么经典的游戏，直接开撸就好了。

CocosCreator支持JavaScript和TypeScript两种脚本语言开发。

由于之前是做cocos2dx C++开发的，所以比较倾向于使用TypeScript这种强类型语言开发。TypeScript相较于JavaScript的优势大家可以网上自己了解一下，做到心里有数。

cocos2dx社区里有个系列博客完整地复制原版flappybird的所有特性，不过那个代码写得比较复杂，新手学习起来有点捉摸不透，这里我写了个简单的版本。演示如下：

游戏预览

功能模块

模块说明

小鸟

小鸟由三张静态图组成，运行时不断的切换显示三张图片，达到小鸟飞翔的效果。

在小鸟节点上添加一个静态刚体组件，目的是在刚进入游戏时小鸟处于静止状态，不会下落。当开始游戏时，会把刚体组件设置为动态，此时小鸟就会受到重力的作用不断的下落。

代码示例

点击屏幕会时，会给小鸟一个向上的冲力，小鸟受到冲力的作用就会向上移动一段距离，不断点击屏幕，不断的给小鸟添加冲力，小鸟就会越飞越高啦。

代码示例

地面

地面节点由两张草地图片拼接而成，游戏开始运行时，控制两张图片不断向左移动，当一张图移出屏幕后，就把坐标重置另一张图后面，达到地面不断滚动的效果。

在两张草地图片上分别挂一个静态刚体组件，目的是使草地不受重力影响，同时小鸟和草地碰撞后会触发碰撞检测回调，此时就会判定为游戏结束。

地面移动代码示例

管道

管道节点由两组组成，每组有上下两根管道，中间留有200像素的空隙。游戏开始时，两组管道不断向左移动，造成小鸟向前飞的错觉。当一组管道移出屏幕后，把坐标重置到另一组管道的后面，达到不断滚动的效果。

在每个管道节点上分别挂一个静态刚体组件，使管道不受重力影响，同时小鸟和管道碰撞后会触发碰撞检测回调，此时就会判定为游戏结束。

管道移动代码示例

结束界面

结束界面主要显示了两个内容，一个是本场获得分数，一个是历史最高分数，还有一个重新开始的按钮，当点这个按钮的时候，把管道，小鸟，地面都重置为初始状态。