原生javascript写的小游戏《Flappy Pig》

Flappy Pig，是Pig，使用原生javascript写的网页版“Flappy Bird”。我也奇了个怪为什么搞这个东西出来，而且还花了一天宝贵的周末，但是既然写出来，就拿出来和大家分享一下，点击在线试玩（没有做兼容性测试，所以请用现代浏览器）。

整个程序，主要分几个部分：全局设置和工具函数，pig类（控制猪的跳跃，掉落等），柱子类（渲染柱子，控制柱子移动），位置判断（判断pig有没有撞到柱子上），controller（控制器，初始化各个类，全局设置，计时器的开始和结束，UI控制等），主函数（程序起点），接下来说下程序的几个难点：

1、跳动的猪

这里用到高中物理的“竖直上抛运动”，公式比较简单：

设定一个初速度，它决定了pig的“弹跳力”，另外，网页和现实世界是不一样的，g（重力加速度）的值要自己调整到合适，t就是计时器的时间，每次弹跳，t重置为0，之后t随着计时器setinterval不断变化，得到s就是pig跳动的高度。这样就产生一只跳动的猪。

2、随机产生的柱子

玩过“Flappy Bird”的朋友都知道，里面柱子是“起起伏伏”的，但是不会连续的一高一低（这样难度太大），总的来说就是一条波浪线，但它不是平整的波浪线。所以这里又用到了一个简单的数学公式，就是“正弦定理”，公式h = Math.abs(Math.sin(n * Math.random())) * 修正值，其中Math.abs是保证得到是正直，修正值用来把h放大到合适的比例。这样就产生一个高度波浪形变化的柱子，配合上一定间隔的另一半柱子，整个障碍物就渲染完了。

3、找到pig附近的柱子

这一步我纠结了好久，没办法，数学和物理都忘光了，想着想着大脑内存就溢出了，……，大家可以自己动手做一做，其实就也就是加减乘除。另外，得到当前第几根柱子，也可以算出分数。

4、判断有没有撞到

在上一步的h是需要记录下来的，因为上下的空隙高度是固定值，所以可以得到空隙上端和下端的位置（Y1和Y2），柱子移动的时候，可以知道柱子离pig的距离，柱子宽度是一定的，也可以知道pig什么时候离开柱子。

5、UI

ps不熟练，切了很长时间。

上面说了这么多，都是设计思路。如果你有兴趣看源码的话，也请一定做好心理准备，因为我写着写着自己也晕了。如果你对代码有什么意见，或者有更好的思路，欢迎留言交流。

KeenWon

原文链接：原生javascript写的小游戏《Flappy Pig》

@KeenWon 转载请保留原文链接