提示:未经本人同意,请不要转载哦。
一个简单易懂js飞翔的小鸟游戏
代码写的可能不是很好,可以学个思路
由于管道图片没找到,就自己搜了一张
css排版部分
* {
margin: 0;
padding: 0;
}
#box {
width: 343px;
height: 480px;
position: relative;
overflow: hidden;
}
#gameover {
width: 343px;
height: 480px;
background: red;
position: absolute;
z-index: 4;
text-align: center;
font-size: 30px;
color: #fff;
padding-top: 150px;
display: none
}
#gameover #btn {
width: 100px;
height: 50px;
}
#bird {
position: absolute;
top: 200px;
left: 10px;
z-index: 2;
}
#bg img {
float: left;
}
#bg {
width: 686px;
position: absolute;
}
#box .guanUp {
position: absolute;
z-index: 2
}
#box .guanDown {
position: absolute;
z-index: 2
}
#shia {
position: absolute;
left: 300px;
;
z-index: 3;
font-size: 30px;
color: #ffff
}
body部分
也是一个很简单的排版
<div id="box">
<div id="shia">
<span id="shijian">0</span>s
</div>
<div id="gameover">
<p>游戏结束 </p>
<button id="btn">重开</button>
<p id="">
您坚持了 <span id="overtime">0</span>s
</p>
</div>
<img src="img/bird0.png" id='bird'>
<div id="bg">
<img src="img/bg.jpg" alt="">
<img src="img/bg.jpg" alt="">
</div>
</div>
js部分讲解
点击跳跃
定义小鸟速度 :speed = 0,每25mm让速度增加0.5,当降落超过地面的高度,清除计时器,超过屏幕高度,就为0。跳跃时切换up,相反切换down图片
小鸟跳起来清除默认事件,否则会出现能把图片选中,并且清除计时器,重新调用。
还有一个简答的随机数
function move() {
setBirdMove = setInterval(function () {
speed += 0.5
a = bird.offsetTop + speed
if (a >= 450) {
a = 450
clearInterval(setBirdMove)
setBirdMove = null
speed = 0
} else if (a < 0) {
a = 0
}
//跳跃换图片
if (speed > 0) {
bird.src = "img/down_bird1.png"
} else {
bird.src = "img/up_bird1.png"
}
bird.style.top = a + "px"
}, 25)
}
move()
//按下小鸟挑起
window.onmousedown = function (e) {
e.preventDefault()
clearInterval(setBirdMove)
move()
speed = -randFn(4, 8)
}
//随机数
function randFn(min, max) {
return parseInt(Math.random() * (max - min + 1) + min);
}
背景移动
定义速度为bgSpeed图片移动做成简单的无缝轮播。
//背景移动
var bgSpeed = 0
var bg_move
bg_move = setInterval(function () {
bg.style.left = -bgSpeed + "px"
bgSpeed++
if (bgSpeed == 343) {
bgSpeed = 0
}
}, 20)
添加管道
创建Img标签,随机高度,固定的宽度,以及首次出现的位置,并写一个计时器,每500mm发动一次
//添加管道
function addguanUp() {
guanUp = document.createElement("img")
guanUp.className = "guanUp"
guanUp.style.bottom = 0
ranWid = randFn(140, 215)
guanUp.style.height = ranWid + "px"
guanUp.style.width = 80 + "px"
guanUp.style.left = "340px"
guanUp.src = "img/down_pipe.png"
box.appendChild(guanUp)
guanDown = document.createElement("img")
guanDown.className = "guanDown"
guanDown.style.top = 0
guanDown.style.left = "340px"
ranWid = randFn(140, 215)
guanDown.style.height = ranWid + "px"
guanDown.style.width = 80 + "px"
guanDown.src = "img/up_pipe.png"
box.appendChild(guanDown)
}
//添加管道
setadd = setInterval(function () {
addguanUp()
}, 500)
管子移动碰撞检测
定义速度speedups,获取上管道,下管道的标签,然后获取标签的top,left,height,width。当管道超出屏幕,就删除管道。管道的top值与width,为一个区间,left与height为一个区间,就可以得到管道的面积,当小鸟碰到管道就结束游戏。
//管子移动
var speedups = 1
guanmove = setInterval(function () {
ups = document.querySelectorAll("#box .guanUp")
downs = document.querySelectorAll("#box .guanDown")
//鸟的X y距离
birdTop = bird.offsetTop
birdLeft = bird.offsetLeft
for (var i = 0; i < ups.length; i++) {
ups[i].style.left = ups[i].offsetLeft - speedups + 'px'
uptop = ups[i].offsetTop //管道距离
upgao = ups[i].offsetHeight
upleft = ups[i].offsetLeft
upkuan = ups[i].offsetWidth
if (ups[i].offsetLeft < -70) {
box.removeChild(ups[i])
}
if (birdLeft >= upleft && upleft <= upleft + upkuan && birdTop >= uptop && birdTop <= uptop +
upgao) {
gameover.style.display = "block"
}
}
for (var i = 0; i < downs.length; i++) {
downs[i].style.left = downs[i].offsetLeft - speedups + 'px'
downtop = downs[i].offsetTop //管道距离
downgao = downs[i].offsetHeight
downleft = downs[i].offsetLeft
downkuan = downs[i].offsetWidth
if (downs[i].offsetLeft < -70) {
box.removeChild(downs[i])
}
if (birdLeft >= downleft && downleft <= downleft + downkuan && birdTop >= downtop && birdTop <
downtop + downgao) {
gameover.style.display = "block"
}
}
}, 1)
持续时间
用来记录游戏的持续时间。
//时间
overtimet = setInterval(function () {
// overtime.innerHTML++
shijian.innerHTML++
overtime.innerHTML = shijian.innerHTML
}, 1000)
点击重新开始游戏
做个一个很简单的刷新网页。
btn.onclick = function () {
history.go(0)
}