html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery.min.js"></script>
</head>
<body>
<!-- 滚动背景 -->
<div class="sky_img">
<!-- 小鸟图片 -->
<img src="img/ww.png" class="bird" alt="">
<!--存放分数-->
<div class="score">
</div>
<!-- 开始游戏按钮 -->
<h2 class="h2">开始游戏</h2>
<!-- 遮罩层 -->
<div class="mask"></div>
<!-- 游戏结束弹框 -->
<div class="sucess">
<h1>Game over!</h1>
<span>您的最终分数是:</span>
<span class="results"></span>
<h2 class="return">重新开始</h2>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
css:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Georgia, Times, 'Microsoft Yahei', serif;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
html,
body {
width: 100%;
}
.sky_img {
position: relative;
width: 100%;
height: 600px;
background: url('../img/sky.png');
overflow: hidden;
}
.bird {
width: 30px;
height: 40px;
position: absolute;
left: 50%;
top: 270px;
transform: translateX(-50%);
}
h2 {
width: 100px;
height: 50px;
cursor: pointer;
margin: 350px auto;
}
.score {
color: yellow;
font-weight: bold;
font-size: 30px;
position: fixed;
top: 0;
left: 50%;
z-index: 99;
}
.mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
z-index: 999;
background-color: rgba(0, 0, 0, .6);
}
.sucess {
width: 300px;
height: 300px;
font-weight: bold;
margin: 150px -130px;
position: absolute;
left: 50%;
top: 60px;
text-align: center;
display: none;
z-index: 9999;
}
.sucess h1 {
font-size: 40px;
margin-top: 40px;
color: pink;
}
.results,
span {
margin-top: 30px;
color: cyan;
font-size: 20px;
font-weight: bold;
}
.return {
color: orangered;
margin-top: 10px;
}
js:
var n = 0;
var flybird = $(".bird").get(0);
var flyBird = {
stepx: 52,
stepy: 0,
x: flybird.offsetLeft,
y: flybird.offsetTop
}
var count = 0;
var timer = setInterval(function() {
$('.sky_img').css({
'background-position': -n + 'px',
});
n += 5;
flyBird.stepy += 1;
flyBird.y += flyBird.stepy;
if (flyBird.stepy >= 10) {
flyBird.stepy = -10,
flyBird.y += flyBird.stepy;
}
$(flybird).css("top", flyBird.y + "px")
}, 20);
var flying = true;
$(".h2").click(function() {
$(".h2").hide();
clearInterval(timer);
flyBird.stepy = 0;
setInterval(function() {
if (flying) {
$('.sky_img').css({
'background-position': -n + 'px',
});
n += 5;
flyBird.y += flyBird.stepy;
flyBird.stepy += 1;
flyBird.x = flyBird.stepx;
if (flyBird.y <= 0) {
flying = false;
$(".mask").css("display", "block");
$(".sucess").css("display", "block")
$(".score").css("display", "none")
}
if (flyBird.y >= 600) {
flying = false;
$(".mask").css("display", "block");
$(".sucess").css("display", "block")
$(".score").css("display", "none")
}
$(flybird).css("top", flyBird.y + "px");
$(flybird).css("left", flyBird.x + "px");
}
}, 30)
$('.sky_img').click(function() {
flyBird.stepy = -10;
});
$(document).keydown(function(e) {
if (e.keycode == undefined) {
flyBird.stepy = -10;
}
});
var createzz = function(x) {
var zz = {
x: x,
upHeight: 0,
downHeight: 0
}
zz.x = x;
zz.upHeight = Math.floor(Math.random() * 200 + 50);
zz.downHeight = 600 - 150 - zz.upHeight;
var upDiv = document.createElement("div");
console.log(upDiv);
$(upDiv).css({
"position": "absolute",
"height": zz.upHeight + "px",
"width": "52px",
"left": zz.x + "px",
"top": 0,
"background": "url(img/pipe2.png) no-repeat center bottom"
});
$('.sky_img').append($(upDiv));
var downDiv = document.createElement("div");
$(downDiv).css({
"position": "absolute",
"height": zz.downHeight + "px",
"width": "52px",
"left": zz.x + "px",
"top": zz.upHeight + 150 + "px",
"background": "url(img/pipe1.png) no-repeat"
});
$('.sky_img').append($(downDiv));
function Movezz() {
if (flying) {
zz.x -= 5;
$(upDiv).css("left", zz.x + "px");
$(downDiv).css("left", zz.x + "px");
if (zz.x <= -52) {
zz.x = 1800;
}
if (zz.x >= 0 && flyBird.x >= zz.x + 52) {
count++;
$(".score").html(count);
$(".results").html(count);
}
var ucheck = flyBird.x + 30 > zz.x && flyBird.x < zz.x + 52 && flyBird.y <= zz.upHeight;
var dcheck = flyBird.x + 30 > zz.x && flyBird.x < zz.x + 52 && flyBird.y + 30 >= zz.downHeight + 150;
if (ucheck || dcheck) {
flying = false;
$(".mask").css("display", "block");
$(".sucess").css("display", "block")
$(".score").css("display", "none")
}
}
}
var zztimer = setInterval(Movezz, 30);
}
createzz(300);
createzz(600);
createzz(900);
createzz(1200);
createzz(1500);
createzz(1800);
$(".return").click(function() {
location.href = "index.html";
})
});