纯javascript实现的小游戏《Flappy Pig》实例
更新时间：2015年07月27日 12:26:18 作者：semanwmj
这篇文章主要介绍了纯javascript实现的小游戏《Flappy Pig》,较为详细的分析了javascript实现小游戏《Flappy Pig》的相关技巧,涉及javascript操作页面元素移动、碰撞、事件监听与触发的相关技巧,需要的朋友可以参考下
本文实例讲述了纯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程序设计有所帮助。
相关文章
这篇文章主要教大家学习使用Bootstrap页面排版样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
js验证模型自我实现的具体方法，需要的朋友可以参考一下2013-06-06
今天小编就为大家分享一篇基于layui数据表格以及传数据的方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
浅析JavaScript中的平稳退化（graceful degradation）
所谓平稳退化，就是指可以让访问者在浏览器不支持javascript或者禁用了JavaScript的时候依旧可以顺利的浏览你的网页，下文给大家简单介绍了js中的平稳退化，感兴趣的朋友一起看看吧2017-07-07
本篇文章主要是对js菜单点击显示或隐藏效果的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要介绍了JS+CSS3实现的类似于苹果iwatch计时器特效，很实用的代码，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
这篇文章主要为大家详细介绍了js实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
微信小程序setInterval定时函数新手使用的超详细教程
平时开发中为实现倒计时效果可以使用setInterval即可,下面这篇文章主要给大家介绍了关于微信小程序setInterval定时函数新手使用的超详细教程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
下面小编就为大家带来一篇JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了Vue2、Vue3响应式源码的原理，内容很详细，对大家的学习或者工作具有一定的参考学习价值，有需要的朋友可以借鉴参考下，希望能够有所帮助2023-01-01
最新评论