原生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
标签:JavaScript , 游戏
为什么用pig,不用别的小动物呢?
my girlfriend is "pig"
and this is for her
真好!
牛牛牛,我不过是一个周末考二级web的孩纸
my girlfriend is "pig" and this is for her 好感动~
O(∩_∩)O~
我间间断断自学了1年的javascript,可还是不能用于工作。 我在公司主要做div+css这一块,比较熟练,也是出来自学的,大学都白学了。楼主能写一篇关于自学javascript的历程出来么?
“自学javascript的历程”,我还没有资格写这个。其实javascript入门不难,比较难的是精通,基础的教程看w3school就好了,然后学学jquery,基本的操作都熟练之后,可以看看《悟透javascript》,看完后会有比较大的提升。“在工作中学习”是最有效率的,你工作不写js,所以想学好,必须多动手练习。js的优秀控件非常多,加上新兴的Node.js,我也在学习中,还是只菜鸟…
my girlfriend is "pig" and this is for her 好感动~
O(∩_∩)O~
把楼主的程序改了下,pillarWrapper去掉了,去掉柱子数的限制,只按需用两个柱子,左出右进。还有h = Math.abs(Math.sin(n * Math.random()))这个感觉没用啊,Math.random()本身是随机值,乘以n再sin还是随机值啊,不能控制是正弦曲线吧
1、”只按需用两个柱子,左出右进“:需要每次计算柱子缺口的位置,个人认为不如初始化的时候一次性完成。
2、我数学忘光了,我的想法是,柱子缺口大体上是正弦波的形式,这样保证不会出现大的起伏(否则太难),加上随机值,这样生成的又不是标准的正弦曲线。按照我一次生成的做法,不加随机值,柱子会有规律的循环呈现…
原来只是改过js bug, 不过一直没系统弄过,一知半解,现在算是更近一步, 好运楼主
楼主挺厉害的,受教了。
感觉比flappy bird简单,搞的不错,顶一个。。。。这网站弄的真心不错,啥时候我也能弄一个
今天过来吐槽下,终于过20了,是不是博主难度降低了
保证没有改过
卧槽,30了
大神你好,我在我的网站里引用了你的游戏(注明作者了),然后我一直想把flappy pig代码改编成支持触屏的,加了window.addEventListener(‘touchmove’, 就是没有反应,我自己写过一个支持触屏的坦克大战游戏http://www.cuilaixi.cn/weixin/tank/,就是加的addEventListener成功了,这个要怎么修改才能触屏支持啊?
没研究过touchmove,你可以试试改一下controller.js的addKeyListener方法,这个方式是监听键盘事件的。可以直接看github上的,https://github.com/keenwon/flappy-pig/blob/master/src/js/controller.js
楼主,小白想问问函数都在jq里吗?看起来好复杂的样子、。。。
https://github.com/keenwon/flappy-pig 在src/js文件夹下面