小鸟游戏案例
今天所学的小鸟案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#game {
width: 800px;
height: 600px;
background: url(imagesgame/sky.png);
position: relative;
background-position-x:50px;
overflow: hidden;
}
#bird {
width: 34px;
height: 25px;
background: url(imagesgame/birds.png) -8px -10px;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<!--搭建骨架-->
<div id="game">
<div id="bird"></div>
</div>
</body>
<script>
window.onload = function(){
}
//让小鸟飞起来 背景向后移动
//获取元素
var game = document.getElementById('game');
var birdel = document.getElementById('bird');
//以键值对形式保存小鸟和背景参数
var sky = {
x:0
}
//初始化bird值
var bird = {
speedX:5,
speedY:0,
x:birdel.offsetLeft,
y:birdel.offsetTop
}
//判断游戏进程 需要一个状态值
var running = true;
//定义定时器 使游戏背景移动
setInterval(function() {
if (running){
sky.x -= 5;
game.style.backgroundPositionX = sky.x + 'px';
//实现小鸟的上下移动
//距离 = 时间 * 速度
bird.speedY +=1; // 加速度 为 1
bird.y += bird.speedY;
if (bird.y < 0) {
running = false;
bird.y = 0;
}
//当小鸟的offsetTop + 自身的高度大于背景高度时游戏停止 小鸟固定
if (bird.y + birdel.offsetHeight > 600) {
running = false;
bird.y = 600 - birdel.offsetHeight;
}
birdel.style.top = bird.y + 'px';
}
},30)
//点击文档时,小鸟跃起
document.onclick = function() {
bird.speedY = -10;
}
//创建管道的函数
function createPipe(position) {
//管道有很多参数 水平位置 自身高度 上下两根管子
var pipe = {};
//水平位置
pipe.x = position;
//上管道的高度
pipe.uHeight = 200 + parseInt(Math.random()*100)
//下管道的高度
pipe.dHeight = 600 - pipe.uHeight - 200;
//下管top值
pipe.dTop = pipe.uHeight + 200;
//创建div
var uPipe = document.createElement('div');
uPipe.style.width = '52px';
uPipe.style.height = pipe.uHeight + 'px';
uPipe.style.position = 'absolute';
uPipe.style.top = '0px';
uPipe.style.left = pipe.x + 'px';
uPipe.style.background = 'url(imagesgame/pipe2.png) center bottom';
game.appendChild(uPipe);
//上管道end
//下管道start
var dPipe = document.createElement('div');
dPipe.style.width = '52px';
dPipe.style.height = pipe.dHeight + 'px';
dPipe.style.position = 'absolute';
dPipe.style.top = pipe.dTop + 'px';
dPipe.style.left = pipe.x + 'px';
dPipe.style.background = 'url(imagesgame/pipe1.png) center top';
game.appendChild(dPipe);
//让管道动起来
setInterval(function() {
if(running) {
pipe.x -= 1;
uPipe.style.left = pipe.x + "px";
dPipe.style.left = pipe.x + "px";
if (pipe.x < -52 ) {
pipe.x = 800;
}
}
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;
}
},2)
}
createPipe(400);
createPipe(600);
createPipe(800);
createPipe(1000);
</script>
</html>