原生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不熟练,切了很长时间。


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

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



标签: ,

      • 我间间断断自学了1年的javascript,可还是不能用于工作。 我在公司主要做div+css这一块,比较熟练,也是出来自学的,大学都白学了。楼主能写一篇关于自学javascript的历程出来么?

        • “自学javascript的历程”,我还没有资格写这个。其实javascript入门不难,比较难的是精通,基础的教程看w3school就好了,然后学学jquery,基本的操作都熟练之后,可以看看《悟透javascript》,看完后会有比较大的提升。“在工作中学习”是最有效率的,你工作不写js,所以想学好,必须多动手练习。js的优秀控件非常多,加上新兴的Node.js,我也在学习中,还是只菜鸟…

  1. 把楼主的程序改了下,pillarWrapper去掉了,去掉柱子数的限制,只按需用两个柱子,左出右进。还有h = Math.abs(Math.sin(n * Math.random()))这个感觉没用啊,Math.random()本身是随机值,乘以n再sin还是随机值啊,不能控制是正弦曲线吧

    • 1、”只按需用两个柱子,左出右进“:需要每次计算柱子缺口的位置,个人认为不如初始化的时候一次性完成。
      2、我数学忘光了,我的想法是,柱子缺口大体上是正弦波的形式,这样保证不会出现大的起伏(否则太难),加上随机值,这样生成的又不是标准的正弦曲线。按照我一次生成的做法,不加随机值,柱子会有规律的循环呈现…

  2. 原来只是改过js bug, 不过一直没系统弄过,一知半解,现在算是更近一步, 好运楼主

  3. 感觉比flappy bird简单,搞的不错,顶一个。。。。这网站弄的真心不错,啥时候我也能弄一个

  4. 大神你好,我在我的网站里引用了你的游戏(注明作者了),然后我一直想把flappy pig代码改编成支持触屏的,加了window.addEventListener(‘touchmove’, 就是没有反应,我自己写过一个支持触屏的坦克大战游戏http://www.cuilaixi.cn/weixin/tank/,就是加的addEventListener成功了,这个要怎么修改才能触屏支持啊?

  5. 楼主,小白想问问函数都在jq里吗?看起来好复杂的样子、。。。

无觅相关文章插件,快速提升流量