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