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)
    }
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2022-05-07

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实现飞机大战游戏

本文实例为大家分享了canvas ,js 实现一个简单的飞机大战,供大家参考,具体内容如下 预览图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"

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原生编写《飞机大战坦克》游戏完整实例

先来看看开始的界面图 实现思路: 1.打开页面,背景开始走动: 2.点击开始,飞机开始不断发射子弹,敌人随机出现在上方: 3.当敌人碰到子弹,敌人消失: 4.当敌人和飞机相遇,飞机死亡,结束游戏: html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>飞机大战</title> <link r

javascript实现的猜数小游戏完整实例代码

本文实例讲述了javascript实现的猜数小游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

python pygame模块编写飞机大战

本文实例为大家分享了python pygame模块编写飞机大战的具体代码,供大家参考,具体内容如下 该程序没有使用精灵组,而是用列表存储对象来替代精灵组的动画效果.用矩形对象的重叠来判断相撞事件.该程序可以流畅运行,注释较为详细,希望可以帮助大家. import pygame from pygame.locals import * from sys import exit import time import random # 创建子弹类,把子弹的图片转化为图像对象,设定固定的移动速度 clas

python飞机大战pygame游戏框架搭建操作详解

本文实例讲述了python飞机大战pygame游戏框架搭建操作.分享给大家供大家参考,具体如下: 目标 明确主程序职责 实现主程序类 准备游戏精灵组 01. 明确主程序职责 回顾 快速入门案例,一个游戏主程序的 职责 可以分为两个部分: 游戏初始化 游戏循环 根据明确的职责,设计 PlaneGame 类如下: 提示 根据 职责 封装私有方法,可以避免某一个方法的代码写得太过冗长 如果某一个方法编写的太长,既不好阅读,也不好维护! 游戏初始化 -- init() 会调用以下方法: 游戏循环 --

python飞机大战 pygame游戏创建快速入门详解

本文实例讲述了python飞机大战 pygame游戏创建.分享给大家供大家参考,具体如下: 目标 项目准备 使用 pygame 创建图形窗口 理解 图像 并实现图像绘制 理解 游戏循环 和 游戏时钟 理解 精灵 和 精灵组 项目准备 新建 飞机大战 项目 新建一个 hm_01_pygame入门.py 导入 游戏素材图片 游戏的第一印象 把一些 静止的图像 绘制到 游戏窗口 中 根据 用户的交互 或其他情况,移动 这些图像,产生动画效果 根据 图像之间 是否发生重叠,判断 敌机是否被摧毁 等其他情

javascript+css3开发打气球小游戏完整代码

效果知识点: css3画气球, 自定义属性运用,随机阵列, DOM元素操作,高级回调函数与参数复传,动态布局,鼠标事件,定时器运用,CSS3新增样式等. css代码如下: <style> {margin:0;padding:0;} body{background:#434343;overflow:hidden} .balloon{ position:absolute; left:0; top:0; margin:auto; width:160px; height:160px; 圆角: 左上 右

python飞机大战pygame游戏之敌机出场实现方法详解

本文实例讲述了python飞机大战pygame游戏之敌机出场实现方法.分享给大家供大家参考,具体如下: 目标 使用 定时器 添加敌机 设计 Enemy 类 01. 使用定时器添加敌机 运行 备课代码,观察 敌机的 出现规律: 游戏启动后,每隔 1 秒 会 出现一架敌机 每架敌机 向屏幕下方飞行,飞行 速度各不相同 每架敌机出现的 水平位置 也不尽相同 当敌机 从屏幕下方飞出,不会再飞回到屏幕中 1.1 定时器 在 pygame 中可以使用 pygame.time.set_timer() 来添加

原生JS实现的跳一跳小游戏完整实例

本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成动作并进行判断: 首先po一下代码: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie

python实现飞机大战小游戏

本文实例为大家分享了python实现飞机大战的具体代码,供大家参考,具体内容如下 初学Python,写了一个简单的Python小游戏. 师出bilibili某前辈 pycharm自带了第三方库pygame,安装一下就好了,很方便. 虽然很多大佬已经给出了步骤,我这里还是啰嗦一下,也为了自己巩固一下. 上图: 这里再给出代码的逻辑架构 plane_main.py import pygame from plane_sprites import * class PlaneGame(object): "