学着做的第一个小游戏 flappyBrid 飞翔的小鸟 有图片资源

<!DOCTYPE html>
<html>
<head>
	<title>飞鸟</title>
	<style type="text/css">
	/* 不同内核*/
		@-webkit-keyframes fly{
			0%{
				transform: translate3d(0,0,0); 
				-o-transform: translate3d(0,0,0); 
				-ms-transform: translate3d(0,0,0);
				-moz-transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0); 
			}
			100%{
				transform: translate3d(0,30px,0); 
				-o-transform: translate3d(0,30px,0); 
				-ms-transform: translate3d(0,30px,0); 
				-moz-transform: translate3d(0,30px,0);
				-webkit-transform: translate3d(0,30px,0); 
			}
		}

		@keyframes fly{
			0%{
				transform: translate3d(0,0,0); 
				-o-transform: translate3d(0,0,0); 
				-ms-transform: translate3d(0,0,0); 
				-moz-transform: translate3d(0,0,0); 
				-webkit-transform: translate3d(0,0,0); 
			}
			100%{
				transform: translate3d(0,30px,0); 
				-o-transform: translate3d(0,30px,0); 
				-ms-transform: translate3d(0,30px,0);
				-moz-transform: translate3d(0,30px,0); 
				-webkit-transform: translate3d(0,30px,0); 
			}
		}

		@keyframes birdMove{
			0%{
				background: url("./img/bird2_2.png");
			}
			50%{
				background: url("./img/bird2_1.png");
			}
			100%{
				background: url("./img/bird2_0.png");
			}
		}
		@keyframes banner{
			0%{
				transform: translate3d(0,0,0); 
				-o-transform: translate3d(0,0,0); 
				-ms-transform: translate3d(0,0,0);
				-moz-transform: translate3d(0,0,0); 
				-webkit-transform: translate3d(0,0,0); 
			}
			100%{
				transform: translate3d(-288px,0,0); 
				-o-transform: translate3d(-288px,0,0); 
				-ms-transform: translate3d(-288px,0,0); 
				-moz-transform: translate3d(-288px,0,0); 
				-webkit-transform: translate3d(-288px,0,0); 
			}
		}

		#wrap{
			width: 288px;
			height: 512px;
			background: url("./img/bg_day.png");
			margin:0 auto;
			overflow: hidden;
			position: relative;
		}
		#beginScore{
			width: 24px;
			height: 44px;
			background: url("./img/0.png");
			margin: 35px auto;
		}
		#title {
			width: 178px;
			height: 48px;
			margin: 0 auto;
			position: relative;

			
			-o-animation: fly 1s infinite alternate; 
			-ms-animation: fly 1s infinite alternate;
			-moz-animation: fly 1s infinite alternate;
			-webkit-animation: fly 1s infinite alternate;
			
		}
		#beginBird{
			width: 34px;
			height: 25px;
			background: url("./img/bird2_2.png");
			position: absolute;
			left: 50%;
			transform: translate3d(-50%,0,0);

			animation: birdMove 1s infinite alternate;
			-o-animation: birdMove 1s infinite alternate;		
			-ms-animation: birdMove 1s infinite alternate;
			-moz-animation: birdMove 1s infinite alternate;		
			-webkit-animation: birdMove 1s infinite alternate;
			 
		}
		#beginBtn{
			width: 116px;
			height: 70px;
			background: url("./img/button_play.png");
			position: absolute;
			left: 50%;
			transform: translate3d(-50%,0,0);
			top: 320px;
		}
		#banner{
			background: url("./img/land.png");
			width: 576px;
			height: 90px;
			position: absolute;
			bottom: 0px;

			animation: banner 3s linear infinite ;
			-webkit-animation: banner 3s linear  infinite ;
		}
		#bird{
			width: 33px;
			height: 25px;
			/*background: url("./img/bird2_0.png");*/
			position: absolute;
			left: 30px;
			top: 200px;
			display: none;
		}
		.birdup{
			background: url("./img/bird2_1.png");
		}
		.birddown{
			background: url("./img/bird2_2.png");
		}

		.duct {
			width: 52px;
			height: 422px;
			overflow: hidden;
			/*border: 1px solid black;*/
			position: absolute;
			left: 288px;	
			
		}
		.upduct{
			width: 62px;
			height: 320px;
			background: url("./img/pipe_up.png") no-repeat;
			position: absolute;
			bottom: -100px;
		}
		.downduct{
			width: 62px;
			height: 320px;
			background: url("./img/pipe_down.png") no-repeat;
			position: absolute;
			/*图片有320高  320 - top 就是露出来的高度*/
			top: -200px;

		}
		#gameover{
			width: 204px;
			height: 54px;
			background: url("./img/text_game_over.png");
			position: absolute;
			top: 100px;
			left: 50%;
			transform: translate3d(-50%,0,0);
			display: none;
			z-index: 5;
		}
		#again{
			width: 80px;
			height: 28px;
			background: url("./img/button_ok.png");
			position: absolute;
			top: 180px;
			left: 50%;
			transform: translate3d(-50%,0,0);
			display: none;
			z-index: 5;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<div id="beginScore"></div>
		<div id="title">
			<img src="./img/title.png"><div id="beginBird"></div>
		</div>
		<div id="beginBtn"></div>
		<div id="banner"></div>

		<div id="bird"></div>
		<div id="gameover"></div>
		<div id="again"></div>

	</div>


	<script type="text/javascript">
		var wrap = document.getElementById('wrap');
		var beginBtn = document.getElementById('beginBtn');
		var beginScore = document.getElementById('beginScore');
		var title = document.getElementById('title');
		var bird = document.getElementById('bird');
		var gameoverimg = document.getElementById('gameover');
		var okbutton = document.getElementById('again');
		
		var y = 2;

		gameBegin();
		tapWrap();
		
		function gameBegin() {
			beginBtn.onclick = function () {
				beginScore.style.display = "none";
				title.style.display = "none";
				this.style.display = "none";
				bird.style.display = "block";

				birdMove(bird);
				creatDuct();
				
			}		
		}
		
		function birdMove(bird) {
			var offTop = bird.offsetTop;
			var timer = setInterval(function () {
				offTop += y;
				y+=0.5;
				if (y > 6) {
					y = 6;
				}
				if (y < 0) {
					bird.className = "birdup";
				}
				else{
					bird.className = "birddown";
				}

				// 判断 小鸟是否落地
				if (offTop >= 512-25-90 ) {
					offTop = 512-25-90;
					clearInterval(timer);
					gameover();
				}
				bird.style.top = offTop +'px';
			},30)
		}

		function tapWrap() {
			wrap.onclick = function () {
				y =-7;
			}
		}
		//获得随机的 值
		function random(min,max) {
			return parseInt(Math.random() * (max - min)+ (min + 1));
		}

		function creatDuct() {
			//每隔   创建一组管道
			var timer = setInterval(function () {
				// 
				var duct = document.createElement("div");
				duct.className = "duct";
				wrap.appendChild(duct);

				var upduct =  document.createElement("div");//添加向上开口的水管
				upduct.className = "upduct";
				upduct.style.bottom = random(-260,-60) + "px";//设置bottom 设置随机范围是-260 到 -60
				duct.appendChild(upduct);

				var downduct =  document.createElement("div");//添加向下开口的水管
				downduct.className = "downduct";

				var upductBot = getComputedStyle(upduct).bottom; //获取bottom的值
				upductBot = Number(upductBot.replace('px','')); // 转换为数字
				downduct.style.top = -318 - upductBot   + "px"; // 根据bottom设置top
				duct.appendChild(downduct);

				ductMove(duct,upduct,downduct,timer);
				


			},2000); 
		}
		function ductMove(duct,upduct,downduct,timer) {
			var birdLeft = bird.offsetLeft;  //30
			var birdRight = bird.offsetLeft + bird.offsetWidth; //30+48
			
		        var offLeft = duct.offsetLeft;
		        var timer2 = setInterval(function () {
				offLeft -= 1;
				duct.style.left = offLeft + "px";
				//移除 水管
				if (duct.offsetLeft + duct.offsetWidth <=0) {
					
					duct.remove();
					
				}
				
				if (duct.offsetLeft < birdRight && (duct.offsetLeft + duct.offsetWidth) > birdLeft)  {			
					 if ( bird.offsetTop < (downduct.offsetTop + downduct.offsetHeight) || bird.offsetTop + bird.offsetHeight > upduct.offsetTop) {
					 	gameover(timer,timer2);
					 	alert("你挂了");
					 }
				}
				duct.move =timer2;
				//(duct.offsetLeft < birdRight && (duct.offsetLeft + duct.offsetWidth) > birdLeft && bird.offsetTop > (downduct.offsetTop + downduct.offsetHeight) && bird.offsetTop + bird.offsetHeight < upduct.offsetTop)
			},13);
		}
		function gameover(timer,timer2) {
			
				gameoverimg.style.display = "block";
				okbutton.style.display = "block";
				again();
				clearInterval(timer2);
				clearInterval(timer);

		}
		function again() {
			okbutton.onclick = function () {
				window.location.reload();
				
			}
		}
		
	</script>
</body>
</html>

展开阅读全文

没有更多推荐了,返回首页