javascript实现飞机大战小游戏

Ianthe ·

更新时间:2024-09-21

· 250 次阅读

本文实例为大家分享了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" >
</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

1024 个赞