純javascript實(shí)現(xiàn)的小游戲《Flappy Pig》實(shí)例
更新時(shí)間：2015年07月27日 12:26:18 作者：semanwmj
這篇文章主要介紹了純javascript實(shí)現(xiàn)的小游戲《Flappy Pig》,較為詳細(xì)的分析了javascript實(shí)現(xiàn)小游戲《Flappy Pig》的相關(guān)技巧,涉及javascript操作頁面元素移動(dòng)、碰撞、事件監(jiān)聽與觸發(fā)的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了純javascript實(shí)現(xiàn)的小游戲《Flappy Pig》。分享給大家供大家參考。具體如下：
Flappy Pig，是Pig，使用原生javascript寫的網(wǎng)頁版“Flappy Bird”。我也奇了個(gè)怪為什么搞這個(gè)東西出來，而且還花了一天寶貴的周末，但是既然寫出來，就拿出來和大家分享一下。
option.js如下：
/**
* 原生javascript實(shí)現(xiàn)的《Flappy Pig》v0.1.0
* =======================================
* @author keenwon
* Full source at http://keenwon.com
*/
var flappy = (function (self) {
'use strict';
//設(shè)置
self.option = {
//重力加速度，屏幕像素和實(shí)際物理上的米有差別，所以存在換算
g: 400,
//跳躍的初速度，控制豬的彈跳力
v0: 400,
//柱子移動(dòng)速度
vp: 2.5,
//頻率，控制動(dòng)畫幀數(shù)，默認(rèn)20ms
frequency: 20,
//關(guān)卡數(shù)
levels: 100,
//開頭的空白距離
safeLift: 500,
//地板高度（和圖片有關(guān)）
floorHeight: 64,
//豬的寬度
pigWidth: 33,
//豬的高度
pigHeight: 30,
//豬當(dāng)前高度
pigY: 300,
//豬距離左邊的距離,
pigLeft: 80,
//柱子Html
pillarHtml: '<div class="top"></div><div class="bottom"></div>',
//柱子寬度
pillarWidth: 45,
//柱子上下間隔高度
pillarGapY: 108,
//柱子左右間隔寬度
pillarGapX: 250,
//上柱子的基礎(chǔ)定位值（就是top值，和css寫法有關(guān)）
pillarTop: -550,
//下柱子的基礎(chǔ)定位值
pillarBottom: -500
};
return self;
})(flappy || {})
util.js如下：
/**
* 原生javascript實(shí)現(xiàn)的《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實(shí)現(xiàn)的《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, //豬當(dāng)前高度（底邊）
init: function (overCallback, controller) {
var t = this;
t.s = 0, //位移
t.time = 0, //時(shí)間
t.$pig = $('pig');
t.$pig.style.left = option.pigLeft + 'px';
t._controller = controller;
t._addListener(overCallback);
},
//添加監(jiān)聽
_addListener: function (overCallback) {
this._overCallback = overCallback;
},
//啟動(dòng)
start: function () {
var t = this,
interval = option.frequency / 1000;
t.s = option.v0 * t.time - t.time * t.time * option.g * 2; //豎直上拋運(yùn)動(dòng)公式
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;
},
//撞到地面時(shí)觸發(fā)
_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實(shí)現(xiàn)的《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, //當(dāng)前柱子id
init: function () {
var t = this;
//緩存上下柱子位置的換算因子
t._factor = option.pillarBottom - option.pillarGapY + 450;
//s表示一個(gè)位置，到達(dá)這個(gè)位置的柱子就是“當(dāng)前的柱子”，就算是靠近豬了，開始計(jì)算豬有沒有撞到這根柱子，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);
},
//計(jì)算柱子位置
_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
}
},
//移動(dòng)柱子
move: function () {
var t = this;
t.dom.style.left = -t.left + 'px';
t._find(t.left);
t.left += option.vp;
},
//找到當(dāng)前的柱子
_find: function (l) {
var t = this,
x = (t._s + l - option.safeLift) / option.pillarGapX,
intX = parseInt(x); //intX是當(dāng)前柱子
if (x > 0 && t.currentId != intX && Math.abs(x - intX) < 0.1) {
t.currentId = intX;
}
}
};
return self;
})(flappy || {})
position.js如下：
/**
* 原生javascript實(shí)現(xiàn)的《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);
},
//添加監(jiān)聽
_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();
}
}
},
//撞到柱子時(shí)觸發(fā)
_dead: function () {
this._overCallback.call(this._controller);
},
};
return self;
})(flappy || {})
controller.js如下：
/**
* 原生javascript實(shí)現(xiàn)的《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實(shí)現(xiàn)的《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程序設(shè)計(jì)有所幫助。
相關(guān)文章
今天小編就為大家分享一篇關(guān)于Layui Table隱藏列問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
對動(dòng)態(tài)加載腳本，需要重點(diǎn)關(guān)注的一個(gè)問題是，所動(dòng)態(tài)加載的JS腳本的接口依賴問題。2011-01-01
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)滑動(dòng)條案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
在日常工作中，文件上傳是一個(gè)很常見的功能。在某些情況下，我們希望能限制文件上傳的類型，比如限制只能上傳 PNG 格式的圖片。本文就將針對這個(gè)問題，來講解如何檢測文件的類型2021-05-05
Js和JQuery獲取鼠標(biāo)指針坐標(biāo)的實(shí)現(xiàn)代碼分享
這篇文章主要介紹了Js和JQuery獲取鼠標(biāo)指針坐標(biāo)的實(shí)現(xiàn)代碼分享,本文直接給出實(shí)現(xiàn)的代碼,需要的朋友可以參考下2015-05-05
在TypeScript 中,枚舉或枚舉類型是具有一組常量值的常量長度的數(shù)據(jù)結(jié)構(gòu),本文主要介紹了TypeScript中Enum類型的具體使用,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
細(xì)述Javascript的加法運(yùn)算符的具體使用
這篇文章主要介紹了細(xì)述Javascript的加法運(yùn)算符的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了一些關(guān)于類型和對象的例子，大家看完例子后可能更容易理解類型和對象之間的聯(lián)系2013-11-11
javascript中函數(shù)的特殊性與普通，對待函數(shù)可以像對待普通變量一樣2008-05-05
這篇文章主要介紹了javascript中類的定義方式,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript中類的四種定義方式,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12