html+css+js实现小游戏flybird(完整版)

我靠_叫我大当家的

于 2018-12-13 13:46:48 发布

阅读量5.8k

点赞数 11

分类专栏：网页技术文章标签： flybird 飞扬的小鸟纯js 小游戏鸟

本文链接： https://blog.csdn.net/qq_30548105/article/details/84984885

版权

网页技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

完整demo下载资源https://download.csdn.net/download/qq_30548105/10847675

从未做过前端的游戏，哪怕不是用引擎实现的小游戏也没做过，这次试了一下，参考了一些资料，资料也不是很完整，于是就自己补齐写了一个。仅仅娱乐，接下来先看下效果图。

好了，废话不多说直接上代码。

首先先实现首页动画效果，如图

1.整个界面

<div id="wrap">
	<div id="Score"></div>
		<div id="title">
			<img src="img/head.jpg" /><div id="beginBird"></div>
		</div>
		<div id="beginBtn"></div>
		<div id="banner"></div>
		<div id="bird" class="birdDown"></div>
		<!-- 由js生成管道代码
		<div class="duct">
			<div class="upduct">
				<img src="img/up_pipe.png" />
			</div>
			<div class="downduct">
			    <img src="img/down_pipe.png" />
		    </div>
	    </div>
        -->
</div>

2.背景样式

                     #wrap{
				/*游戏尺寸*/
				width: 343px;
				height: 480px;
				background: url(img/bg.jpg);
				position: relative;
				overflow: hidden;
			}
			#Score{
				/*游戏得分*/
				width: 28px;
				height: 39px;
				background: url(img/0.jpg);
				position: absolute;
				left: 50%;
				top: 70px;
				-webkit-transform: translate3d(-50%,0,0);
				-ms-transform: translate3d(-50%,0,0);
				-o-transform: translate3d(-50%,0,0);
				-moz-transform: translate3d(-50%,0,0);
				transform: translate3d(-50%,0,0);
			}
			#title{
				/*游戏开始页面的logo字+鸟部分的整体*/
				position: absolute;
				left: 50px;
				top: 150px;
				-webkit-animation: "fly" 1s infinite alternate;
				-ms-animation: "fly" 1s infinite alternate;
				-moz-animation: "fly" 1s infinite alternate;
				-o-animation: "fly" 1s infinite alternate;
				animation: "fly" 1s infinite alternate;
			}
			#beginBird{
				/*游戏开始页面的鸟*/
				width: 40px;
				height: 26px;
				background: url(img/bird0.png);
				position: absolute;
				right: 10px;
				top: 20px;
				-webkit-animation: "birdFly" 1s infinite alternate;
				-ms-animation: "birdFly" 1s infinite alternate;
				-moz-animation: "birdFly" 1s infinite alternate;
				-o-animation: "birdFly" 1s infinite alternate;
				animation: "birdFly" 1s infinite alternate;
			}
			#beginBtn{
				/*游戏开始按钮*/
				width: 85px;
				height: 29px;
				background: url(img/start.jpg);
				position: absolute;
				left: 50%;
				-webkit-transform: translate3d(-50%,0,0);
				-ms-transform: translate3d(-50%,0,0);
				-o-transform: translate3d(-50%,0,0);
				-moz-transform: translate3d(-50%,0,0);
				transform: translate3d(-50%,0,0);
				bottom: 150px;
			}
			#banner{
				/*游戏开始页面的logo字*/
				width: 686px;
				height: 14px;
				background: url(img/banner.jpg);
				position: absolute;
				bottom: 43px;
				-webkit-animation: "scrollBanner" 3s infinite linear;
				-ms-animation: "scrollBanner" 3s infinite linear;
				-moz-animation: "scrollBanner" 3s infinite linear;
				-o-animation: "scrollBanner" 3s infinite linear;
				animation: "scrollBanner" 3s infinite linear;
			}
			#bird{
				/*鸟*/
				width: 40px;
				height: 30px;
				position: absolute;
				left: 30px;
				top: 100px;
				display: none;
			}
			.birdUp{
				background: url(img/up_bird0.png) no-repeat;
			}
			.birdDown{
				background: url(img/down_bird0.png) no-repeat;
			}
			.duct{
				/*管道*/
				width: 62px;
				height: 423px;
				position: absolute;
				left: 343px;
			}
			.upduct{
				width: 62px;
				height: 150px;
				background: url(img/up_mod.png) repeat-y;
				position: relative;
			}
			.upduct img{
				position: absolute;
				bottom: 0;
			}
			.downduct{
				width: 62px;
				height: 100px;
				background: url(img/down_mod.png) repeat-y;
				position: absolute;
				bottom: 0;
			}

