文档结构如下
其中tool文件中只使用了随机数，audio中是存放的音乐文件，images中是己方和敌方飞机的图片。
HTML部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/game.css" > </head> <body> <section> <input type="button" value="GAME START" id="btn"> <div id="socre"> <p id="num">当前分数为：</p> <p id="historynum">历史最高:</p> </div> </section> <script src="js/tool.js"></script> <script src="js/game.js"></script> </body> </html>
CSS部分
section{
background-image: url(../material/images/startBG.png);
background-repeat: no-repeat;
background-size: 320px,570px;
width: 320px;
height: 570px;
margin: auto;
margin-top: 30px;
position: relative;
overflow: hidden;
}
section>input{
width: 150px;
position: absolute;
bottom: 65px;
left: 85px;
}
#socre{
display: none;
}JS部分
主要是通过类方法创建敌机和我方飞机，再通过类的继承给予小/中/大/boss等敌机属性和方法。
const section = document.querySelector("section");
const enemy = document.getElementsByClassName("enemys");
let [flag1, flag2, flag3, flag4] = [false, false, false, false];
//小飞机
let splane;
//中飞机
let mplane;
//大飞机
let bplane;
//boss
let boss;
let shoot;
let bossshoot;
//得分
let number;
let move1;
//本地获取数据
let arr = localStorage.getItem("scort");
arr = JSON.parse(arr);
//音频
var mp3;
var gameover;
var bossrun;
//游戏开始
btn.addEventListener("click", function () {
//console.log(gameover);
if (gameover) {
gameover.pause();
}
mp3 = "./material/audio/bgm.mp3";
mp3 = new Audio(mp3);
mp3.play(); //播放mp3这个音频对象
//计算分数
number = 0;
num.innerText = `当前分数为：0`;
//从本地获取分数
arr = localStorage.getItem("scort");
arr = JSON.parse(arr);
const newmyplane = document.getElementById("myplane");
if (newmyplane) {
section.removeChild(newmyplane)
}
//判断本地是否有数据
if (arr == null) {
historynum.innerText = `历史最高：0`
} else {
historynum.innerText = `历史最高：${arr}`
}
//得分面板
socre.style.display = "block";
btn.style.display = "none";
//更改背景
section.style.backgroundImage = "url(./material/images/background_1.png)";
//实例化自身飞机
let myplane = new Myplane(0, 127);
//实例化敌机
splane = setInterval(
function () {
let smallenemys = new Smallenemys(random(0, 286), "material/images/enemy1_fly_1.png", -24, 1);
}, 1000)
mplane = setInterval(
function () {
let midenemys = new Midenemys(random(0, 274), "material/images/enemy3_fly_1.png", -60, 3);
}, 6000)
bplane = setInterval(
function () {
let bigenemys = new Bigenemys(random(0, 210), "material/images/enemy2_fly_1.png", -164, 10);
}, 10000)
boss = setInterval(
function () {
let boss = new Bossenemys(random(0, 210), "material/images/boss.png", -118, 20);
bossrun = "./material/audio/bossrun.mp3";
bossrun = new Audio(bossrun);
bossrun.play(); //播放mp3这个音频对象
//延迟器
setTimeout(() => {
bossrun.pause();
}, 3000)
}, 50000)
});
//己方飞机
class Myplane {
constructor(firstbot, firstleft) {
this.node = document.createElement("img");
// console.log(this.node);
this.firstbot = firstbot;
this.firstleft = firstleft;
this.init();
}
init() {
this.create();
this.render();
this.action();
this.crash();
shoot = setInterval(() => {
let bullet = new Bullet(this.firstbot + 80, this.firstleft + 31);
num.innerText = `当前分数为：${number}`
}, 230)
}
render() {
Object.assign(this.node.style, {
position: `absolute`,
bottom: `${this.firstbot}px`,
left: `${this.firstleft}px`,
})
}
create() {
this.node.setAttribute('src', 'material/images/myPlane.gif');
this.node.setAttribute('id', 'myplane')
section.appendChild(this.node);
}
action() {
//键盘按下
document.addEventListener("keydown", (event) => {
if (this.move) {
this.move(event);
}
});
//键盘抬起
document.addEventListener("keyup", function (event) {
switch (event.key) {
case "w":
flag1 = false;
break;
case "a":
flag2 = false;
break;
case "s":
flag3 = false;
break;
case "d":
flag4 = false;
break;
}
})
}
//移动
move(event) {
switch (event.key) {
case "w":
flag1 = true;
break;
case "a":
flag2 = true;
break;
case "s":
flag3 = true;
break;
case "d":
flag4 = true;
break;
}
if (move1) {
clearInterval(move1)
}
move1 = setInterval(() => {
//左侧边框
if (flag2) {
if (parseInt(getComputedStyle(this.node).left) <= 0) {
this.firstleft = 0;
}
this.firstleft -= 2;
this.render()
}
//上侧边框
else if (flag1) {
this.firstbot += 2;
if (parseInt(getComputedStyle(this.node).bottom) >= 490) {
this.firstbot = 490;
}
this.render()
}
//右侧边框
else if (flag4) {
if (parseInt(getComputedStyle(this.node).left) >= 255) {
this.firstleft = 255;
}
this.firstleft += 2;
this.render()
}
//下侧边框
else if (flag3) {
if (parseInt(getComputedStyle(this.node).bottom) <= 0) {
this.firstbot = 0;
}
this.firstbot -= 2;
this.render()
}
this.render()
}, 10)
}
crash() {
let time = setInterval(() => {
let bottom = parseInt(getComputedStyle(this.node).bottom);
let left = parseInt(getComputedStyle(this.node).left);
for (let item of enemy) {
//碰撞判断
if (bottom <= parseInt(getComputedStyle(item).bottom) + parseInt(getComputedStyle(item).height) &&
bottom >= parseInt(getComputedStyle(item).bottom) - parseInt(getComputedStyle(this.node).height) &&
left >= parseInt(getComputedStyle(item).left) - parseInt(getComputedStyle(this.node).width) &&
left <= parseInt(getComputedStyle(item).left) + parseInt(getComputedStyle(item).width)) {
this.node.setAttribute('src', 'material/images/本方飞机爆炸.gif');
this.move = null;
//游戏结束时清除除自身外飞机
for (let item1 of enemy) {
item1.style.display = 'none';
}
clearInterval(bossshoot);
clearInterval(time);
clearInterval(splane);
clearInterval(mplane);
clearInterval(bplane);
clearInterval(shoot);
clearInterval(boss);
mp3.pause();
gameover = "./material/audio/gameover.mp3";
gameover = new Audio(gameover);
gameover.play(); //播放mp3这个音频对象
if (arr < number) {
localStorage.setItem('scort', JSON.stringify(number));
historynum.innerText = `历史最高：${number}`;
}
btn.style.display = "block";
// alert("游戏结束");
// location.reload(true);
}
}
}, 10)
}
};
//子弹类
class Bullet {
constructor(firstbot, firstleft) {
this.node = document.createElement("img");
this.firstbot = firstbot;
this.firstleft = firstleft;
this.init();
// console.log(this.firstbot);
}
init() {
this.create();
this.render();
this.move();
this.crash();
}
create() {
this.node.setAttribute('src', 'material/images/bullet1.png');
section.appendChild(this.node);
}
render() {
Object.assign(this.node.style, {
position: `absolute`,
bottom: `${this.firstbot}px`,
left: `${this.firstleft}px`,
})
}
move() {
let time = setInterval(() => {
this.crash();
this.firstbot += 2;
if (this.firstbot >= 550 || getComputedStyle(this.node).display == 'none') {
section.removeChild(this.node);
clearInterval(time);
}
this.render();
}, 10);
}
//碰撞
crash() {
//获取所有敌机
const enemy = document.getElementsByClassName("enemys");
//console.log(enemy);
let bottom = parseInt(getComputedStyle(this.node).bottom);
let left = parseInt(getComputedStyle(this.node).left);
for (let item of enemy) {
//子弹撞击敌方飞机
if (bottom <= parseInt(getComputedStyle(item).bottom) + parseInt(getComputedStyle(item).height) &&
bottom >= parseInt(getComputedStyle(item).bottom) - parseInt(getComputedStyle(this.node).height) &&
left >= parseInt(getComputedStyle(item).left) - parseInt(getComputedStyle(this.node).width) &&
left <= parseInt(getComputedStyle(item).left) + parseInt(getComputedStyle(item).width)) {
// 停止子弹碰撞计时器
this.node.style.display = "none";
item.dataset.id--;
if (item.dataset.id < 0) {
item.dataset.id = 0;
}
if (parseInt(getComputedStyle(item).width) == 34) {
if (item.dataset.id == 0) {
//图片替换
item.setAttribute('src', 'material/images/小飞机爆炸.gif');
//延迟器
setTimeout(() => {
item.style.display = "none";
}, 300)
number += 1;
}
}
if (parseInt(getComputedStyle(item).width) == 46) {
if (item.dataset.id == 0) {
item.setAttribute('src', 'material/images/中飞机爆炸.gif');
setTimeout(() => {
item.style.display = "none";
}, 300)
number += 5;
} else {
item.setAttribute('src', 'material/images/中飞机挨打.png');
}
}
if (parseInt(getComputedStyle(item).width) == 110) {
if (item.dataset.id == 0) {
item.setAttribute('src', 'material/images/大飞机爆炸.gif');
//大飞机爆炸
let bigboom = "./material/audio/bigboom.mp3";
bigboom = new Audio(bigboom);
bigboom.play(); //播放mp3这个音频对象
setTimeout(() => {
item.style.display = "none";
bigboom.pause();
}, 300)
number += 30;
} else {
item.setAttribute('src', 'material/images/大飞机挨打.png');
}
}
//boss爆炸
if (parseInt(getComputedStyle(item).width) == 160) {
if (item.dataset.id == 0) {
item.setAttribute('src', 'material/images/boomx.png');
clearInterval(bossshoot);
let bossover = "./material/audio/bossover.mp3";
bossover = new Audio(bossover);
bossover.play(); //播放mp3这个音频对象
setTimeout(() => {
item.style.display = "none";
bossover.pause();
mp3.play();
}, 300)
number += 200;
}
}
}
}
}
}
//敌机
class Enemys {
constructor(x, url, height) {
this.node = document.createElement("img");
this.x = x;
this.y = 546;
this.url = url;
this.height = height;
this.init();
}
init() {
this.create();
this.render();
this.move();
}
create() {
this.node.setAttribute('src', this.url);
this.node.setAttribute('class', "enemys");
section.appendChild(this.node);
}
render() {
Object.assign(this.node.style, {
position: `absolute`,
bottom: `${this.y}px`,
left: `${this.x}px`,
})
}
move() {
let enemytime = setInterval(() => {
this.y -= 1;
if (this.y <= this.height || getComputedStyle(this.node).display == 'none') {
section.removeChild(this.node);
clearInterval(enemytime)
} else {
this.render();
}
}, 10);
}
};
//小飞机
class Smallenemys extends Enemys {
constructor(x, url, height, hp) {
super(x, url, height);
this.hp = hp;
this.node.dataset.id = hp;
}
};
//中飞机
class Midenemys extends Enemys {
constructor(x, url, height, hp) {
super(x, url, height)
this.hp = hp;
this.node.dataset.id = hp;
}
};
//大飞机
class Bigenemys extends Enemys {
constructor(x, url, height, hp) {
super(x, url, height)
this.hp = hp;
this.node.dataset.id = hp;
}
};
//boss
class Bossenemys extends Enemys {
constructor(x, url, height, hp) {
super(x, url, height)
this.hp = hp;
this.node.dataset.id = hp;
this.bottom = 570;
this.left = 80;
this.render();
this.move();
this.shoot();
}
render() {
Object.assign(this.node.style, {
position: `absolute`,
bottom: `${this.bottom}px`,
left: `${this.left}px`,
})
}
move() {
let i = -2;
let time = setInterval(() => {
this.bottom--;
if (this.bottom <= 452) {
clearInterval(time);
}
this.render();
}, 10);
let newaction = setTimeout(() => {
if (parseInt(getComputedStyle(this.node).bottom) <= 452) {
let transverse = setInterval(() => {
this.left += i;
if (this.left <= 0) {
i = 2;
}
if (this.left >= 160) {
i = -2;
}
this.render();
}, 50)
}
}, 1000)
}
shoot() {
bossshoot = setInterval(() => {
let midenemys = new Midenemys(this.left + 56, "material/images/fire.png", -117, 1);
}, 5000)
}
};
