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>