Flappy Bird的实现

Flappy Bird

之前一直在玩的小游戏，到底是怎么实现的呢？下面我们一起来看看吧

添加样式

*{
			margin: 0;
			padding: 0;
		}
		#game{
			width: 800px;
			height: 600px;
			background: url(images/sky.png);
			-ms-background-position-x: -50px; 
			position: relative;
			overflow: hidden;
		}
		#bird{
			width: 34px;
			height: 25px;
			background: url(images/birds.png) -8px -10px;
			top: 100px;
			left: 100px;
			position: absolute;
			
		}

创建骨架，只有背景图和小鸟

<div id="game">
		<div id="bird"></div>
	</div>

实现游戏

<script type="text/javascript">
		/*
		让小鸟飞起来
			1.让背景向后移动
		*/

		//1.获取元素
		var game=document.getElementById('game');
		var birdEl=document.getElementById('bird');
		//2.以键值对形式保存小鸟和背景的参数
		var sky={
			x:0
		}
		//初始化bird值
		var bird={
			speedX:5,
			speedY:0,
			x:birdEl.offsetLeft,
			y:birdEl.offsetTop
		}
		//判断游戏进程，需要一个状态值
		var running=true;
		//定义定时器，使游戏背景移动
		setInterval(function(){
			if(running){
				sky.x-=5;
				game.style.backgroundPositionX=sky.x+'px';
			    //实现小鸟的上下移动
			    //距离=时间*速度
			    bird.speedY += 1; //加速度 为1
			    bird.y +=bird.speedY;
			    /*
					1  0
					2  1  1
					3  2  2
					4  3  3
			    */
			    if(bird.y<0){
			    	running=false;
			    	bird.y=0;
			    }
			    //当小鸟的offsetTop+小鸟自身的高度大于背景高度时游戏停止，小鸟位置固定
			    if(bird.y+birdEl.offsetHeight>600){
			    	running=false;
			    	bird.y=600-birdEl.offsetHeight;
			    }
			    birdEl.style.top=bird.y+'px';
			}
		},20)

		//点击文档时，小鸟实现向上移动
		document.onclick=function(){
			bird.speedY=-10;
		}

		//创建管道函数
		function createPipe(position){
			//管道有很多参数（水平位置、自身高度、上下两个管子）
			var pipe={};
			//水平位置
			pipe.x=position;
			//上管道的高度  需求：两个管子之间的间隔必须是200px
			pipe.uHeight=200+parseInt((Math.random()*100));
			//下管道的高度
			pipe.dHeight=600-pipe.uHeight-200;
			//下管的top值
			pipe.dTop=pipe.uHeight+200;

			//创建一个div
			var uPipe=document.createElement('div');
			uPipe.style.width='52px';
			uPipe.style.height=pipe.uHeight+'px';

			uPipe.style.position='absolute';
			uPipe.style.top='0px';
			uPipe.style.left=pipe.x+'px';
			uPipe.style.background='url(images/pipe2.png) center bottom';
			game.appendChild(uPipe);


			var dPipe=document.createElement('div');
			dPipe.style.width='52px';
			dPipe.style.height=pipe.dHeight+'px';
			dPipe.style.background='url(images/pipe1.png) center top';
			dPipe.style.position='absolute';
			dPipe.style.top=pipe.dTop+'px';
			dPipe.style.left=pipe.x+'px';
			game.appendChild(dPipe);


			//让管道动起来
			setInterval(function(){
				if(running){
					pipe.x -=2;
					uPipe.style.left=pipe.x+'px';
					dPipe.style.left=pipe.x+'px';
					if(pipe.x<-52){
						pipe.x=800;
					}

					var uCheck=bird.x+34>pipe.x && bird.x<pipe.x+52 && bird.y<pipe.uHeight;
					var dCheck=bird.x+34>pipe.x && bird.x<pipe.x+52 && bird.y>pipe.uHeight+200;
					if(uCheck||dCheck){
						running=false;
					}
				}
			},20)
		}
		createPipe(400);
		createPipe(600);
		createPipe(800);
		createPipe(1000);
	</script>