Flappy Pig,是Pig,使用原生javascript写的网页版“Flappy Bird”。
整个程序,主要分几个部分:全局设置和工具函数,pig类(控制猪的跳跃,掉落等),柱子类(渲染柱子,控制柱子移动),位置判断(判断pig有没有撞到柱子上),controller(控制器,初始化各个类,全局设置,计时器的开始和结束,UI控制等),主函数(程序起点),接下来说下程序的几个难点:
这里用到高中物理的“竖直上抛运动”,公式比较简单:S=V0t+½gt²。设定一个初速度,它决定了pig的“弹跳力”,另外,网页和现实世界是不一样的,g(重力加速度)的值要自己调整到合适,t就是计时器的时间,每次弹跳,t重置为0,之后t随着计时器setinterval不断变化,得到s就是pig跳动的高度。这样就产生一只跳动的猪。
玩过“Flappy Bird”的朋友都知道,里面柱子是“起起伏伏”的,但是不会连续的一高一低(这样难度太大),总的来说就是一条波浪线,但它不是平整的波浪线。所以这里又用到了一个简单的数学公式,就是“正弦定理”,公式h = Math.abs(Math.sin(n * Math.random())) * 修正值,其中Math.abs是保证得到是正直,修正值用来把h放大到合适的比例。这样就产生一个高度波浪形变化的柱子,配合上一定间隔的另一半柱子,整个障碍物就渲染完了。
这一步我纠结了好久,没办法,数学和物理都忘光了,想着想着大脑内存就溢出了,……,大家可以自己动手做一做,其实就也就是加减乘除。另外,得到当前第几根柱子,也可以算出分数。
在上一步的h是需要记录下来的,因为上下的空隙高度是固定值,所以可以得到空隙上端和下端的位置(Y1和Y2),柱子移动的时候,可以知道柱子离pig的距离,柱子宽度是一定的,也可以知道pig什么时候离开柱子。
ps不熟练,切了很长时间。上面说了这么多,都是设计思路。如果你有兴趣看源码的话,也请一定做好心理准备,因为我写着写着自己也晕了。如果你对代码有什么意见,或者有更好的思路,欢迎留言交流。
var flappy = (function (self) {
'use strict';
//设置
self.option = {
//重力加速度,屏幕像素和实际物理上的米有差别,所以存在换算
g: 400,
//跳跃的初速度,控制猪的弹跳力
v0: 400,
//柱子移动速度
vp: 2.5,
//频率,控制动画帧数,默认20ms
frequency: 20,
//关卡数
levels: 100,
//开头的空白距离
safeLift: 500,
//地板高度(和图片有关)
floorHeight: 64,
//猪的宽度
pigWidth: 33,
//猪的高度
pigHeight: 30,
//猪当前高度
pigY: 300,
//猪距离左边的距离,
pigLeft: 80,
//柱子Html
pillarHtml: '<div class="top"></div><div class="bottom"></div>',
//柱子宽度
pillarWidth: 45,
//柱子上下间隔高度
pillarGapY: 108,
//柱子左右间隔宽度
pillarGapX: 250,
//上柱子的基础定位值(就是top值,和css写法有关)
pillarTop: -550,
//下柱子的基础定位值
pillarBottom: -500
};
return self;
})(flappy || {});;/**
* 原生javascript实现的《Flappy Pig》v0.1.0
* =======================================
* @author keenwon
* Full source at https://keenwon.com
*/
var flappy = (function (self) {
'use strict';
//工具
self.util = {
preventDefaultEvent: function (event) {
event = window.event || event;
if (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
},
$: function (id) {
return document.getElementById(id);
},
getChilds: function (obj) {
var childs = obj.children || obj.childNodes,
childsArray = [];
for (var i = 0, len = childs.length; i < len; i++) {
if (childs[i].nodeType == 1) {
childsArray.push(childs[i]);
}
}
return childsArray;
}
};
return self;
})(flappy || {});;