<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<style>
html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.bg{
width: 100%;
height: 100%;
overflow: hidden;
background: url(img/img/sky.png);
background-size: 100% 100%;
}
.bird{
background: url(img/img/bird1.png);
width:30px;
height: 30px;
position: absolute;
left:calc(50% - 15px);
top: 28%;
z-index: 9999;
}
h2{
width: 150px;
height:50px;
line-height: 50px;
text-align: center;
position: absolute;
left:calc(50% - 75px);
top: 43%;
cursor: pointer;
}
h2:hover{
background: #666;
opacity: .5;
border: 1px solid #666;
border-radius: 10px;
}
.fenshu{
position: absolute;
right: 0;
top: 0;
display: none;
font-size: 40px;
font-weight: bold;
z-index: 9999;
}
.mark{
width: 100%;
height: 100%;
background: #666;
opacity: .5;
position: absolute;
display: none;
z-index: 9999;
}
.gameover{
width: 400px;
height: 200px;
position: absolute;
text-align: center;
background: rgba(255, 255, 255, .5);
left: calc(50% - 200px);
top: calc(50% - 100px);
display: none;
z-index: 9999;
}
.gameover>span{
display: inline-block;
width: 100%;
font-size: 20px;
}
.gameover>span:last-of-type{
width: 90px;
height: 40px;
margin-top: 20px;
line-height: 40px;
}
.gameover>span:last-of-type:hover{
background: #333;
opacity: .3;
}
a{
color: #f00;
text-decoration: none;
}
</style>
</head>
<body>
<div class="bg">
<div class="bird">
</div>
<h2 class="aaa">开始游戏</h2>
<div class="fenshu"><h1></h1></div>
<div class="mark"></div>
<div class="gameover">
<h1>Game over</h1>
<span>您的最终分数是:<span></span></span>
<span><a href="飞翔的小鸟.html">再试一次</a></span>
</div>
</div>
<script>
var flybird=
{
sky:0,
count:0,
gameover:0,
bird:
{
high:0,
y:$(".bird").offset().top,
stepy:0
},
bg_timer:function()
{
this.sky--;
$(".bg").css({"background-position-x":this.sky});
},
birdrun:function()
{
if(this.gameover==0){
this.bird.high++;
this.bird.y+=this.bird.high
if(this.bird.high>15)
{
this.bird.high=-16;
this.bird.y+=this.bird.high
}
$(".bird").css({"top":this.bird.y+"px"});
}
},
run:function()
{
if(this.gameover == 0){
this.bird.y+=this.bird.stepy+=0.5;
$(".bird").css({top: "32%",left:"52px"}).css({"margin-top":this.bird.y+"px"});
$("h2").css({"display":"none"});
$(".fenshu").css({"display":"block"}).find("h1").text(this.count);
if($(".bird").offset().top<=0||$(".bird").offset().top>=parseInt($(".bg").css("height")))
this.gameover=1;
this.zhuzi_move();
this.fenshu();
}
else if(this.gameover==1)this.isgameover();
},
up:function()
{
this.bird.stepy=-10;
this.bird.y+=this.bird.stepy;
$(".bird").css({"margin-top":this.bird.y+"px"});
},
zhuzi:function(l)
{
var sheight=Math.random()*parseInt($(".bg").css("height"))-250;
if(sheight<0)sheight=0;
var xheight=parseInt($(".bg").css("height"))-sheight-250;
$("<div></div>").appendTo(".bg").css({"height":sheight,"width":52,"position":"absolute","left":l,"top":0,"background":"url(img/img/pipe2.png) center bottom"});
$("<div></div>").appendTo(".bg").css({"height":xheight,"width":52,"position":"absolute","left":l,"bottom":0,"background":"url(img/img/pipe1.png)"});
},
zhuzi_move:function()
{
var off=$(".bird").offset().left;
var div=$(".bg").find(".gameover").nextAll();
var top=$(".bird").offset().top
for(var i=0;i<div.length;i++)
{
var left=parseInt(div.eq(i).css("left"));
left-=2;
if(this.count>50)left-=3;
if(left<=-52)left=parseInt($(".bg").css("width"))
div.eq(i).css({"left":left});
}
for(var j=0;j<div.length;j+=2)
{
var left=parseInt(div.eq(j).css("left"));
if(left==0)this.count++
if(off+30>left&&left>0&&top<=parseInt(div.eq(j).css("height"))||off+30>left&&left>0&&top>=parseInt(div.eq(j).css("height"))+250)this.gameover=1
}
},
fenshu:function()
{
$(".fenshu").text(this.count);
},
isgameover:function()
{
$(".bg").find(".mark").css({"display":"block"}).next().css({"display":"block"}).find("span:eq(1)").text(this.count);
}
}
var timer1= setInterval(function(){flybird.bg_timer.call(flybird);flybird.bg_timer()},30)
var timer2= setInterval(function(){flybird.birdrun.call(flybird);flybird.birdrun},30)
$("h2").on("click",function()
{
var width=(parseInt($(".bg").css("width"))+52)/5;
clearInterval(timer2);
flybird.zhuzi(width);
flybird.zhuzi(width*2);
flybird.zhuzi(width*3);
flybird.zhuzi(width*4);
flybird.zhuzi(width*5);
setInterval(function(){flybird.run.call(flybird);flybird.run()},30)
})
$(".bg").on("click",function()
{
var a=$(".aaa").css("display");
if(a=="none"&&flybird.gameover==0)
flybird.up();
})
</script>
</body>
</html>
飞翔的小鸟简易版
最新推荐文章于 2024-03-03 13:44:56 发布