飞机大战:html+js

最新推荐文章于 2024-05-07 07:47:23 发布

灰鸦893

最新推荐文章于 2024-05-07 07:47:23 发布

阅读量133

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/qq_56507133/article/details/133903549

版权

效果:

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/plane.css">
</head>
<body>
    <section id="main">
        <div>
            <div id="kill">杀敌：</div>
            <div id="score">总分：</div>
            <div id="playerBlood">玩家血量：</div>
            <div class="stop" onclick="stop()"> &#9658</div>
            <!-- <img src="./images/myplane.gif" alt=""> -->
        </div>
        <!-- 开始游戏 -->
        <div id="starPage">
            <h1>血战到底!!!</h1>
            <div id="star" onclick="starGame(5)">starGame</div>
            <div class="exit" >Exit</div>
        </div>

        <!-- 暂停消息栏 -->
        <div id="msg">
            <div class="exit" onclick="destory()">Exit</div>
        </div>

        <!-- 游戏结束通知栏 -->
        <div class="box replaybox">
            <div class="msg1">
                <div class="replay" onclick="starGame(5)">Replay</div>
                <div class="exit" onclick="destory()">Exit</div>
            </div>
        </div>
        <div class="box nextbox">
            <div class="msg1">
                <p>恭喜过关！！</p>
                <div class="next" onclick="next()">next</div>
                <div class="exit" onclick="destory()">Exit</div>
            </div>
        </div>


        <!-- 音效 -->
        <audio id="bulletBoom" src="./music/中型火枪开火-YS070510_爱给网_aigei_com.mp3" ></audio>
        <audio id="allBoom" src="./music/boom.mp3" ></audio>
        
        
    </section>
    <audio src="./music/xxxxx.mp3" id="bg" loop></audio>
    <script src="./js/plane.js"></script>
</body>
</html>

部分js

玩家飞机构造函数

//------------------------------------构造玩家飞机---------------------------------------------
/**
 * @param {string} imageSrc  玩家飞机图片路径
 * @param {number} x 图片x轴位置
 * @param {number} y 图片x轴位置
 * @param {number} blood 血量
 * @param {number} speed 速度
 */
function PlayerPlane(imageSrc,x,y,blood,speed,score,kill){
    this.planeNode=document.createElement("img");
    this.imageSrc=imageSrc;
    this.x=x;
    this.y=y;
    this.blood=blood;
    this.speed=speed;
    this.score=score;
    this.kill=kill;
    // 玩家移动

    this.left=()=>{
        let s=parseInt(this.planeNode.style.left)-this.speed;
                    s=judegeDistence(s,0,310)
                    this.planeNode.style.left=s+"px";
    }
    this.right=()=>{
        let s=parseInt(this.planeNode.style.left)+this.speed;
                    s=judegeDistence(s,0,310)
                    this.planeNode.style.left=s+"px";
    }
    this.top=()=>{
         //向上移动
        let s=parseInt(this.planeNode.style.top)-this.speed;
                    s=judegeDistence(s,60,500)
                    this.planeNode.style.top=s+"px";
    }
    this.down=()=>{
        let s=parseInt(this.planeNode.style.top)+this.speed;
                    s=judegeDistence(s,60,500)
                    this.planeNode.style.top=s+"px";
    }

    //发射子弹
    this.shoot=()=>{
        let xx=parseInt(this.planeNode.style.left)+30;
        let yy=parseInt(this.planeNode.style.top);
        let bullet=new Bullet("./images/bullet1.png",xx,yy,10,1,5);
        bulletArry.push(bullet);

    }
    this.shootOther=()=>{
        let xx=parseInt(this.planeNode.style.left)+10;
        let yy=parseInt(this.planeNode.style.top);
        let bullet1=new Bullet("./images/bullet1.png",xx,yy,10,1,5);
        let bullet2=new Bullet("./images/bullet1.png",xx+50,yy,10,1,5);
        bulletArry.push(bullet1);
        bulletArry.push(bullet2);

    }
    // 初始化玩家
    this.planeNode.src=this.imageSrc;
    this.planeNode.style.position="absolute";
    this.planeNode.style.left=this.x+"px";
    this.planeNode.style.top=this.y+"px";
    this.planeNode.style.zIndex=10;

    main.appendChild(this.planeNode);
}

链接：https://pan.baidu.com/s/12lGFEFOU4xiJK4A65Ualhw
提取码：qdfx