fly bird

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

img{

vertical-align: top;

}

ul li{

list-style: none;

}

#game{

width: 343px;

height: 480px;

background:url(img/bg.jpg) no-repeat;

margin: 20px auto 0;

position: relative;

overflow: hidden;

}

/*标题部分*/

#head{

width: 236px;

height: 77px;

background:url(img/head.jpg) no-repeat;

position: absolute;

left: 50%;

margin-left:-118px ;

top: 100px;

}

#head>img{

position: absolute;

right: 0;

top: 50%;

margin-top: -13px;

/*关键帧动画*/

animation: birdFly 1.5s linear infinite;

}

@keyframes birdFly{

from{

top: 50%;

}

25%{

top:25% ;

}

50%{

top: 50%;

}

75%{

top: 75%;

}

to{

top: 50%;

}

}

#menu{

position: absolute;

top: 240px;

width: 100%;

text-align: center;

}

/*改变鼠标光标形状*/

#start{

cursor: pointer;

}

/*结束菜单*/

#end{

position: absolute;

top: 100px;

width: 100%;

text-align: center;

font-size:28px ;

display: none;

}

#currentScore{

position: absolute;

right: 80px;

top: 40px;

}

#bestScore{

position: absolute;

right: 80px;

top: 90px;

}

/*管道*/

#pipes{

height: 100%;

}

/*单个管道*/

.pipe{

width: 62px;

height: 423px;

position: absolute;

}

.pipe_top{

position: absolute;

top: 0;

width: 62px;

/*高度通过JS控制*/

/*height: 150px;*/

background: url(img/up_pipe.png) bottom no-repeat,url(img/up_mod.png) repeat-y;

}

.pipe_bottom{

position: absolute;

bottom: 0;

width: 62px;

/*高度通过JS控制*/

/*height: 150px;*/

background: url(img/down_pipe.png) top no-repeat,url(img/down_mod.png) repeat-y;

}

/*游戏中的鸟*/

#bird{

position: absolute;

left: 62px;

top: 200px;

display: none;

}

/*分数*/

#score{

position: absolute;

top: 0;

width: 100%;

text-align: center;

display: none;

}

</style>

</head>

<body>

<div id="game">

<div id="head">

<img src="img/bird.png" alt="" />

</div>

<!--开始菜单-->

<div id="menu">

<img src="img/start.jpg" alt="" id="start" />

</div>

<!--结束菜单-->

<div id="end">

<img src="img/message.jpg" alt="" />

<span id="currentScore">0</span>

<span id="bestScore">0</span>

</div>

<ul id="pipes">

<!--单个管道-->

<!--<li class="pipe">

<div class="pipe_top"></div>

<div class="pipe_bottom"></div>

</li>-->

</ul>

<!--游戏中的小鸟-->

<img src="img/bird.png" alt="" id="bird" />

<!--顶端的分数显示-->

<div id="score">

<img src="img/0.jpg" alt="" />

</div>

<!--背景音乐-->

<audio src="music/bullet.mp3" id="bulletMusic"></audio>

<audio src="music/game_music.mp3" id="gameMusic"></audio>

<audio src="music/game_over.mp3" id="gameOverMusic"></audio>

</div>

</body>

<script type="text/javascript">

//获取页面元素

//开始按钮

var startBtn = document.getElementById('start');

//标题部分

var headDiv = document.getElementById('head');

//开始菜单

var menuDiv = document.getElementById('menu');

//管道

var pipesUL = document.getElementById('pipes');

//游戏中的小鸟

var birdImg = document.getElementById('bird');

//分数

var scoreDiv = document.getElementById('score');

//游戏界面

var gameDiv = document.getElementById('game');

//点击屏幕声音

var bulletMusic = document.getElementById('bulletMusic');

//游戏背景声音

var gameMusic = document.getElementById('gameMusic');

//游戏结束声音

var gameoverMusic = document.getElementById('gameOverMusic');

//结束菜单

var endmenu = document.getElementById('end');

//当前分数

var currentSpan = document.getElementById('currentScore');

//最好分数

var bestSpan = document.getElementById('bestScore');

var num = 0;

var speed = 0; // 记录小鸟的速度

//小鸟下降的计时器

var birdDownTimer;

//小鸟上升的计时器

var birdUpTimer;

//游戏开始

startBtn.onclick = function(e) {

//隐藏标题和菜单

headDiv.style.display = 'none';

menuDiv.style.display = 'none';

//播放背景音乐

gameMusic.loop = 'loop';

gameMusic.play();

//取消事件冒泡

var even = e || window.event;

even.stopPropagation();

even.cancelBubble = true; //ie

//显示小鸟

birdImg.style.display = 'block';

//显示分数

scoreDiv.style.display = 'block';

//生成管道

setInterval(creatPipe, 3000);

//小鸟下落

birdDownTimer = setInterval(birdDown, 30);

//给 gameDiv 添加点击方法(用于点击屏幕是的声音)

gameDiv.onclick = clickGame

//检测碰撞

setInterval(function() {

// 获取所有管道

var lis = document.querySelectorAll('li');

for(var i = 0; i < lis.length; i++) {

//判断上管道

collisionJC(lis[i].firstChild);

//判断下管道;

collisionJC(lis[i].lastChild);

}

}, 10);

}

