纯javascript实现的小游戏《Flappy Pig》实例

本文实例讲述了纯javascript实现的小游戏《Flappy Pig》。分享给大家供大家参考。具体如下：

Flappy Pig，是Pig，使用原生javascript写的网页版“Flappy Bird”。我也奇了个怪为什么搞这个东西出来，而且还花了一天宝贵的周末，但是既然写出来，就拿出来和大家分享一下。

option.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: '<div class="top"></div><div class="bottom"></div>',

//柱子宽度

pillarWidth: 45,

//柱子上下间隔高度

pillarGapY: 108,

//柱子左右间隔宽度

pillarGapX: 250,

//上柱子的基础定位值（就是top值，和css写法有关）

pillarTop: -550,

//下柱子的基础定位值

pillarBottom: -500

};

return self;

})(flappy || {})

util.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如下：

/**

* 原生javascript实现的《Flappy Pig》v0.1.0

* =======================================

* @author keenwon

* Full source at http://keenwon.com

*/

var flappy = (function (self) {

'use strict';

var option = self.option,

$ = self.util.$;

//猪

self.pig = {

Y: 0, //猪当前高度（底边）

init: function (overCallback, controller) {

var t = this;

t.s = 0, //位移

t.time = 0, //时间

t.$pig = $('pig');

t.$pig.style.left = option.pigLeft + 'px';

t._controller = controller;

t._addListener(overCallback);

},

//添加监听

_addListener: function (overCallback) {

this._overCallback = overCallback;

},

//启动

start: function () {

var t = this,

interval = option.frequency / 1000;

t.s = option.v0 * t.time - t.time * t.time * option.g * 2; //竖直上抛运动公式

t.Y = option.pigY + t.s;

if (t.Y >= 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如下：

/**

* 原生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如下：

/**

* 原生javascript实现的《Flappy Pig》v0.1.0

* =======================================

* @author keenwon

* Full source at http://keenwon.com

*/

var flappy = (function (self) {

'use strict';

var pig = self.pig,

pillar = self.pillar,

option = self.option,

$ = self.util.$;

//位置判断

self.position = {

init: function (overCallback, controller) {

var t = this;

t.pillarWrapper = $('pillarWrapper');

t.pigX1 = option.pigLeft,

t.pigX2 = option.pigLeft + option.pigWidth, //猪的左右位置，固定的

t._controller = controller;

t._addListener(overCallback);

},

//添加监听

_addListener: function (overCallback) {

this._overCallback = overCallback;

},

judge: function () {

var t = this,

currentPillar = $('pillar-' + pillar.currentId);

if (pillar.currentId == -1) {

return;

}

t.pigY2 = 600 - pig.Y;

t.pigY1 = t.pigY2 - option.pigHeight; //猪的上下位置

t.pY1 = currentPillar.getAttribute('top');

t.pY2 = currentPillar.getAttribute('bottom');

t.pX1 = parseInt(currentPillar.style.left) + parseInt(t.pillarWrapper.style.left);

t.pX2 = t.pX1 + option.pillarWidth; //柱子的上下左右位置

console.log(t.pillarWrapper.style.left);

if (option.pigLeft + option.pigWidth >= 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如下：

/**

* 原生javascript实现的《Flappy Pig》v0.1.0

* =======================================

* @author keenwon

* Full source at http://keenwon.com

*/

var flappy = (function (self) {

'use strict';

var pig = self.pig,

pillar = self.pillar,

pos = self.position,

util = self.util,

$ = 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如下：

/**

* 原生javascript实现的《Flappy Pig》v0.1.0

* =======================================

* @author keenwon

* Full source at http://keenwon.com

*/

var flappy = (function (self) {

'use strict';

var controller = self.controller,

option = self.option,

pig = self.pig,

pillar = self.pillar,

pos = self.position,

util = self.util,

$ = self.util.$;

//主程序

self.game = {

init: function () {

var t = this;

t._isStart = false;

t._isEnd = 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) {

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();

}

},

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);

t._isEnd = true;

$('end').style.display = 'block';

},

_createTimer: function (fn) {

var t = this;

t._timer = setInterval(fn, option.frequency);

}

};

flappy.init = function () {

self.game.init();

}

return self;

})(flappy || {})

希望本文所述对大家的javascript程序设计有所帮助。