javascript实现飞机大战小游戏
本文实例为大家分享了javascript实现飞机大战游戏的具体代码，供大家参考，具体内容如下
文档结构如下
其中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" rel="external nofollow" > </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)
}
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript实现飞机大战游戏
本文实例为大家分享了canvas ,js 实现一个简单的飞机大战,供大家参考,具体内容如下 预览图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
-
js实现飞机大战小游戏
本文实例为大家分享了js实现飞机大战游戏的具体代码,供大家参考,具体内容如下 1.html代码 <html> <head> <title></title> <meta http-equiv="content" content="text/html" charset="utf-8"/> <link rel="stylesheet" type="text/
-
原生JS实现飞机大战小游戏
本文实例为大家分享了JS实现飞机大战小游戏的具体代码,供大家参考,具体内容如下 <html> <head> <title> 飞机大战 </title> <style type="text/css"> *{margin:0;padding:0;font-family:"Microsoft yahei"} body{overflow:hidden;;} </style> </head>
-
JS面向对象实现飞机大战
本文实例为大家分享了JS面向对象实现飞机大战的具体代码,供大家参考,具体内容如下 主页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .bg{ width: 530px; height: 600px; position: relative; ma
-
JavaScript原生编写《飞机大战坦克》游戏完整实例
先来看看开始的界面图 实现思路: 1.打开页面,背景开始走动: 2.点击开始,飞机开始不断发射子弹,敌人随机出现在上方: 3.当敌人碰到子弹,敌人消失: 4.当敌人和飞机相遇,飞机死亡,结束游戏: html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>飞机大战</title> <link r
-
js实现飞机大战游戏
本文实例为大家分享了js实现飞机大战游戏的具体代码,供大家参考,具体内容如下 CSS部分的代码: <style> * { margin: 0px; padding: 0px; } canvas{ border: 1px solid #000; display: block; margin: auto; } </style> JavaScript代码: <!-- 先创建一个画布 --> <canvas id="canvas" width=&quo
-
用JS实现飞机大战小游戏
本文实例为大家分享了JS实现飞机大战小游戏的具体代码,供大家参考,具体内容如下 小的时候玩的飞机大战感觉还蛮神奇,今天自己就学着做了一个 先制作好要做好的几步以及背景样式 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var start = 0; // 开始阶段 var starting = 1; // 开始的加载阶段 var running =
-
javascript实现飞机大战小游戏
本文实例为大家分享了javascript实现飞机大战游戏的具体代码,供大家参考,具体内容如下 文档结构如下 其中tool文件中只使用了随机数,audio中是存放的音乐文件,images中是己方和敌方飞机的图片. HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X
-
javascript实现简单飞机大战小游戏
本文实例为大家分享了javascript实现飞机大战小游戏的具体代码,供大家参考,具体内容如下 效果图 html文件 <!DOCTYPE html><html lang='zh'><head> <meta charset='UTF-8'> <title>mm</title> <link rel="stylesheet" href="./css/index.css">
-
java实战之飞机大战小游戏(源码加注释)
一.工程文件 二.Main.java 主函数,实现类 package ui; //主函数实现 public class Main { public static void main(String[] args) { //创建窗体 GameFrame frame = new GameFrame(); //创建面板 GamePanel panel = new GamePanel(frame); //调用开始游戏的方法启动游戏 panel.action(); //将面板加入到窗体中 frame.add
-
基于Java语言在窗体上实现飞机大战小游戏的完整步骤
目录 小组项目 模块需求描述 总体开发思想 功能实现 1.登录与结束界面 2.播放音乐 3.子弹 运行测试 登陆界面 发射子弹 总结 小组项目 飞机大战:用 Java 语言在窗体上实现飞机大战小游戏,运行程序后,出现一个窗体,在窗体上用鼠标控制英雄机的移动,通过子弹打击敌机进行分数的计算,以及英雄机血量的计算等. 主要模块:登陆界面.音乐.子弹.敌机.英雄机.背景图.结束界面.BOSS 机.分数计算.血量计算. 负责模块:登陆界面.音乐.子弹.结束界面. 模块需求描述 登陆界面:运行程序后,弹出
-
C语言实现飞机大战小游戏完整代码
大一课设做的飞机大战,可以进行登入和注册,这个是利用单链表做的,源代码已经给出,这个是最基本的飞机大战模式,我设置了几个功能,比如排行榜之类的.排行榜是用结构体数组做的,已及冒泡排序,并且在文件里保存信息.比较简单. 这个是注册页面规范: 这个是登入页面: 游戏菜单: 飞机大战页面: 话不多说,直接上代码 以下是源代码 #include"stdio.h" #include"windows.h" //用于获取窗口的句柄与屏幕控制 #include"co
-
Vue实现飞机大战小游戏
目录 使用 Vue 开发一个简略版的飞机大战小游戏 一.实现思路 二.所需知识点 三.实现步骤 使用 Vue 开发一个简略版的飞机大战小游戏 如题,假设你为了向更多访问你博客的人展示你的技术,你决定小试身手开发一个飞机大战小游戏.功能: 开始游戏前用户名必填,玩家可以发射子弹,敌军与行星随机出现,鼠标可操控玩家移动,敌军可发射子弹 一.实现思路 如题所述: 玩家可操控玩家飞机可发射子弹,敌军与行星随机生成: 这意味着我们需要一个单独的玩家飞机dom,以及敌军.行星与子弹 用 vue 循环生成的3
-
C语言实现飞机大战小游戏
本文实例为大家分享了C语言实现飞机大战小游戏的具体代码,供大家参考,具体内容如下 技术原型 1.void gotoxy(int x, int y) 函数,该函数可以使光标去到(x,y)的位置进行打印:2.链表,用于存储状态:3.windows.h中有非阻塞输入,_kbhit():4.随机生成数:5.视觉暂留:6.碰撞检测:7.清屏函数:8.设置边界: 技术路线 1.设置一个边界:2.维护一个子弹的列表:3.维护一个敌机的列表:4.初始化飞机的位置:5.每隔一秒钟生成一架敌机,生成位置x坐标随机,
-
C++基于EasyX框架实现飞机大战小游戏
正式使用Easyx之前,你需要先安装他!! EasyX 2022 版 (2022-9-1 更新) - EasyX 选择合适的版本安装 安装结束后就可以开始敲代码啦! 这里作者使用的是Visual Studio 2022所以安装EasyX_20220901版本 启动Visual Studio 2022,新建一个空项目 这是工程目录: 首先来看看Bullet(子弹)类 头文件: #pragma once class Bullet { public: Bullet(int x, int y, int