js原生打飞机游戏

编程语言 2018-10-08 14:09:55 阅读次数: 0
版权声明：版权所有，如需引用，请注明出处！ https://blog.csdn.net/DHRMM999/article/details/82252628

js原生打飞机游戏
分为js，css，img文件夹
img素材
游戏背景
这里写图片描述
飞机BOSS这里写图片描述打飞机大飞机中飞机中飞机小飞机这里写图片描述
子弹小这里写图片描述这里写图片描述 爆炸效果这里写图片描述这里写图片描述这里写图片描述玩家飞机这里写图片描述这里写图片描述
游戏截图（部分）
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
index入口文件

<body>
    <audio autoplay="" loop=""><source src="video/main_bj.wav"></audio>
    <div id="title2">
        <p>再</p><br>
        <p>战</p><br>
        <p>江</p><br>
        <p>湖</p><br>
    </div>
    <div id="helpplane">
        <p>空格发弹</p><br>
        <p>ctrl暂停</p><br>
        <p>enter继续</p><br>
        <p>上下左右</p><br>
        <p>R键大招</p><br>
        <p>ESC退出</p><br>
    </div>
        <div id="plane">
            <div id="title">雷霆战机——再战江湖</div>
            <div id="start" onclick="startGame()">
                开始游戏
            </div>
            <div id="checkpoint" onclick="checkpoint()">
                选择关卡
            </div>
            <div id="easy" onclick="easyPlane()">简单模式</div>
            <div id="middle" onclick="middlePlane()">一般模式</div>
            <div id="difficult" onclick="difficultPlane()">高级模式</div>
            <div id="help" onclick="helpGame()">
                游戏帮助
            </div>
            <div id="help1">
                <div class="start">
                    游戏帮助
                </div>
                <div class="square">
                    <div class="a_top">游戏操作</div>
                    <div class="a_bottom">
                        移动:可上下左右移动<br>
                        攻击:a键攻击<br>
                        大招:回车键
                    </div>
                </div>
                <div class="s_1">
                    <div class="b_top">关卡设计</div>
                    <div class="b_bottom">容易   简单  困难</div>
                </div>
                <div class="s_2">
                    <div class="c_top">怪物设定</div>
                    <div class="c_bottom">怪物分为四种，怪物1、怪物2、怪物3、boss<br>
                        怪物1：低分数，低血量，碰撞伤害低 直线移动  移动速度中<br>
                        怪物2：比怪物1的分数高 血量高    伤害稍高 直线移动 移动速度很慢<br>
                        怪物3：低血量，高分钟   伤害非常高，移动速度中，曲线移动<br>
                        boss：高血量，高伤害，会发射子弹，会造成极高的碰撞伤害，不规则运动
                    </div>
                </div>
                <div class="s_3">
                    <div class="d_top">宝物设定</div>
                    <div class="d_bottom">击杀普通怪物随机掉落火力增强的道具，或则移动加速的道具<br>
                        boss：击杀boss后直接升级，火力提升一级，移动速度提升一级，防御提升一级
                    </div>
                </div>
                <div class="s_4">
                    <div class="e_top">流程设定</div>
                    <div class="e_bottom">
                        击杀怪物获取分数和经验，当经验到达一定的累积值，玩家升级，分数升级只提升火力<br>
                        升级后，经验清零，下一级经验增加，玩家可以升级无限级<br>
                        当击杀到一定分数后，boss出动，击杀boss后怪物重新出动，怪物等级，防御，伤害，移动速度增加一级
                    </div>
                </div>
            </div>
            <div id="setting" onclick="settingGame()">
                游戏设置
            </div>
            <div id="setting1">该功能暂未开放，敬请期待</div>
            <div id="score">
            //分数框
            </div>
            <div id="gameover">
            //结束排行榜
            </div>
            <div id="reset">
            //重新开始
            </div>
            <div id="exit">
            //突出游戏
            </div>
            <div id="bold">
            //血量条
            </div>
        </div>
    </body>

css样式文件

