纯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程序设计有所帮助。