效果图
html部分代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/main.css">
<style></style>
</head>
<body>
<div id="box">
<div id="scoreBoard">
<img src="img/0.jpg" alt="">
</div>
<div id="header">
<img src="img/head.jpg" alt="">
<div>
<img src="img/bird0.png" alt="">
</div>
</div>
<img src="img/bird1.png" alt="" id="flyBird">
<ul id="pipeBox"></ul>
<img src="img/start.jpg" alt="" id="start">
<div id="gameOver">
<img src="img/game_over.jpg" alt="">
<br>
<br>
<br>
<img src="img/ok.jpg" alt="" id="ok">
</div>
<div id="slider">
<img src="img/slider.jpg" alt="">
<img src="img/slider.jpg" alt="">
</div>
</div>
<audio src="source/game_music.mp3" loop></audio>
<audio src="source/bullet.mp3"></audio>
<audio src="source/死亡2.mp3">
当前浏览器不支持audio
</audio>
</body>
</html>
<script type="text/javascript" src="js/main2.js"></script>
css部分代码
#box {
width: 343px;
height: 480px;
background: url(../img/bg.jpg);
margin: 100px auto 0;
position: relative;
overflow: hidden;
}
#scoreBoard {
width: 100%;
/* background-color: red; */
position: absolute;
top: 30px;
text-align: center;
}
@keyframes header {
from {
top: 75px;
}
50% {
top: 110px;
}
to {
top: 75px;
}
}
#header {
width: 80%;
position: absolute;
left: 10%;
top: 75px;
/* background-color: lightblue; */
animation: header 2s linear infinite;
}
#header > div {
position: absolute;
right: 10px;
top: 20px;
background: url(../img/bird1.png) no-repeat;
}
@keyframes bird {
from {
opacity: 1;
}
50% {
opacity: 0;
}
to {
opacity: 1;
}
}
#header > div > img {
animation: bird 1s linear infinite;
}
#start {
position: absolute;
top: 300px;
left: 129px;
}
@keyframes slider {
from {
left: 0;
}
to {
left: -343px;
}
}
#slider {
width: 999px;
position: absolute;
left: 0;
top: 422px;
animation: slider 1.5s linear infinite;
}
#slider > img {
float: left;
}
#flyBird {
display: none;
position: absolute;
top: 100px;
left: 50px;
}
#pipeBox {
width: 100%;
height: 422px;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
}
#pipeBox > li {
position: absolute;
left: 400px;
width: 62px;
height: 100%;
/* background: lightgreen; */
}
#pipeBox > li > div:nth-child(1) {
background: url("../img/up_mod.png");
position: absolute;
width: 100%;
}
#pipeBox > li > div:nth-child(1) > img {
position: absolute;
bottom: 0;
}
#pipeBox > li > div:nth-child(2) {
position: absolute;
bottom: 0;
background: url("../img/down_mod.png");
}
@keyframes over {
from {
top: -200px;
}
50% {
top: 0px;
}
to {
top: 150px;
}
}
#gameOver {
position: absolute;
text-align: center;
width: 100%;
animation: over 3s linear forwards;
display: none;
}
js部分代码
!function () {
function init() {
const start = document.getElementById('start')
const header = document.getElementById('header')
const flyBird = document.getElementById('flyBird')
const box = document.getElementById('box')
const pipeBox = document.getElementById('pipeBox')
const scoreBoard=document.getElementById('scoreBoard')
const gameOver=document.getElementById('gameOver')
const audios = document.getElementsByTagName('audio')
ok.onclick=function(){
window.location.reload()
}
let speed = 0
const maxSpeed = 8
let downTimer = null
let upTimer = null
let pipeTimer = null
let crashTimer=null
let scoreNum=0
function birdDown() {
flyBird.src = 'img/down_bird0.png'
speed = speed < maxSpeed ? speed + .3 : maxSpeed
flyBird.style.top = `${flyBird.offsetTop + speed}px`//模板字符串（es6）
}
function rand(min, max) {
return Math.random() * (max - min) + min
}
function addScore() {
console.log('jiafen')
//scoreNum++
const scoreStr=++scoreNum+''
//const scoreStr='1234567896'
scoreBoard.innerHTML=''
for(i of scoreStr){
console.log(i)
scoreBoard.innerHTML=`
${scoreBoard.innerHTML}
<img src="img/${i}.jpg">
`
}
}
function createPipe() {
const li = document.createElement('li')
const topH = rand(60, 240)
const bottomH = 422 - 122 - topH
li.innerHTML = `
<div style="height: ${topH}px">
<img src="img/up_pipe.png" alt="">
</div>
<div style="height: ${bottomH}px">
<img src="img/down_pipe.png" alt="">
</div>
`
li.lock = false
li.appearTimer = setInterval(function () {
if (!li.lock && li.offsetLeft + li.offsetWidth < flyBird.offsetLeft) {
addScore()
li.lock=true
}
li.style.left = `${li.offsetLeft - 3}px`
if (li.offsetLeft < -70) {
pipeBox.removeChild(li)
}
}, 30)
pipeBox.appendChild(li)
}
function death(){
//
gameOver.style.display='block'
}
function isCrash(bird,pipe){
return !(bird.offsetTop+bird.offsetHeight<pipe.offsetTop||
pipe.offsetTop+pipe.offsetHeight<bird.offsetTop||
bird.offsetLeft+bird.offsetWidth<pipe.parentElement.offsetLeft||
pipe.parentElement.offsetLeft+pipe.offsetWidth<bird.offsetLeft)
}
start.onclick = function (event) {
event.cancelBubble = true
//BGM
//audios[0].play()
//start,header消失
start.style.display = 'none'
header.style.display = 'none'
//flybird出现
flyBird.style.display = 'block'
//小鸟出现后下降
downTimer = setInterval(birdDown, 30)
//点击box小鸟上升
box.onclick = function () {
flyBird.src = 'img/up_bird0.png'
clearInterval(downTimer)
clearInterval(upTimer)
speed = maxSpeed
upTimer = setInterval(function () {
speed = speed - .7
if (speed <= 0) {
clearInterval(upTimer)
downTimer = setInterval(birdDown, 30)
}
flyBird.style.top = `${flyBird.offsetTop - speed}px`
}, 30)
}
//出现管道
pipeTimer = setInterval(createPipe, 3000)
//碰撞检测
crashTimer=setInterval(function () {
//上下是否碰撞
if(flyBird.offsetTop<=0||
flyBird.offsetTop+flyBird.offsetHeight>=
422){
death()
}
//跟所有管道是否碰撞
const lis=pipeBox.getElementsByTagName('li')
for(li of lis){
if(isCrash(flyBird,li.children[0])||isCrash(flyBird,li.children[1])){
death()
}
}
},30)
}
}
init()
}()