原生javascript写的小游戏《Flappy Pig》
2014-03-23 · 771 chars · 4 min read
Flappy Pig，是 Pig，使用原生 javascript 写的网页版“Flappy Bird”。我也奇了个怪为什么搞这个东西出来，而且还花了一天宝贵的周末，但是既然写出来，就拿出来和大家分享一下，点击在线试玩（没有做兼容性测试，所以请用现代浏览器）。
整个程序，主要分几个部分：全局设置和工具函数，pig 类（控制猪的跳跃，掉落等），柱子类（渲染柱子，控制柱子移动），位置判断（判断 pig 有没有撞到柱子上），controller（控制器，初始化各个类，全局设置，计时器的开始和结束，UI 控制等），主函数（程序起点），接下来说下程序的几个难点：
跳动的猪#
这里用到高中物理的“竖直上抛运动”，公式比较简单：
设定一个初速度，它决定了 pig 的“弹跳力”，另外，网页和现实世界是不一样的，g（重力加 速度）的值要自己调整到合适，t 就是计时器的时间，每次弹跳，t 重置为 0，之后 t 随着计时器setinterval不断变化，得到 s 就是 pig 跳动的高度。这样就产生一只跳动的猪。
随机产生的柱子#
玩过“Flappy Bird”的朋友都知道，里面柱子是“起起伏伏”的，但是不会连续的一高一低（这样难度太大），总的来说就是一条波浪线，但它不是平整的波浪线。所以这里又用到了一个简单的数学公式，就是“正弦定理”，公式h = Math.abs(Math.sin(n * Math.random())) * 修正值，其中Math.abs是保证得到是正直，修正值用来把h放大到合适的比例。这样就产生一个高度波浪形变化的柱子，配合上一定间隔的另一半柱子，整个障碍物就渲染完了。
找到 pig 附近的柱子#
这一步我纠结了好久，没办法，数学和物理都忘光了，想着想着大脑内存就溢出了，……，大家可以自己动手做一做，其实就也就是加减乘除。另外，得到当前第几根柱子，也可以算出分数。
判断有没有撞到#
在上一步的h是需要记录下来的，因为上下的空隙高度是固定值，所以可以得到空隙上端和下端的位置（Y1 和 Y2），柱子移动的时候，可以知道柱子离 pig 的距离，柱子宽度是一定的，也可以知道 pig 什么时候离开柱子。
UI#
ps 不熟练，切了很长 时间。
上面说了这么多，都是设计思路。如果你有兴趣看源码的话，也请一定做好心理准备，因为我写着写着自己也晕了。如果你对代码有什么意见，或者有更好的思路，欢迎留言交流。
