完整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。