本文实例讲述了纯javascript实现的小游戏《Flappy Pig》。分享给大家供大家参考。具体如下：
Flappy Pig，是Pig，使用原生javascript写的网页版“Flappy Bird”。我也奇了个怪为什么搞这个东西出来，而且还花了一天宝贵的周末，但是既然写出来，就拿出来和大家分享一下。
option.js如下：
rush:js;">
/**
* 原生javascript实现的《Flappy Pig》v0.1.0
* =======================================
* @author keenwon
* Full source at http://keenwon.com
*/
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: '
ottom">
',//柱子宽度
pillarWidth: 45,//柱子上下间隔高度
pillarGapY: 108,//柱子左右间隔宽度
pillarGapX: 250,//上柱子的基础定位值（就是top值，和css写法有关）
pillarTop: -550,//下柱子的基础定位值
pillarBottom: -500
};
return self;
})(flappy || {})
util.js如下：
rush:js;">
/**
* 原生javascript实现的《Flappy Pig》v0.1.0
* =======================================
* @author keenwon
* Full source at http://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 = new Array();
for (var i = 0,len = childs.length; i < len; i++) {
if (childs[i].nodeType == 1) {
childsArray.push(childs[i]);
}
}
return childsArray;
}
};
return self;
})(flappy || {})
pig.js如下：
= option.floorHeight) {
t.$pig.style.bottom = t.Y + 'px';
} else {
t._dead();
}
t.time += interval;
},//跳
jump: function () {
var t = this;
option.pigY = parseInt(t.$pig.style.bottom);
t.s = 0;
t.time = 0;
},//撞到地面时触发
_dead: function () {
this._overCallback.call(this._controller);
},//撞到地面的处理
fall: function () {
var t = this;
//摔到地上，修正高度
t.Y = option.floorHeight;
t.$pig.style.bottom = t.Y + 'px';
},//撞到柱子的处理
hit: function () {
var t = this;
//坠落
var timer = setInterval(function () {
t.$pig.style.bottom = t.Y + 'px';
if (t.Y <= option.floorHeight) {
clearInterval(timer);
}
t.Y -= 12;
},option.frequency);
}
};
return self;
})(flappy || {})
pillar.js如下：
rush:js;">
/**
* 原生javascript实现的《Flappy Pig》v0.1.0
* =======================================
* @author keenwon
* Full source at http://keenwon.com
*/
var flappy = (function (self) {
'use strict';
var option = self.option,util = self.util,$ = util.$;
//柱子
self.pillar = {
currentId: -1,//当前柱子id
init: function () {
var t = this;
//缓存上下柱子位置的换算因子
t._factor = option.pillarBottom - option.pillarGapY + 450;
//s表示一个位置，到达这个位置的柱子就是“当前的柱子”，就算是靠近猪了，开始计算猪有没有撞到这根柱子，10是提前量。
t._s = option.pigLeft + option.pigWidth + 10;
t._render();
},//把柱子渲染到DOM树中
_render: function () {
var t = this,initleft = option.safeLift;
t.left = 0;
t.dom = document.createElement('div');
t.dom.className = t.dom.id = 'pillarWrapper';
for (var i = 0,j = option.levels; i < j; i++) {
var el = document.createElement('div');
el.innerHTML = option.pillarHtml;
el.className = 'pillar';
el.id = 'pillar-' + i;
el.style.left = initleft + 'px';
var childs = util.getChilds(el),topEl = childs[0],bottomEl = childs[1],pos = t._random(i);
topEl.style.top = pos.top + 'px';
bottomEl.style.bottom = pos.bottom + 'px';
el.setAttribute('top',600 + pos.top);
el.setAttribute('bottom',0 - pos.bottom);
t.dom.appendChild(el);
initleft += option.pillarGapX;
}
$('screen').appendChild(t.dom);
},//计算柱子位置
_random: function (i) {
var t = this,x = Math.random(),h = Math.abs(Math.sin((i+1) * x)) * 290;
return {
top: option.pillarTop + h,bottom: t._factor - h
}
},//移动柱子
move: function () {
var t = this;
t.dom.style.left = -t.left + 'px';
t._find(t.left);
t.left += option.vp;
},//找到当前的柱子
_find: function (l) {
var t = this,x = (t._s + l - option.safeLift) / option.pillarGapX,intX = parseInt(x); //intX是当前柱子
if (x > 0 && t.currentId != intX && Math.abs(x - intX) < 0.1) {
t.currentId = intX;
}
}
};
return self;
})(flappy || {})
position.js如下：
= t.pX1 && option.pigLeft <= t.pX2) {
if (t.pigY1 < t.pY1 || t.pigY2 > t.pY2) {
t._dead();
}
}
},//撞到柱子时触发
_dead: function () {
this._overCallback.call(this._controller);
},};
return self;
})(flappy || {})
controller.js如下：
rush:js;">
/**
* 原生javascript实现的《Flappy Pig》v0.1.0
* =======================================
* @author keenwon
* Full source at http://keenwon.com
*/
var flappy = (function (self) {
'use strict';
var pig = self.pig,pos = self.position,$ = util.$,option = self.option;
//控制器
self.controller = {
init: function () {
var t = this;
t._isstart = false;
t._timer = null;
pig.init(t.fall,t);
pillar.init();
pos.init(t.hit,t);
t.addKeyListener();
},addKeyListener: function () {
var t = this;
document.onkeydown = function (e) {
var e = e || event;
var currKey = e.keyCode || e.which || e.charCode;
if (currKey == 32) {
t.jump();
util.preventDefaultEvent(e);
}
}
},jump: function () {
var t = this;
if (!t._isstart) {
$('begin').style.display = 'none';
t._createTimer(function () {
pig.start();
pillar.move();
pos.judge();
$('score').innerHTML = pillar.currentId + 1;
});
t._isstart = true;
} else {
pig.jump();
}
},hit: function () {
var t = this;
t.over();
pig.hit();
},fall: function () {
var t = this;
t.over();
pig.fall();
},over: function () {
var t = this;
clearInterval(t._timer);
$('end').style.display = 'block';
},_createTimer: function (fn) {
var t = this;
t._timer = setInterval(fn,option.frequency);
}
};
return self;
})(flappy || {})
game.js如下：
rush:js;">
/**
* 原生javascript实现的《Flappy Pig》v0.1.0
* =======================================
* @author keenwon
* Full source at http://keenwon.com
*/
var flappy = (function (self) {
'use strict';
var controller = self.controller,pig = self.pig,$ = self.util.$;
//主程序
self.game = {
init: function () {
var t = this;
t._isstart = false;
t._isEnd = false;
t._timer = null;
pig.init(t.fall,addKeyListener: function () {
var t = this;
document.onkeydown = function (e) {
var e = e || event;
var currKey = e.keyCode || e.which || e.charCode;
if (currKey == 32) {
if (!t._isEnd) {
t.jump();
} else {
window.location.reload();
}
util.preventDefaultEvent(e);
}
}
},jump: function () {
var t = this;
if (!t._isstart) {
$('start').style.display = 'none';
t._createTimer(function () {
pig.start();
pillar.move();
pos.judge();
$('score').innerHTML = pillar.currentId + 1;
});
t._isstart = true;
} else {
pig.jump();
}
},over: function () {
var t = this;
clearInterval(t._timer);
t._isEnd = true;
$('end').style.display = 'block';
},option.frequency);
}
};
flappy.init = function () {
self.game.init();
}
return self;
})(flappy || {})
希望本文所述对大家的javascript程序设计有所帮助。
