(难度:30%)flappy bird

flppy bird改编的flppy ball, 就是原作的bird改成了一个小球...

原来打算用三天的时间弄好的, 结果周六断断续续弄了一天, 就搞定了. 

运行界面如下:

(开始界面)

我玩的最高分(左上角的数字为分数)....

游戏代码

css文件

#game{width: 400px;height: 600px;margin:30px auto;/*overflow对absolute没效*//*overflow: hidden;*/background: url(./img/back.jpg) repeat-x;}#bird{position: relative;background: orange;left: 100px;/*margin-bottom没反应 */bottom:-300px;width: 20px;height: 20px;border-radius: 100%;}#sorce{position: absolute;color:white;font-size: 30px;padding: 10px;}#pillar {background: url(./img/pillar.png);width: 45px;z-index: 111;position: absolute;}#start{background: white;opacity:0.5;/*为什么要加这句才行*/margin-top:-20px;width: 400px;height: 600px;z-index:333;line-height: 100%;font-size: 32px;line-height: 600px;text-align: center;position: absolute;}#gameOver{display: none;background: black;opacity:0.5;background: white;position: absolute;width: 400px;height: 600px;margin-top: -20px;text-align: center;line-height: 600px;font-size: 32px;z-index: 333;}#wrapperL{position: absolute;width: 200px;height: 600px;z-index: 999;margin-left: -200px;margin-top: -20px;background: white;}#wrapperR{position: absolute;width: 200px;height: 600px;z-index: 999;margin-left: 400px;margin-top: -20px;background: white;}

html代码

<div id='game'><div id='sorce'>0</div><div id='bird'></div><div id='start'>PRESS SPACE TO START</div><div id='wrapperL'></div><div id='wrapperR'></div><div id='gameOver'>GAME OVER</div></div>

js代码

var sorce=document.getElementById('sorce'),bird=document.getElementById('bird'),start=document.getElementById('start'),gameOver=document.getElementById('gameOver'),pos=-300,speed=1,gap=25,jumpH=60,timer=null,_timer=null,pTimer,pspeed=1,pPos=[],pTopH=0,pBottomH=0,pTop=[],pBottom=[],pDist=100,//水管口间隙大小cur=-1,dist=200,pTot=Math.ceil(500/dist);document.onkeydown=gameStart;function gameStart(){start.style.display='none';createPillar(pTot);timer=setInterval(down,gap);document.onkeydown=up;pTimer=setInterval(function(){pillarMove()},10);}function up(){var height=0;//下落速度置0speed=0;clearInterval(_timer);//上升60px,改成动画,120ms_timer=setInterval(function(){pos+=10;if (pos>0) pos=0;bird.style.bottom=pos+"px";height+=10;// console.log(height)if (height>=jumpH){ clearInterval(_timer); //必须手工置null // _timer=null;}}, 20)}function down(){pos-=speed;speed+=0.4;bird.style.bottom=pos+"px";if (pos<=-520){over();}}//background_position:-100px -300px//背景向右移动100px//背景向下移动300pxfunction createPillar(){var top=document.createElement('div');var bottom=document.createElement('div');cur++;top.id=bottom.id='pillar';top.className='top';bottom.className='bottom';pBottomH=Math.random()*380+70;pTopH=600-pDist-pBottomH;top.style.backgroundPosition="0px -"+(600-pTopH)+"px";top.style.height=pTopH+"px";bottom.style.backgroundPosition="0px 600px";bottom.style.height=pBottomH+"px";top.style.marginTop="-20px";bottom.style.marginTop=(580-pBottomH)+"px";top.style.marginLeft=bottom.style.marginLeft='500px';pTop[cur%pTot]=top;pBottom[cur%pTot]=bottom;game.appendChild(top);game.appendChild(bottom);}function pillarMove(){for (var i=0;i<pTot;i++)if (pTop[i]){var tmp=parseInt(pTop[i].style.marginLeft);tmp-=1;pTop[i].style.marginLeft=tmp+"px";pBottom[i].style.marginLeft=tmp+"px";if (tmp<=120&&tmp>=55){if (hit(i)){over();}}else if (tmp==54){var _sorce=parseInt(sorce.innerHTML)_sorce++;console.log(tmp);sorce.innerHTML=_sorce;}}pillarRemove();pillarAdd();}function pillarRemove(){for (var i=0;i<pTot;i++)if (pTop[i]){var tmp=parseInt(pTop[i].style.marginLeft);if (tmp<-50){game.removeChild(pTop[i]);game.removeChild(pBottom[i]);pTop[i]=null;pBottom[i]=null;}}}function pillarAdd(){for (var i=0;i<pTot;i++)if (pTop[i]){var tmp=parseInt(pTop[i].style.marginLeft);if (tmp==(500-dist)){// console.log(tmp)createPillar();}}}function hit(i){var tHeight=parseInt(pTop[i].style.height);// console.log(tHeight);// console.log(-pos);if (-pos>tHeight&&-pos<tHeight+pDist-20) return false;return true;}function over(){clearInterval(timer);clearInterval(_timer);clearInterval(pTimer);gameOver.style.display='block';document.onkeydown=null;//暂停2000mssetTimeout(function(){document.onkeydown=restart;},2000);}function restart(){gameOver.style.display='none';start.style.display='block';cur=-1;for (var i=0;i<pTot;i++)if (pTop[i]){game.removeChild(pTop[i]);game.removeChild(pBottom[i]);pTop[i]=null;pBottom[i]=null;}bird.style.bottom="-300px";pos=-300;speed=1;document.onkeydown=gameStart;}

实际运行效果:点击打开链接