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

2014-03-27 · 13 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 不熟练,切了很长时间。

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

GitHub: https://github.com/keenwon/flappy-pig