//定义函数判断管道有没有与小鸟碰撞

function collisionJC(TBpipe) {

// 小鸟的位置

var topB = birdImg.offsetTop;

var bottomB = topB + birdImg.offsetHeight;

var leftB = birdImg.offsetLeft;

var rightB = leftB + birdImg.offsetWidth;

// 管道的位置

var topP = TBpipe.offsetTop;

var bottomP = topP + TBpipe.offsetHeight;

var leftP = TBpipe.offsetParent.offsetLeft;

var rightP = leftP + TBpipe.offsetWidth;

// 判断碰撞

if (!(bottomB < topP || leftB > rightP || topB > bottomP ||rightB < leftP)) {

// 死掉了

gameOver();

}

}

//定义函数创建管道

function creatPipe() {

//创建li

var li = document.createElement('li');

//配置属性

li.className = 'pipe';

li.style.left = pipesUL.clientWidth+'px';

//添加到父元素

pipesUL.appendChild(li);

var doorHeight = 113; //小鸟通过的高度

var minHeight = 60; //管道最小高度

//上管道高度

var topHeight = Math.floor(Math.random() * (li.clientHeight - doorHeight - minHeight - minHeight + 1) + minHeight);

//下管道高度

var bottomHeight = li.clientHeight - doorHeight - topHeight;

//创建topDiv

var topDiv = document.createElement('div')

topDiv.className = 'pipe_top';

topDiv.style.height = topHeight +'px';

li.appendChild(topDiv);

//创建bottomDiv

var bottomDiv = document.createElement('div')

bottomDiv.className = 'pipe_bottom';

bottomDiv.style.height = bottomHeight +'px';

li.appendChild(bottomDiv);

//让管道动

var L = pipesUL.clientWidth;

var pipeTimer = setInterval(function() {

L--;

li.style.left = L +'px';

if(L <= -li.clientWidth) {

clearInterval(pipeTimer);

pipesUL.removeChild(li);

}

if(L == 0) {

changeScore();

}

}, 10);

}

//定义函数改变分数

function changeScore() {

num++;

// 清除原来的图片

scoreDiv.innerHTML = '';

if(num < 10) {

var img = document.createElement('img');

img.src = 'img/' + num + '.jpg';

scoreDiv.appendChild(img);

} else if(num >= 10 && num < 100) {

// 十位

var img1 = document.createElement('img');

img1.src = 'img/' + Math.floor(num / 10) + '.jpg';

scoreDiv.appendChild(img1);

// 个位

var img2 = document.createElement('img');

img2.src = 'img/' + num % 10 + '.jpg';

scoreDiv.appendChild(img2);

} else if(num >= 100 && num < 1000) {

// 百位

// 十位

// 个位

} else if(num >= 1000 && num < 10000) {

}

}

//定义函数小鸟下落

function birdDown() {

// 修改图片

birdImg.src = 'img/down_bird.png';

// 修改速度

speed += 0.5;

// 设置最大速度

if (speed >= 8) {

speed = 8;

}

// 修改位置

birdImg.style.top = birdImg.offsetTop + speed + 'px';

// 判断是否碰到地面

if (birdImg.offsetTop + birdImg.clientHeight >= 423) {

// 死了

gameOver();

}

}

//定义函数小鸟上升

function birdUp() {

// 修改图片

birdImg.src = 'img/up_bird.png';

// 修改速度

speed -= 0.5;

// 当 speed 小于 0 时, 就会下落

if (speed < 0) {

// 清除小鸟上升的计时器

clearInterval(birdUpTimer);

// 小鸟下落

speed = 0;

birdDownTimer = setInterval(birdDown, 30);

}

// 修改位置

birdImg.style.top = birdImg.offsetTop - speed + 'px';

// 上升的极限

if (birdImg.offsetTop <= 0) {

// 死了

gameOver();

}

}

//点击屏幕的方法

function clickGame() {

// 播放音乐

bulletMusic.play();

// 清除计时器

clearInterval(birdDownTimer);

clearInterval(birdUpTimer);

// 小鸟上升

speed = 8;

birdUpTimer = setInterval(birdUp, 30);

}

// 游戏结束

function gameOver() {

// 播放音乐

gameOverMusic.play();

// 停止背景音乐

gameMusic.pause();

// 清除计时器

var end = setInterval(function() {}, 1);

for (var i = 1; i <= end; i++) {

clearInterval(i);

}

// 显示结束菜单

endmenu.style.display = 'block';

// 提升 结束菜单 的层级

endmenu.style.zIndex = 1;

gameDiv.onclick = null;

// 当前分数

currentSpan.innerHTML = num;

// 最高分

// localStorage 本地存储

if (localStorage.bestScroe) {

var maxScore = localStorage.bestScroe > num ? localStorage.bestScroe : num;

bestSpan.innerHTML = maxScore;

localStorage.bestScroe = maxScore;

} else {

bestSpan.innerHTML = num;

localStorage.bestScroe = num;

}

}

</script>

</html>