*{
                margin: 0;
                padding: 0;
            }
            body{
                background: url("img/playbj.jpg") no-repeat;
                background-size: 100% 100%;
            }
            #plane{
                width: 700px;
                height: 900px;
                border:2px solid red;
                margin: 30px auto;
                background-image: url("img/bj.jpg");
                position:relative;
                overflow: hidden;
            }
            #title{
                font-size: 28px;
                color: whitesmoke;
                text-align: center;
                position: absolute;
                top: 30px;
                left: 200px;
                border: 1px dotted #fff;
                border-radius: 15px;
                padding: 10px;
            }
            #start{
                width: 150px;
                height: 50px;
                line-height: 50px;
                border: 1px dashed pink;
                position: absolute;
                color: red;
                text-align: center;
                margin: auto;
                left: 0;
                bottom: 0;
                right: 0;
                top:0;
                cursor: pointer;
            }
            #start:hover{
                background: white;
            }
            #checkpoint{
                width: 150px;
                height: 50px;
                line-height: 50px;
                border: 1px dashed pink;
                position: absolute;
                color: red;
                text-align: center;
                margin: auto;
                left: 0;
                bottom: -120px;
                right: 0;
                top:0;
                cursor: pointer;
            }
            #checkpoint:hover{
                background: white;
            }
            #help{
                width: 150px;
                height: 50px;
                line-height: 50px;
                border: 1px dashed pink;
                position: absolute;
                color: red;
                text-align: center;
                margin: auto;
                left: 0;
                bottom: -240px;
                right: 0;
                top:0;
                cursor: pointer;
            }
            #help:hover{
                background: white;
            }
            #setting{
                width: 150px;
                height: 50px;
                line-height: 50px;
                border: 1px dashed pink;
                position: absolute;
                color: red;
                text-align: center;
                margin: auto;
                left: 0;
                bottom: -360px;
                right: 0;
                top:0;
                cursor: pointer;
            }
            #setting:hover{
                background: white;
            }
            #score{
                height: 25px;
                width: 80px;
                position: absolute;
                border: 1px dashed red;
                display: none;
                color: white;
                text-align: center;
            }
            #title2{
                font-size: 48px;
                font-family: 华文行楷;
                color: red;
                position: absolute;
                top: 260px;
                left: 200px;
            }
            #helpplane{
                font-size: 25px;
                color: red;
                position: absolute;
                top: 330px;
                right: 330px;
            }
            #gameover{
                height: 300px;
                width: 300px;
                font-size: 38px;
                border: 1px dashed red;
                border-radius: 20px;
                text-align: center;
                background-color: lightslategrey;
                opacity: 0.6;
                position: absolute;
                top: 260px;
                left: 200px;
                display: none;
                color: red;
            }
            #reset{
                height: 50px;
                width: 150px;
                font-size: 26px;
                line-height: 50px;
                border: 1px dashed red;
                border-radius: 20px;
                text-align: center;
                background-color: lightslategrey;
                opacity: 0.6;
                position: absolute;
                top:570px;
                left:200px;
                display: none;
                color: red;
                cursor:pointer;
            }
            #exit{
                height: 50px;
                width: 150px;
                font-size: 26px;
                line-height: 50px;
                border: 1px dashed red;
                border-radius: 20px;
                text-align: center;
                background-color: lightslategrey;
                opacity: 0.6;
                position: absolute;
                top:570px;
                left:355px;
                display: none;
                color: red;
                cursor:pointer;
            }
            #bold{
                height: 7px;
                width: 700px;
                border: 1px solid green;
                position: absolute;
                bottom: 0;
                background: green;
            }
            #easy{
                width: 150px;
                height: 50px;
                line-height: 50px;
                border: 1px dashed pink;
                position: absolute;
                color: red;
                text-align: center;
                display: none;
                margin: auto;
                left: 0;
                bottom: 0;
                right: 0;
                top:0;
                cursor: pointer;
            }
            #easy:hover{
                background: white;
            }
            #middle{
                width: 150px;
                height: 50px;
                line-height: 50px;
                border: 1px dashed pink;
                position: absolute;
                color: red;
                text-align: center;
                margin: auto;
                display: none;
                left: 0;
                bottom: -120px;
                right: 0;
                top:0;
                cursor: pointer;
            }
            #middle:hover{
                background: white;
            }
            #difficult{
                width: 150px;
                height: 50px;
                line-height: 50px;
                border: 1px dashed pink;
                position: absolute;
                color: red;
                text-align: center;
                margin: auto;
                display: none;
                left: 0;
                bottom: -240px;
                right: 0;
                top:0;
                cursor: pointer;
            }
            #middle:hover{
                background: white;
            }
            #help1{
                width: 600px;
                height: 800px;
                line-height: 50px;
                border: 1px dashed pink;
                position: absolute;
                color: red;
                text-align: center;
                margin: auto;
                display: none;
                left: 0;
                bottom: 0;
                right: 0;
                top:80px;
            }
            #setting1{
                width: 500px;
                height: 200px;
                line-height: 200px;
                border: 1px dashed pink;
                position: absolute;
                color: red;
                font-size: 32px;
                text-align: center;
                margin: auto;
                display: none;
                left: 0;
                bottom: 0;
                right: 0;
                top:150px;
            }

js文件

  1. 定义全局变量
//定义全局变量获取ID
var Plane = document.getElementById("plane");
//定义敌军小飞机数组
var enemyArr = [];
//定义中飞机数组
var middleArr = [];
//定义打飞机数组
var bigArr = [];
//定义玩家飞机子弹数组
var bulletArr = [];
//定义敌军飞机子弹
var smallArr = [];
//统计分数
var count = 0;
//定义宝物数组
var money = [];
//设置暂停继续
var stop = false;
//设置boss状态，只出一架boss
var bos = true;
//设置B为boss全局变量
var B;
//设置创建小飞机
var play1;
//定义定时器变量
var a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,r,s,t,u,v,w,x;
var gameOver = document.getElementById("gameover");
var reset = document.getElementById("reset");
var exit = document.getElementById("exit");
var start = document.getElementById("start");
var check = document.getElementById("checkpoint");
var help = document.getElementById("help");
var set = document.getElementById("setting");
var title = document.getElementById("title");
var score = document.getElementById("score");

