【 动作游戏 Flappy 】原生 JavaScript 做小游戏
【 动作游戏 Flappy 】原生 JavaScript 做小游戏
Flappy Pig，是Pig，使用原生javascript写的网页版“Flappy Bird”。
整个程序，主要分几个部分：全局设置和工具函数，pig类（控制猪的跳跃，掉落等），柱子类（渲染柱子，控制柱子移动），位置判断（判断pig有没有撞到柱子上），controller（控制器，初始化各个类，全局设置，计时器的开始和结束，UI控制等），主函数（程序起点），接下来说下程序的几个难点：
1、跳动的猪
这里用到高中物理的“竖直上抛运动”，公式比较简单：S=V0t+½gt²。设定一个初速度，它决定了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不熟练，切了很长时间。上面说了这么多，都是设计思路。如果你有兴趣看源码的话，也请一定做好心理准备，因为我写着写着自己也晕了。如果你对代码有什么意见，或者有更好的思路，欢迎留言交流。
• 全部代码：
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 || {});;