javascript飞机大战

最新推荐文章于 2023-03-17 14:59:26 发布

绒尾

最新推荐文章于 2023-03-17 14:59:26 发布

阅读量594

点赞数

文章标签： js 前端

本文链接：https://blog.csdn.net/liu197023/article/details/123646326

版权

文档结构如下

其中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 smal

最低0.47元/天解锁文章

绒尾

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
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="view..
复制链接

扫一扫