HTML
<!DOCTYPE html> 需要素材可以联系我哦!
<html>
<head>
<meta charset="utf-8" />
<title>02会飞的鸟</title>
<link rel="stylesheet" type="text/css" href="css/会飞的小鸟.css"/>
<style type="text/css">
</style>
</head>
<body>
<div id="gameFace">
<!--游戏标题-->
<div id="head">
<img src="img/bird.png"/>
</div>
<!--开始菜单-->
<div id="startMenu">
<img src="img/start.jpg" id="start"/>
</div>
<!--结束菜单-->
<div id="endMenu">
<img src="img/message.jpg"/>
<!--当前分数-->
<span id="currentScore">0</span>
<!--最好分数-->
<span id="bestScore">0</span>
</div>
<!--鸟-->
<img src="img/bird.png" alt="" id="bird" />
<!--分数-->
<div id="score">
<img src="img/0.jpg"/>
</div>
<!--管道-->
<ul id="pipes">
<!--<li class="pipe">
<div class="pipe_top"></div>
<div class="pipe_bottom"></div>
</li>-->
</ul>
<!--音乐-->
<audio id="bulletMusic" src="img/bullet.mp3"></audio>
<audio id="gameMusic" src="img/game_music.mp3"></audio>
<audio id="gameOverMusic" src="img/game_over.mp3"></audio>
</div>
</div>
</body>
<script src="js/flyBird.js" type="text/javascript" charset="utf-8"></script>
</html>
CSS
*{
padding: 0;
margin: 0;
}
img{
vertical-align: top;
}
ul,li{
list-style-type: none;
}
/*游戏界面*/
#gameFace {
width: 343px;
height: 480px;
margin: 20px auto 0;
background: url(../img/bg.jpg) no-repeat;
overflow: hidden;
position: relative;
}
/*标题部分*/
#head{
width: 236px;
height: 77px;
background: url(../img/head.jpg) no-repeat;
position: absolute;
left:50% ;
top: 100px;
margin-left: -118px;
}
#head>img {
position: absolute;
right: 0;
top: 50%;
margin-top: -13px;
/*动画: 关键帧动画*/
animation:birdFly 1s linear infinite ;
}
@keyframes birdFly{
from{
top: 50%;
}
25%{
top: 75%;
}50%{
top: 50%;
}
75%{
top: 25%;
}
to{
top: 50%;
}
}
/*开始菜单*/
#startMenu{
width: 100%;
position: absolute;
top: 280px;
text-align: center;
/*调整层级*/
z-index: 1;
}
#start{
/*修改鼠标形状*/
cursor: pointer;
}
/*结束菜单部分*/
#endMenu{
width: 100%;
font-size:30px;
text-align: center;
position: absolute;
top: 160px;
display: none;
z-index: 10;
}
#currentScore{
position: absolute;
right: 80px;
top: 30px;
}
#bestScore{
position: absolute;
right: 80px;
top: 80px;
}
/*鸟*/
#bird{
position: absolute;
left:62px;
top: 200px;
display: none;
z-index: 1;
}
/*分数*/
#score{
width: 100%;
position: absolute;
top: 0;
text-align: center;
display: none;
//调整层级,让分数不被遮挡
z-index: 1;
}
/*管道*/
#pipes{
height: 100%;
position: relative;
}
.pipe{
width: 62px;
height: 423px;
position: absolute;
}
.pipe_top{
width: 62px;
/*height 将来需要JS 来控制*/
height: 100px;
background: url(../img/up_pipe.png) bottom no-repeat, url(../img/up_mod.png) repeat-y;
position: absolute;
top: 0;
}
.pipe_bottom{
width: 62px;
/*height 将来需要JS 来控制*/
height: 100px;
background: url(../img/down_pipe.png) top no-repeat, url(../img/down_mod.png) repeat-y;
position: absolute;
bottom: 0;
}
JS
/*
* 获取页面元素
*/
//gameFace
var gameFace = document.getElementById("gameFace");
//标题
var headDiv = document.getElementById("head");
//开始菜单
var startMenu = document.getElementById("startMenu");
//开始按钮
var startBtn = document.getElementById("start");
//结束菜单
var endMenu = document.getElementById("endMenu");
//当前分数
var curScore = document.getElementById("currentScore");
//最高分数
var bestScore = document.getElementById("bestScore");
//鸟
var bird = document.getElementById("bird");
//分数
var scoreDiv = document.getElementById("score");
//管道
var pipeUL = document.getElementById("pipes");
//音乐
var bulletMus = document.getElementById("bulletMusic");
var gameMus = document.getElementById("gameMusic");
var overMus = document.getElementById("gameOverMusic");
//定义变量
var birdDownTimer,birdUpTimer;
var num = 0; //存储分数
/*
* 开始游戏按钮绑定点击事件
*/
startBtn.onclick = function(event) {
var even = event || window.event;
//阻断事件传播
even.stopPropagation();
//播放背景音乐
gameMus.loop = "loop";
gameMus.play(); //播放
//隐藏标题 和 开始菜单
headDiv.style.display = "none";
startMenu.style.display = "none";
//显示分数
scoreDiv.style.display = "block";
//生成管道
setInterval(createPipe,3000);
//显示小鸟
bird.style.display = "block";
//小鸟下落
birdDownTimer = setInterval(birdDown,30);
//给 gameFace 关联点击事件
gameFace.onclick = gameFaceClick;
//开始碰撞检测
setInterval(collide,15);
}
//创建管道
function createPipe() {
/*
* 创建 li
*/
var li = document.createElement("li");
li.className = "pipe";
li.style.left = pipeUL.clientWidth + "px";
pipeUL.appendChild(li);
//变量
var doorH = 123;//小鸟可以通过的高度
//管道随机的范围
var minH = 60;
var maxH = li.clientHeight - doorH - minH;
//随机 上管道的高度
var topH = Math.floor(Math.random()*(maxH - minH +1) +minH);
//计算下管道的高度
var bottomH = li.clientHeight - doorH -topH;
//上管道
var topDiv = document.createElement("div");
topDiv.className = "pipe_top";
topDiv.style.height = topH + "px";
li.appendChild(topDiv);
//下管道
var bottomDiv = document.createElement("div");
bottomDiv.className = "pipe_bottom";
bottomDiv.style.height = bottomH + "px";
li.appendChild(bottomDiv);
/*
* 二,让 li 自己动
*/
var x = pipeUL.clientWidth;
var pipeTimer = setInterval(function() {
x--;
li.style.left = x + "px";
//计分
if(x==0){
//改变分数
changeScore();
}
//超出游戏界面
if (x <= -li.clientWidth) {
//删除管道
pipeUL.removeChild(li);
//清除计时器
clearInterval(pipeTimer);
}
}, 15);
}
//改变分数
function changeScore() {
num++;
//删除 img
scoreDiv.innerHTML = "";
//创建img
if (num < 10) {
//个位
var img = document.createElement("img");
img.src = "img/" + num + ".jpg";
scoreDiv.appendChild(img);
} else if(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 < 1000){
} else if(num < 10000){
}
}
//小鸟下落
var speed = 0;
function birdDown() {
//修改图片
bird.src = "img/down_bird.png";
//修改速度
speed += 0.5;
//设置最大速度
if (speed > 8) {
speed = 8;
}
bird.style.top = bird.offsetTop + speed + "px";
//判断是否碰着地面
if (bird.offsetTop + bird.clientHeight >= 423) {
// 游戏结束
gameOver();
}
}
//小鸟上升
function birdUp() {
//修改图片
bird.src = "img/up_bird.png"
//
speed -= 0.5;
//判断速度是否到0
if (speed < 0){
//不再上升
clearInterval(birdUpTimer);
//开始下降
speed = 0;
birdDownTimer = setInterval(birdDown,30);
}
//修改鸟的位置
bird.style.top = bird.offsetTop - speed + "px";
//判断是否到顶
if (bird.offsetTop <= 0) {
gameOver();
}
}
//
//点击gameFace触发的方法
function gameFaceClick() {
//播放声音
bulletMus.play();
//清除下落的计时器
clearInterval(birdDownTimer);
//清除上升的计时器(避免计时器累加).
clearInterval(birdUpTimer);
//抬头往上飞
speed = 8;
birdUpTimer = setInterval(birdUp, 30);
}
//碰撞检测
function collide() {
//获取 li
var lis = pipeUL.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
// li 的大儿子
collidePipe(lis[i].firstElementChild);
//li 的二儿子
collidePipe(lis[i].lastElementChild);
}
}
//碰撞
function collidePipe(pipe) {
//pipe 与 bird
//pipe
var pipeLeft = pipe.offsetParent.offsetLeft;
var pipeRight = pipeLeft + pipe.clientWidth;
var pipeTop = pipe.offsetTop;
var pipeBot = pipeTop + pipe.clientHeight;
// bird
var birdLeft = bird.offsetLeft;
var birdRight = birdLeft + bird.clientWidth;
var birdTop = bird.offsetTop;
var birdBot = birdTop + bird.clientHeight;
// 判断
if (!(birdRight < pipeLeft || birdLeft > pipeRight || birdTop > pipeBot ||birdBot < pipeTop)) {
// 游戏结束
gameOver();
}
}
// 游戏结束
function gameOver () {
//停止背景音乐
gameMus.pause();
//播放游戏结束音乐
overMus.play();
//清除页面所有计时器
var end = setInterval(function() { }, 1);
for (var i = 0; i <=end; i++) {
clearInterval(i);
}
//显示结束菜单
endMenu.style.display = "block";
//分数设置
curScore.innerHTML = num;
bestScore.innerHTML = num;
//清除 gameFace 点击事件
gameFace.onclick = null;
}