//选择关卡
var a1 = document.getElementById("easy");
var b1 = document.getElementById("middle");
var c1 = document.getElementById("difficult");
function checkpoint() {
    start.style.display = "none";
    check.style.display = "none";
    help.style.display = "none";
    set.style.display = "none";
    title.style.display = "block";
    a1.style.display = "block";
    b1.style.display = "block";
    c1.style.display = "block";
}
//简单模式
function easyPlane() {
    a1.style.display = "none";
    b1.style.display = "none";
    c1.style.display = "none";
    title.style.display = "none";
    var planeTime = 1200;
    startPlane(planeTime);
}
//一般模式
function middlePlane() {
    a1.style.display = "none";
    b1.style.display = "none";
    c1.style.display = "none";
    title.style.display = "none";
    var planeTime = 800;
    startPlane(planeTime);
}
//困难模式
function difficultPlane() {
    a1.style.display = "none";
    b1.style.display = "none";
    c1.style.display = "none";
    title.style.display = "none";
    var planeTime = 500;
    startPlane(planeTime);
}
//游戏帮助
function helpGame() {
    var h1 = document.getElementById("help1");
    start.style.display = "none";
    check.style.display = "none";
    help.style.display = "none";
    set.style.display = "none";
    title.style.display = "block";
    h1.style.display = "block"

}
//游戏设置
function settingGame() {
    var s1 = document.getElementById("setting1");
    start.style.display = "none";
    check.style.display = "none";
    help.style.display = "none";
    set.style.display = "none";
    title.style.display = "block";
    s1.style.display = "block"
}
//游戏开始
function startGame() {
    startPlane(1000);
}

3.启动游戏函数

//启动游戏函数
function startPlane(plane) {
    //点击看是游戏进入游戏界面
    start.style.display = "none";
    check.style.display = "none";
    help.style.display = "none";
    set.style.display = "none";
    title.style.display = "none";
    score.style.display ="block";
    //玩家飞机
        var play1 = new playPlane("img/plane/warcraft.png",300,800,10);
        a = setInterval(function () {
            createPlane(play1);
        },plane);
        k = setInterval(function () {
            planeBullet(play1)
        },50);
        e = setInterval(countscore,20);
        f = setInterval(function () {
            collisonPlane(play1);
        },50);
        g = setInterval(function () {
            gameCount(play1);
        },50);
        h = setInterval(function () {
            playerMove(play1);
        },50);
        i =setInterval(function () {
            changeBold(play1);
        },50);
        u =setInterval(function () {
                change(play1);
            },50);

    keyPlane(play1);
     b = setInterval(smallMove,50)
     l = setInterval(middleMove,80);
     s = setInterval(bigMove,200);
     c = setInterval(bulletMove,50);
     j = setInterval(smallBullet,40);
     d =  setInterval(bulletPlaneSmall,20);
     m =  setInterval(bulletPlaneMiddle,20);
     t = setInterval(bulletPlanBig,30);
     r = setInterval(function () {
         bossTopMove(B);
     },30);

}

4.创建飞机

/**
 * 创造飞机
 */
function createPlane(play)  {
    if(play.state){
        play.distime--;
        if(play.distime<0){
          return;
         }
    }
    if(!(play.distime<=0)){
        if (!stop) {
            if (count<30){
                var plane1 = new plane("img/plane/enemy.png", parseInt(Math.random() * ((700 - 0) - 34)), 0, 8);
                enemyArr.push(plane1);
                n =setInterval(function () {
                    smallShoot(plane1);
                },700);
            }else if (count<200){
                var plane2 = new plane("img/plane/middle.png", parseInt(Math.random() * ((700 - 0) - 92)), 0, 8);
                middleArr.push(plane2);
                plane2.boold=6;
                o =setInterval(function () {
                    middleShoot(plane2);
                },700);
            }else if(count<400){
                var plane3 = new plane("img/plane/bigplan.png", parseInt(Math.random() * ((700 - 0) - 153)), 0, 8);
                plane3.imgNode.style.width = 180+"px";
                plane3.imgNode.style.height = 160+"px";
                bigArr.push(plane3);
                plane3.booldbig=9;
                v =setInterval(function () {
                    bigShoot(plane3);
                },1500);
            } else{
                createBoss(play);
                w = setInterval(function () {
                    bossShoot(B);
                },300);
                x = setInterval(function () {
                    bulletPlanBoss(B);
                },50);
                bos = false;
            }
        }
    }
}

5.更换战机

function change(plane) {
    if (count>=400){
        plane.imgNode.src = "img/plane/player.png";

    }
}

