(难度: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.οnkeydοwn=gameStart;

function gameStart(){
	start.style.display='none';
	createPillar(pTot);
	timer=setInterval(down,gap);
	document.οnkeydοwn=up;
	pTimer=setInterval(function(){
		pillarMove()
	},10);
}
function up(){
	var height=0;
	//下落速度置0
	speed=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
//背景向下移动300px
function 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.οnkeydοwn=null;
	//暂停2000ms
	setTimeout(function(){
		document.οnkeydοwn=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.οnkeydοwn=gameStart;
}

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