HTML

<!DOCTYPE html> 需要素材可以联系我哦!

<html>

<head>

</style>

</head>

<body>

</div>

</div>

</div>

</div>

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

</li>-->

</ul>

</div>

</body>

</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;

}

会飞的小鸟flyBird

HTML

CSS

JS

猜你喜欢