原生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



标签: ,

Comments

  1. By Lovelife

    回复

    • By KeenWon

      回复

    • By KeenWon

      回复

      • By Lovelife

        回复

  2. By WLT

    回复

  3. By 朱辉

    回复

    • By KeenWon

      回复

      • By 朱辉

        回复

        • By KeenWon

          回复

  4. By js

    回复

  5. By twifee

    回复

    • By KeenWon

      回复

  6. By twifee

    回复

  7. 回复

  8. By 辉哥

    回复

  9. By 飞天猪

    回复

  10. By 飞天猪

    回复

  11. By cuilaixi

    回复

  12. By 与撒旦似的我

    回复

辉哥进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

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