6.boss

/**
 * BOSS出场
 */
function createBoss(plane) {
    if (count>=400&&plane.state==false&&bos){
        B = new BOSS("img/plane/big.png",260, 0, 5);
        B.bosboold = 500;
    }
}
/**
 * BOSS移动
 */
function bossTopMove(boss) {
    if (B != null&&!stop&&!boss.state){
       if (B.bosmove == 1){
           B.xdown = 1;
           B.leftMove();
           B.downMove();
           if (parseInt(B.imgNode.style.left)<=0){
               B.bosmove=2;
           }
       }
       if(B.bosmove == 2){
           B.rightMove();
           if (parseInt(B.imgNode.style.left)>=500){
               B.bosmove = 3;
           }
       }
       if (B.bosmove == 3){
           B.xright = 1;
           B.topMove();
           B.leftMove();
           if(parseInt(B.imgNode.style.top)==0){
               B.bosmove = 4;
           }
       }
       if(B.bosmove == 4){
           B.downMove();
           if(parseInt(B.imgNode.style.top)>=400){
               B.bosmove = 5;
           }
       }
       if(B.bosmove == 5){
           B.topMove();
           if(parseInt(B.imgNode.style.top)==0){
               B.bosmove = 1;
           }
       }
      if (boss.state) {
            if (boss.outtime == 0) {
                count+=100;
            } else {
                boss.outtime--;
            }
        }
    }
}

7.结算游戏

function gameCount(plane) {
    if (plane.state){
        gameOver.style.display = "block";
        reset.style.display = "block";
        exit.style.display = "block";
        document.getElementById("reset").innerHTML = "再玩一次";
        document.getElementById("exit").innerHTML = "退出游戏";
        if((plane.distime%4)==0&&plane.state){
            plane.imgNode.style.display = "none";
        }else{
            plane.imgNode.style.display = "block";
        }
      if (count<20){
          document.getElementById("gameover").innerHTML = "游戏结束<br>您的分数为：<br><br>"+count +"<br><br>"+"获得菜鸟称号"
          reset.onclick = function () {
                    restGame(plane);
                    count = 0;
          }
          exit.onclick  = function () {
              menuBack();
          }
      }else if (count<40){
          document.getElementById("gameover").innerHTML = "游戏结束<br>您的分数为：<br><br>"+count+"<br><br>" +"获得大师称号"
          reset.onclick = function () {
                  restGame(plane);
                  count = 0;
          }
          exit.onclick  = function () {
              menuBack();
          }
      }else if (count<80){
          document.getElementById("gameover").innerHTML = "游戏结束<br>您的分数为：<br><br>"+count+"<br><br>" +"获得大神称号"
          reset.onclick = function () {
                  restGame(plane);
                  count = 0;
          }
          exit.onclick  = function () {
              menuBack();
          }
      }else {
          document.getElementById("gameover").innerHTML = "游戏结束<br>您的分数为：<br><br>"+count +"<br><br>"+"获得天帝称号"
          reset.onclick = function () {
                  restGame(plane);
                  count = 0;
          }
          exit.onclick  = function () {
              menuBack();
          }
      }
    }
}

8.玩家子弹移动

/**
 * 玩家子弹移动方法
 */
function bulletMove() {
    for(var i=0;i<bulletArr.length;i++){
        //防止子弹过多，超i出游戏区域飞机消失
        if (parseInt(bulletArr[i].imgNode.style.top)>=0&&bulletArr[i].state==false){
            if (!stop) {
                bulletArr[i].move();
            }
        }else{
            Plane.removeChild(bulletArr[i].imgNode);
            bulletArr.splice(i,1);
        }
    }
}

9.敌方飞机子弹移动

/**
 * 敌方飞机子弹移动
 */
function smallBullet() {
    for(var i=0;i<smallArr.length;i++){
        //防止子弹过多，超i出游戏区域飞机消失
        if (parseInt(smallArr[i].imgNode.style.top)<=900&&smallArr[i].state==false){
            if (!stop) {
                if (count<100){
                    smallArr[i].moveSmall();
                }else if (count<200){
                    smallArr[i].moveMiddle();
                }else {
                    smallArr[i].moveBig();
                }
            }
        }else{
            Plane.removeChild(smallArr[i].imgNode);
            smallArr.splice(i,1);
        }
    }
}

9.敌方飞机移动

/**
 * 敌方小飞机移动
 */
function smallMove() {
    for (var i = 0; i < enemyArr.length; i++) {
        //防止飞机过多，超i出游戏区域飞机消失
        if (parseInt(enemyArr[i].imgNode.style.top) >= 900) {
            Plane.removeChild(enemyArr[i].imgNode);
            enemyArr.splice(i, 1);
        } else if (enemyArr[i].state) {
            if (enemyArr[i].outtime == 0) {
                Plane.removeChild(enemyArr[i].imgNode);
                enemyArr.splice(i, 1);
                count+=2;
            } else {
                enemyArr[i].outtime--;
            }
        } else {
            if (!stop){
                enemyArr[i].move();
            }
        }
    }
}
/**
 * 敌方中飞机移动
 */
