Complete demo download resources https://download.csdn.net/download/qq_30548105/10847675
I have never done a front-end game, even if it is not a small game implemented with an engine. I tried it this time. After referring to some information, the information is not very complete. Just for entertainment, let's look at the renderings first.
Well, without further ado, just go directly to the code.
First, realize the homepage animation effect, as shown in the figure
1. The entire interface
<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. Background style
#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. Animation effects
/*游戏开始界面，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. Rectangle collision diagram
With the target as the reference object, the range of the bullet around the target is considered to be the collision range
5. Schematic diagram of bird collision with pipeline
The red area is the collision range
6.js processing
Handling of bird movement
//鸟移动的方法
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)
}Pipeline generated code
/*创建管道的方法*/
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)
}Pipeline moving method
/**
* 管道移动方法
* @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.οnclick=null;
}
if(!stop){
duct.style.left=offLeft+"px";
}
},20);
}Bird and pipeline collision algorithm
/*鸟与管道的碰撞算法*/
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;
}Well, the above can achieve this effect. Just a demo for practice.