3.动画效果


			/*游戏开始界面，logo字与右边的鸟上下反复运动动画*/
			@keyframes fly{
				from{
					-webkit-transform: translate3d(0,0,0);
					-ms-transform: translate3d(0,0,0);
					-o-transform: translate3d(0,0,0);
					-moz-transform: translate3d(0,0,0);
					transform: translate3d(0,0,0);
				}
				to{
					-webkit-transform: translate3d(0,30px,0);
					-ms-transform: translate3d(0,30px,0);
					-o-transform: translate3d(0,30px,0);
					-moz-transform: translate3d(0,30px,0);
					transform: translate3d(0,30px,0);
				}
			}
			
			/* 草坪滚动动画 */
			@keyframes scrollBanner{
				from{
					-webkit-transform: translate3d(0,0,0);
					-ms-transform: translate3d(0,0,0);
					-o-transform: translate3d(0,0,0);
					-moz-transform: translate3d(0,0,0);
					transform: translate3d(0,0,0);
				}
				to{
					-webkit-transform: translate3d(-343px,0,0);
					-ms-transform: translate3d(-343px,0,0);
					-o-transform: translate3d(-343px,0,0);
					-moz-transform: translate3d(-343px,0,0);
					transform: translate3d(-343px,0,0);
				}
			}
			/*游戏开始页面小鸟翅膀变化效果*/
			@keyframes birdFly{
				from{
					background: url(img/bird0.png);
				}
				to{
					background: url(img/bird1.png);
				}
			}

4.矩形碰撞示意图

以目标为参照物，子弹绕目标一圈的范围即都算是碰撞范围

5.鸟与管道碰撞示意图

红色区域为碰撞范围

6.js处理

鸟移动的处理

//鸟移动的方法
		function birdMove(){
			offTop =bird.offsetTop;
			birdTimer=setInterval(function(){
				offTop+=y;
				y+=0.5;
				if (y>=6) {
					y=6;
				}
				if (y<0) {
					bird.className="birdUp";
				} else{
					bird.className="birdDown";
				}
				if (offTop>=480-87) {
					offTop=480-87;
					clearInterval(birdTimer);
				} 
				bird.style.top=offTop+"px";
			},30)
		}

管道生成代码

/*创建管道的方法*/
		function createDuct(){
			ductTimer=setInterval(function(){
				var duct=document.createElement("div");
				duct.className="duct";
				wrap.appendChild(duct);
				//生成上管道
				var up=document.createElement("div");
				up.className="upduct";
				up.style.height=random(60,203)+"px";
				duct.appendChild(up);
				var upImg=document.createElement("img");
				upImg.src="img/up_pipe.png";
				up.appendChild(upImg);
				//生成下管道
				var down=document.createElement("div");
				down.className="downduct";
				down.style.height=323-up.offsetHeight+"px";
				duct.appendChild(down);
				var downImg=document.createElement("img");
				downImg.src="img/down_pipe.png";
				down.appendChild(downImg);

				ductMove(duct,up.offsetTop+up.offsetHeight,down.offsetTop);
				
			},3000)
		}

管道移动的方法

/**
		 * 管道移动方法
		 * @param {管道} duct
		 * @param {上管道的顶部位置} upTop
		 * @param {下管道的顶部位置} downTop
		 */
		function ductMove(duct,upTop,downTop){
			var offLeft=duct.offsetLeft;
			duct.move=setInterval(function(){
				offLeft-=1;
				if (collision(bird,duct,upTop,downTop)) {
					clearInterval(duct.move);
					clearInterval(ductTimer);
					stop=true;
					wrap.onclick=null;
				}
				if(!stop){
					duct.style.left=offLeft+"px";
				}
			},20);
		}

鸟与管道碰撞算法

/*鸟与管道的碰撞算法*/
		function collision(first,second,upTop,downTop){
			var minX=second.offsetLeft-first.offsetWidth;
			var maxX=second.offsetLeft+second.offsetWidth;
			var minY=second.offsetTop-first.offsetHeight;
			var maxY=second.offsetTop+second.offsetHeight;
			if(first.offsetLeft>=minX && first.offsetLeft<=maxX &&
				first.offsetTop>=minY && first.offsetTop<=maxY && 
				(first.offsetTop<=upTop || first.offsetTop+first.style.height>=downTop)){
					return true;
				}
			return false;
		}

好了，以上就可以实现这样的效果了。只是练习的demo。