function middleMove() {
        for (var i = 0; i < middleArr.length; i++) {
            //防止飞机过多，超i出游戏区域飞机消失
            if (parseInt(middleArr[i].imgNode.style.top) >= 900) {
                Plane.removeChild(middleArr[i].imgNode);
                middleArr.splice(i, 1);
            } else if (middleArr[i].state) {
                if (middleArr[i].outtime == 0) {
                    Plane.removeChild(middleArr[i].imgNode);
                    middleArr.splice(i, 1);
                    count+=5;
                } else {
                    middleArr[i].outtime--;
                }
            } else {
                if (!stop){
                    middleArr[i].move();
                }
            }
        }
}
/**
 * 敌方大飞机移动
 */
function bigMove() {
    for (var i = 0; i < bigArr.length; i++) {
        //防止飞机过多，超i出游戏区域飞机消失
        if (parseInt(bigArr[i].imgNode.style.top) >= 900) {
            Plane.removeChild(bigArr[i].imgNode);
            bigArr.splice(i, 1);
        } else if (bigArr[i].state) {
            if (bigArr[i].outtime == 0) {
                Plane.removeChild(bigArr[i].imgNode);
                bigArr.splice(i, 1);
                count+=8;
            } else {
                bigArr[i].outtime--;
            }
        } else {
            if (!stop){
                bigArr[i].move();
            }
        }
    }
}

10.玩家飞机移动

/**
 * 玩家飞机移动方法
 */
function playerMove(play) {
    if (!stop) {
        if (!play.state) {
            if (play.top) {
                play.topMove();
            }
            if (play.left) {
                play.leftMove();
            }
            if (play.right) {
                play.rightMove();
            }
            if (play.bottom) {
                play.bottomMove();
            }
        }
    }
}
/**
 * 按键事件
 * @param play
 */
function keyPlane(play) {
    document.onkeydown = function (event) {
        //console.log(event)
        if(event.key=="ArrowUp"){
            play.top=true;
        }
        if (event.key=="ArrowDown"){
            play.bottom=true;
        }
        if(event.key=="ArrowLeft"){
            play.left=true;
        }
        if(event.key=="ArrowRight"){
            play.right=true;
        }
        if(event.code=="Space"){
            play.shoot();
        }
        if (event.key=="Control"){
            stop = true;
        }
        if (event.key=="Enter"){
            stop = false;
        }
        if (event.key=="r"){
            cleanPlane();
        }
        if (event.key=="Escape"){
            exitPlane(play);
        }
    }
    document.onkeyup = function (event) {
        if(event.key=="ArrowUp"){
            play.top=false;
        }else if (event.key=="ArrowDown"){
            play.bottom=false;
        }else if(event.key=="ArrowLeft"){
            play.left=false;
        }else if(event.key=="ArrowRight"){
            play.right=false;
        }
    }
}

11.返回菜单

/**
 * 返回菜单函数
 */
function menuBack() {
    location.reload();
}
/**
 * 分数计数器
 */
function countscore() {
    document.getElementById("score").innerHTML = count
}
/**
 * 血条
 */
function changeBold(plane) {
    var b = document.getElementById("bold");
    b.style.left = (700-plane.boold)+"px";
}
/**
 * 结束游戏
 */
function exitPlane(plane) {
    plane.state = true;
}

12.子弹碰撞飞机

/**
 *子弹碰撞小飞机
 */
function bulletPlaneSmall() {
    for(var i=0;i<bulletArr.length;i++){
        var bullet_left = parseInt(bulletArr[i].imgNode.style.left);
        var bullet_top = parseInt(bulletArr[i].imgNode.style.top);
        for(var j=0;j<enemyArr.length;j++){
            var plane_left = parseInt(enemyArr[j].imgNode.style.left);
            var plane_top = parseInt(enemyArr[j].imgNode.style.top);
            if(!enemyArr[j].state&&!bulletArr[i].state){
                if (bullet_left>=(plane_left-6)&&bullet_left<=(plane_left+23)){
                    if (bullet_top>=(plane_top-22)&&bullet_top<=(plane_top+30)){
                        // Plane.removeChild(bulletArr[i].imgNode);
                        // bulletArr.splice(i,1);
                        // Plane.removeChild(enemyArr[j].imgNode);
                        // enemyArr.splice(j,1);
                        enemyArr[j].imgNode.src = "img/plane/boom.png";
                        enemyArr[j].state = true;
                        bulletArr[i].state = true;
                    }
                }
            }
        }
    }
}
/**
 * 子弹碰撞中飞机
 */
