效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#game {
width: 800px;
height: 600px;
background: url('./images/sky.png');
position: relative;
overflow: hidden;
}
#bird {
width: 34px;
height: 25px;
background: url('./images/birds.png') -8px -10px no-repeat;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="game">
<div id="bird"></div>
</div>
<script>
// 让小鸟飞起来
// 移动的背景
// top
// 定时器
// 动画原理 leader = leader + step
// 获取相应的元素
var game = document.getElementById('game');
var birdEle = document.getElementById('bird');
// 初始化背景图的值
var sky = {
x: 0
}
// 初始bird 的值
var bird = {
speedX: 5,
speedY: 0,
x: birdEle.offsetLeft,
y: birdEle.offsetTop
}
// 游戏的状态
var running = true;
setInterval(function () {
if (running) {
// 移动背景让小鸟实现水平运动
//backgroundPositionX 属性设置背景图像的水平位置。
sky.x -= 5;
game.style.backgroundPositionX = sky.x + 'px';
// 实现小鸟的向下加速运动 每次增加的距离1 2 3 4 5 6……
bird.speedY += 1;
bird.y += bird.speedY;
if (bird.y < 0) {
running = false;
bird.y = 0;
}
if (bird.y + birdEle.offsetHeight > 600) {
running = false;
bird.y = 600 - birdEle.offsetHeight;
console.log(bird.y)
}
birdEle.style.top = bird.y + 'px';
}
//可以设置定时器的间隔来设置难度
}, 30)
// 点击文档的时候实现小鸟向上运动
document.onclick = function () {
bird.speedY = -10;
//每点一次走-9 -8 -7 -6 …… 0 1 2
}
// 创建管道
function createPipe(position) {
var pipe = {};
pipe.x = position;
//上管道的高度在200-300之间,两个管道间距200
pipe.uHeight = 200 + parseInt(Math.random() * 100);
pipe.dHeight = 600 - pipe.uHeight - 200;
pipe.dTop = pipe.uHeight + 200;
var uPipe = document.createElement('div');
uPipe.style.width = '52px';
uPipe.style.height = pipe.uHeight + 'px';
//position：背景图片的定位。水平位置和垂直位置。
uPipe.style.background = 'url("./images/pipe2.png") no-repeat center bottom';
uPipe.style.position = 'absolute';
uPipe.style.top = '0px';
uPipe.style.left = pipe.x + 'px';
game.appendChild(uPipe);
var dPipe = document.createElement('div');
dPipe.style.width = '52px';
dPipe.style.height = pipe.dHeight + 'px';
dPipe.style.background = 'url("./images/pipe1.png") no-repeat center top';
dPipe.style.position = 'absolute';
dPipe.style.top = pipe.dTop + 'px';
dPipe.style.left = pipe.x + 'px';
game.appendChild(dPipe);
// 让管道运动起来
setInterval(function () {
if (running) {
pipe.x -= 2;
uPipe.style.left = pipe.x + 'px';
dPipe.style.left = pipe.x + 'px';
if (pipe.x < -52) {
// 开始创建的这四个管道一直在循环
pipe.x = 800;
}
//撞到上下管道的情况
//bird.x + 34 > pipe.x小鸟进入管道 bird.x < pipe.x + 52没有出来管道
//bird.y < pipe.uHeight;小鸟的高度位置在上管道里面
//bird.y < pipe.uHeight;小鸟的高度位置在下管道里面
var uCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y < pipe.uHeight;
var dCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y > pipe.uHeight + 200;
if (uCheck || dCheck) {
running = false;
}
}
}, 30)
}
createPipe(400);
createPipe(600);
createPipe(800);
createPipe(1000);
</script>
</body>
</html>里面的图片：
birds.png：
sky.png：
pipe1.png：
pipe2.png：