function bulletPlaneMiddle() {
    for(var i=0;i<bulletArr.length;i++){
        var bullet_left = parseInt(bulletArr[i].imgNode.style.left);
        var bullet_top = parseInt(bulletArr[i].imgNode.style.top);
        for(var j=0;j<middleArr.length;j++){
            var plane_left = parseInt(middleArr[j].imgNode.style.left);
            var plane_top = parseInt(middleArr[j].imgNode.style.top);
            if(!middleArr[j].state&&!bulletArr[i].state){
                if (bullet_left>=(plane_left-6)&&bullet_left<=(plane_left+80)){
                    if (bullet_top>=(plane_top-22)&&bullet_top<=(plane_top+92)){
                        bulletArr[i].state = true;
                        middleArr[j].boold--;
                        if (middleArr[j].boold==0){
                            middleArr[j].imgNode.src = "img/plane/boom.png";
                            middleArr[j].state = true;
                        }
                    }
                }
            }
        }
    }
}
/**
 * 子弹碰撞大飞机
 */
function bulletPlanBig() {
    for(var i=0;i<bulletArr.length;i++){
        var bullet_left = parseInt(bulletArr[i].imgNode.style.left);
        var bullet_top = parseInt(bulletArr[i].imgNode.style.top);
        for(var j=0;j<bigArr.length;j++){
            var plane_left = parseInt(bigArr[j].imgNode.style.left);
            var plane_top = parseInt(bigArr[j].imgNode.style.top);
            if(!bigArr[j].state&&!bulletArr[i].state){
                if (bullet_left>=(plane_left-6)&&bullet_left<=(plane_left+170)){
                    if (bullet_top>=(plane_top-22)&&bullet_top<=(plane_top+153)){
                        bulletArr[i].state = true;
                        bigArr[j].booldbig--;
                        if (bigArr[j].booldbig<=0){
                            bigArr[j].imgNode.src = "img/plane/boom.png";
                            bigArr[j].state = true;
                        }
                    }
                }
            }
        }
    }
}
/**
 * 子弹碰撞boss
 */
function bulletPlanBoss(plane) {
    for(var i=0;i<bulletArr.length;i++){
        var bullet_left = parseInt(bulletArr[i].imgNode.style.left);
        var bullet_top = parseInt(bulletArr[i].imgNode.style.top);
            var plane_left = parseInt(plane.imgNode.style.left);
            var plane_top = parseInt(plane.imgNode.style.top);
            if(!plane.state&&!bulletArr[i].state){
                if (bullet_left>=(plane_left-6)&&bullet_left<=(plane_left+200)){
                    if (bullet_top>=(plane_top-22)&&bullet_top<=(plane_top+121)){
                        bulletArr[i].state = true;
                        plane.bosboold-=10;
                        if (plane.bosboold==0){
                            plane.imgNode.src = "img/plane/boss.png";
                            plane.state = true;
                            console.log(111)
                        }
                        console.log(222)
                }
            }
        }
    }
}

13.玩家飞机死亡

/**
 * 子弹击中玩家飞机
 */
function planeBullet(plane) {
    for(var i=0;i<smallArr.length;i++){
        var bullet_left = parseInt(smallArr[i].imgNode.style.left);
        var bullet_top = parseInt(smallArr[i].imgNode.style.top);
            var plane_left = parseInt(plane.imgNode.style.left);
            var plane_top = parseInt(plane.imgNode.style.top);
            if(!smallArr[i].state&&!plane.state){
                if (bullet_left>=(plane_left-6)&&bullet_left<=(plane_left+60)){
                    if (bullet_top>=(plane_top-14)&&bullet_top<=(plane_top+36)){
                        smallArr[i].imgNode.src = "img/plane/boom.png";
                        smallArr[i].state = true;
                        plane.boold-=100;
                        if (plane.boold<0){
                            plane.state = true;
                        }
                    }
                }
        }
    }
}
/**
 * 飞机和飞机碰撞
 */
function collisonPlane(plane) {
        for(var i=0;i<enemyArr.length;i++){
            var bullet_left = parseInt(enemyArr[i].imgNode.style.left);
            var bullet_top = parseInt(enemyArr[i].imgNode.style.top);
            var plane_left = parseInt(plane.imgNode.style.left);
            var plane_top = parseInt(plane.imgNode.style.top);
            if (!plane.state){
                if (bullet_left>=(plane_left-60)&&bullet_left<=(plane_left+34)){
                    if (bullet_top>=(plane_top-36)&&bullet_top<=(plane_top+24)){
                        plane.imgNode.src = "img/plane/boom2.png";
                        enemyArr[i].state=true;
                        plane.boold-=100;
                        if (plane.boold<0){
                            plane.state = true;
                        }
                    }
                }
            }
        }
}

14.大招

/**
 * 大招：清除所有飞机
 */
function cleanPlane() {
    for (var i = 0; i < enemyArr.length; i++) {
        enemyArr[i].imgNode.src = "img/plane/boom3.png";
        enemyArr[i].state = true;
    }
    for (var k = 0; k < smallArr.length; k++) {
        smallArr[k].imgNode.src = "img/plane/boom3.png";
        smallArr[k].state = true;
    }
    for (var j = 0; j < middleArr.length; j++) {
        middleArr[j].imgNode.src = "img/plane/boom3.png";
        middleArr[j].state = true;
    }
    for (var l = 0; l < bigArr.length; l++) {
        bigArr[l].imgNode.src = "img/plane/boom3.png";
        bigArr[l].state = true;
    }
}

15.重新开始

/**
 * 重新开始
 */
function restGame(plane) {
    cleanSet(plane);
    cleanPlane();
    gameOver.style.display = "none";
    reset.style.display = "none";
    exit.style.display = "none";
    start.style.display = "block";
    title.style.display = "block";
    score.style.display ="none";
    Plane.removeChild(plane.imgNode);
}
function cleanSet(plane) {
    clearInterval(a);
    clearInterval(b);
    clearInterval(c);
    clearInterval(d);
    clearInterval(e);
    clearInterval(f);
    clearInterval(g);
    clearInterval(h);
    clearInterval(i);
    clearInterval(j);
    clearInterval(k);
    clearInterval(l);
    clearInterval(m);
    clearInterval(n);
    clearInterval(o);
    clearInterval(p);
    clearInterval(r);
    clearInterval(s);
    clearInterval(t);
    clearInterval(u);
    clearInterval(v);
    clearInterval(w);
    clearInterval(x);
    plane.boold = 700;
    plane.state =false;
}

16.玩家飞机模板

/**
 * 玩家飞机属性
 * imgSrc图片路径
 * imgNode图片节点
 * x，y初识位置
 * 方法
 * 初始化
 */
function playPlane(imgSrc,x,y,speed) {
    this.imgNode = document.createElement("img");
    this.imgSrc = imgSrc;
    this.x = x;
    this.y = y;
    this.speed = speed;
    this.state = false;
    this.outtime = 10;
    this.distime = 2;
    this.boold = 700;
    this.init = function () {
        this.imgNode.src= this.imgSrc;
        this.imgNode.style.position = "absolute";
        this.imgNode.style.left = this.x + "px";
        this.imgNode.style.top = this.y + "px";
        Plane.appendChild(this.imgNode);
    }

    this.leftMove = function () {
        //判断飞机是否在游戏区域
        if(parseInt(this.imgNode.style.left)>0){
            this.imgNode.style.left = parseInt(this.imgNode.style.left)-this.speed+"px"
        }
    }
    this.rightMove = function () {
        if(parseInt(this.imgNode.style.left)<=634) {
            this.imgNode.style.left = parseInt(this.imgNode.style.left) + this.speed + "px"
        }
    }
    this.topMove = function () {
        if(parseInt(this.imgNode.style.top)>0){
            this.imgNode.style.top = parseInt(this.imgNode.style.top)-this.speed+"px"
        }
    }
    this.bottomMove = function () {
        if(parseInt(this.imgNode.style.top)<=820){
            this.imgNode.style.top = parseInt(this.imgNode.style.top)+this.speed+"px"
        }
    }
    //创建子弹
    this.shoot = function () {
        //获取飞机当前位置
        var x = parseInt(this.imgNode.style.left);
        var y = parseInt(this.imgNode.style.top);
        // console.log(this.imgNode.style.left)
        // console.log(this.imgNode.style.top)
        if (!stop){
        if(!this.state) {
            if(count<50){
                var bullet = new Bullet("img/plane/bullet.png", x + 28, y - 18, 8);
                bulletArr.push(bullet);
            }else if (count < 200) {
                var bullet1 = new Bullet("img/plane/bullet.png", x + 40, y - 18, 10);
                var bullet2= new Bullet("img/plane/bullet.png", x + 15, y - 18, 10);
                bulletArr.push(bullet1);
                bulletArr.push(bullet2);
            }else if(count <400){
                var bullet3 = new Bullet("img/plane/bullet.png", x + 10, y - 18, 12);
                var bullet4= new Bullet("img/plane/bullet.png", x + 30, y - 18, 12);
                var bullet5 = new Bullet("img/plane/bullet.png", x + 50, y - 18, 12);
                bulletArr.push(bullet3);
                bulletArr.push(bullet4);
                bulletArr.push(bullet5);
            }else {
                var bullet6 = new Bullet("img/plane/bullet.png", x + 30, y - 18, 12);
                var bullet7= new Bullet("img/plane/bullet.png", x + 50, y - 18, 12);
                var bullet8 = new Bullet("img/plane/bullet.png", x + 70, y - 18, 12);
                var bullet9 = new Bullet("img/plane/bullet.png", x + 90, y - 18, 12);
                bulletArr.push(bullet6);
                bulletArr.push(bullet7);
                bulletArr.push(bullet8);
                bulletArr.push(bullet9);
            }
           }
        }
    }
    this.init();
}

17.作战飞机模板

/**
 * 作战飞机属性
 * imgSrc图片路径
 * imgNode图片节点
 * x，y初识位置
 * 方法
 * 初始化
 */
function plane(imgSrc,x,y,speed) {
    this.imgNode = document.createElement("img");
    this.imgSrc = imgSrc;
    this.x = x;
    this.y = y;
    this.speed = speed;
    this.outtime = 10;
    this.state = false;
    this.boold = 0;
    this.booldbig = 0;
    this.init = function () {
        this.imgNode.src= this.imgSrc;
        this.imgNode.style.position = "absolute";
        this.imgNode.style.left = this.x+"px"
        this.imgNode.style.top = this.y+"px"
        Plane.appendChild(this.imgNode);
    }
    this.move= function () {
        this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed + "px"
    }
    this.init();
}

18.boss模板

/**
 * Boss飞机属性
 */
function BOSS(imgSrc,x,y,speed) {
    this.imgNode = document.createElement("img");
    this.imgSrc = imgSrc;
    this.x = x;
    this.y = y;
    this.speed = speed;
    this.bosmove = 1;
    this.outtime = 10;
    this.state = false;
    this.bosboold = 0;
    this.xdown = 0.5;
    this.xright =0.5;
    this.init = function () {
        this.imgNode.src= this.imgSrc;
        this.imgNode.style.position = "absolute";
        this.imgNode.style.left = this.x+"px"
        this.imgNode.style.top = this.y+"px"
        Plane.appendChild(this.imgNode);
    }
    this.topMove= function () {
        this.imgNode.style.top = parseInt(this.imgNode.style.top) - this.speed  + "px"
    }
    this.downMove= function () {
        this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed * this.xdown+ "px"
    }
    this.leftMove = function () {
        this.imgNode.style.left = parseInt(this.imgNode.style.left) - this.speed + "px"
    }
    this.rightMove = function () {
        this.imgNode.style.left = parseInt(this.imgNode.style.left) + this.speed *this.xright + "px" ;
    }
    this.init();
}

19.敌方大中小boss飞机子弹创建

/**
 * 敌方飞机子弹创建
 */
function smallShoot(plane) {
    //创建敌方飞机子弹
        //获取飞机当前位置
        var x = parseInt(plane.imgNode.style.left);
        var y = parseInt(plane.imgNode.style.top);
        if (!stop){
            if(!plane.state) {
               var small1 = new Bullet("img/plane/bullet1.png", x+10, y + 30, 8);
               smallArr.push(small1);
            }
        }
}
function middleShoot(plane) {
    //获取飞机当前位置
    var x = parseInt(plane.imgNode.style.left);
    var y = parseInt(plane.imgNode.style.top);
    if (!stop){
        if(!plane.state) {
            var small1 = new Bullet("img/plane/small.png", x+10, y + 90, 7);
            var small2 = new Bullet("img/plane/small.png", x+30, y + 90, 7);
            smallArr.push(small1);
            smallArr.push(small2);
        }
    }
}
function bigShoot(plane) {
    //获取飞机当前位置
    var x = parseInt(plane.imgNode.style.left);
    var y = parseInt(plane.imgNode.style.top);
    if (!stop){
        if(!plane.state) {
            var small1 = new Bullet("img/plane/smallshoot.png", x+50, y + 90, 6);
            var small2 = new Bullet("img/plane/smallshoot.png", x+70, y + 90, 6);
            smallArr.push(small1);
            smallArr.push(small2);
        }
    }
}
function bossShoot(plane) {
    //获取飞机当前位置
    var x = parseInt(plane.imgNode.style.left);
    var y = parseInt(plane.imgNode.style.top);
    if (!stop){
        if(!plane.state) {
            var small1 = new Bullet("img/plane/smallshoot.png", x+60, y + 90, 6);
            var small2 = new Bullet("img/plane/smallshoot.png", x+80, y + 90, 6);
            smallArr.push(small1);
            smallArr.push(small2);
        }
    }
}

20.子弹模板

/**
 *
 * @param 子弹模板属性
 * @param imgsrc路径
 * @param x,y子弹位置
 * @param speed飞行速度
 * @constructor
 */
function Bullet(imgSrc,x,y,speed) {
    this.imgNode = document.createElement("img");
    this.imgSrc = imgSrc;
    this.x = x;
    this.y = y;
    this.speed = speed;
    this.state = false;
    this.move = function () {
        this.imgNode.style.top = parseInt(this.imgNode.style.top) - this.speed + "px";
    }
    this.moveSmall = function () {
        this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed + "px";
    }
    this.moveMiddle = function () {
        this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed + "px";
    }
    this.moveBig = function () {
        this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed + "px";
    }
    this.init = function () {
        this.imgNode.src= this.imgSrc;
        this.imgNode.style.position = "absolute";
        this.imgNode.style.left = this.x+"px"
        this.imgNode.style.top = this.y+"px"
        Plane.appendChild(this.imgNode);
    }
    this.init();
}

猜你喜欢

转载自blog.csdn.net/DHRMM999/article/details/82252628
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022