本文共 16646 字，大约阅读时间需要 55 分钟。

链接：https://pan.baidu.com/s/1T-fO7b9em1gCzM7SaZkZrw

html代码：

style.css

.loading{
       background-image: url(start_logo.jpg);    width: 512px;    height: 768px;    position: absolute;    left: 500px;    top: 0px;}.small{
       background-image: url(enemy1.png);    width: 80px;    height: 115px;    position: absolute;    left: 0px;    top: 0px;}.mid{
       background-image: url(enemy2.png);    width: 102px;    height: 79px;    position: absolute;    left: 0px;    top: 0px;}.big{
       background-image: url(super_boss.png);    width: 200px;    height: 302px;    position: absolute;    left: 0px;    top: 0px;}.hero{
       background-image: url(hero.png);    width: 117px;    height: 120px;    position: absolute;    left: 700px;    top: 600px;}.background{
       background-image: url(bg.jpg);    width: 512px;    height: 768px;    position: absolute;    left: 500px;    top: 0px;}.bullet{
       background-image: url(bullet.png);    width: 31px;    height: 68px;    position: absolute;    left:0px;    top: 0px;}.give{
       background-image: url(supply.png);    width: 40px;    height: 41px;    position: absolute;    left:0px;    top: 0px;}.btn{
       width: 512px;    height: 768px;    margin: 20px auto;    text-align: center;    line-height: 60px;    font-size: 26px;    cursor: pointer;}.boom{
       background-image: url(轰雷击1.png);    width: 533px;    height: 533px;    position: absolute;    left:0px;    top: 0px;}.boom1{
       background-image: url(boom1.png);    width: 80px;    height: 120px;    position: absolute;    left:0px;    top: 0px;}.boom2{
       background-image: url(boom2.png);    width: 94px;    height: 119px;    position: absolute;    left:0px;    top: 0px;}.boom3{
       background-image: url(boom3.png);    width: 90px;    height: 120px;    position: absolute;    left:0px;    top: 0px;}.boom4{
       background-image: url(boom4.png);    width: 81px;    height: 120px;    position: absolute;    left:0px;    top: 0px;}.boom5{
       background-image: url(boom5.png);    width: 78px;    height: 120px;    position: absolute;    left:0px;    top: 0px;}.boom6{
       background-image: url(boom6.png);    width: 71px;    height: 120px;    position: absolute;    left:0px;    top: 0px;}

index.js

var enemys1 = [];var enemys2 = [];var enemys3 = [];var score=0;var canvas = document.getElementById("canvas");// var context = canvas.getContext("2d");function random(min, max) {
       return Math.round(Math.random() * (max - min) + min);}function paintText(){
       // canvas.clearRect(20,20,480,685);    // canvas.font = "bold 30px 微软雅黑";    canvas.innerHTML = "SCORE:" + score;}var cont = document.getElementById("background");// 选择按钮元素var btn = document.getElementById("btn");btn.onclick = function(){
        begin();}function begin(){
       myPlane.init();    myPlane.fire();    paintText();    setInterval(() => {
       var t=new enemy1();    enemys1.push(t);    }, 2000);    setInterval(() => {
       var t=new enemy2();    enemys2.push(t);    }, 3000);    setInterval(() => {
       var t=new enemy3();    enemys3.push(t);    }, 7000);    setInterval(() => {
       new give();    }, 5000);}class Bullet{
       constructor(){
           // 选择容器        this.cont = document.getElementById("background");        // 创建子弹元素        this.bulletEle = document.createElement("div");        this.bulletEle.className = "bullet";        this.cont.appendChild(this.bulletEle);        // 设置子弹的初始位置        this.bulletEle.style.left = myPlane.meElement.offsetLeft + myPlane.meElement.offsetWidth/2 - this.bulletEle.offsetWidth/2 + "px";        this.bulletEle.style.top = myPlane.meElement.offsetTop - this.bulletEle.offsetHeight + "px";        // 开始运动        this.move();    }    move(){
           var that = this;        // 开启计时器        that.t = setInterval(function(){
               // 判断是否到顶            if(that.bulletEle.offsetTop < 0){
                   // 停止计时器                clearInterval(that.t);                // 让子弹爆炸                that.die();            }else{
                   // 持续向上运动                that.bulletEle.style.top = that.bulletEle.offsetTop - 5 + "px";            }        }, 10);    }    die(){
           var that=this;        clearInterval(that.t);        for(var i=0;i
   
     maxLeft) {
                   l = maxLeft            }            // 左            if (l < 0) {
                   l = 0            }            // 上            if (t < 0) {
                   t = 0            }            // 将边界限定后的位置，设置给我的飞机            that.meElement.style.left = l + "px";            that.meElement.style.top = t + "px";        }        // setInterval(() => {
           //     var plane = document.createElement("div");        //     contElement.appendChild(plane);        //     plane.className = "bullet";        //     plane.style.left = that.meElement.style.left;        //     plane.style.top = that.meElement.style.top;        //     // alert(plane.style.left,plane.style.top);        //     var t = setInterval(function () {
           //         if (plane.offsetTop === contElement.style.offsetTop) {
           //             clearInterval(t);        //         }        //         else {
           //             plane.style.top = plane.offsetTop - 5 + "px";        //         }        //     }, 50);        // }, 1000);    },    die() {
           // 为了游戏体验，当飞机要爆炸了，就不能再跟着鼠标走了        document.onmousemove = null;        var that = this;        // 切换我的飞机的爆炸图        var num = 1;        var t = setInterval(function () {
               if (num === 7) {
                   clearInterval(t);                that.meElement.remove();                alert("游戏结束，您的分数为："+score);                if(confirm("是否重新开始")){
                       location.reload();                }else{
                       close();                }            } else {
                   that.meElement.style.background = "url(boom" + num + ".png)";                num++            }        }, 100);    },    fire(){
           var that = this;        that.t = setInterval(function(){
               // 创建子弹对象            var b = new Bullet();            // 将子弹对象保存到我的飞机对象身上的一个数组属性内            that.bullets.push(b);        }, 300);    },    bullets:[]}class enemy1 {
       constructor() {
           var that = this;        var cont = document.getElementById("background");        that.plane = document.createElement("div");        cont.appendChild(that.plane);        that.plane.className = "small";        that.plane.style.left = random(0, cont.offsetWidth - that.plane.offsetWidth) + "px";        that.plane.style.top = -that.plane.offsetHeight + "px";        that.t = setInterval(function(){
               if(that.plane.offsetTop > cont.offsetHight){
                   clearInterval(that.t);                that.die();            }else{
                   that.plane.style.top = that.plane.offsetTop + 5 + "px";                for(var i=0;i
    
      that.plane.offsetLeft                        &&                        // 右边                        that.plane.offsetLeft + that.plane.offsetWidth > myPlane.bullets[i].bulletEle.offsetLeft                        &&                        // 上边                        myPlane.bullets[i].bulletEle.offsetTop + myPlane.bullets[i].bulletEle.offsetHeight > that.plane.offsetTop                        &&                        // 下边                        that.plane.offsetTop + that.plane.offsetHeight > myPlane.bullets[i].bulletEle.offsetTop                    ){
                           myPlane.bullets[i].die();                        that.die();                    }                }                // 敌机和我的飞机的碰撞检测                if(                    // 左边                    myPlane.meElement.offsetLeft + myPlane.meElement.offsetWidth > that.plane.offsetLeft                    &&                    // 右边                    that.plane.offsetLeft + that.plane.offsetWidth > myPlane.meElement.offsetLeft                    &&                    // 上边                    myPlane.meElement.offsetTop + myPlane.meElement.offsetHeight > that.plane.offsetTop                    &&                    // 下边                    that.plane.offsetTop + that.plane.offsetHeight > myPlane.meElement.offsetTop                ){
                       // 我的飞机爆炸                    // 游戏结束的功能，在我的飞机的爆炸内部实现                    myPlane.die();                    clearInterval(that.t);                }            }        }, 30);    }    die() {
           score+=10;        paintText();        var that = this;        var num = 1;        clearInterval(that.t);        var t = setInterval(function () {
               if (num === 7) {
                   clearInterval(t);                that.plane.remove();            } else {
                   that.plane.className="boom"+num;                num++;            }        }, 100);    }}class enemy2 {
       constructor() {
           this.hp=3;        var cont = document.getElementById("background");        this.plane = document.createElement("div");        cont.appendChild(this.plane);        this.plane.className = "mid";        this.plane.style.left = random(0, cont.offsetWidth - this.plane.offsetWidth) + "px";        this.plane.style.top = -this.plane.offsetHeight + "px";        var that=this;        that.t = setInterval(function(){
               if(that.plane.offsetTop > cont.offsetHight){
                   clearInterval(that.t);                that.die();            }else{
                   that.plane.style.top = that.plane.offsetTop + 4 + "px";                for(var i=0;i
     
       that.plane.offsetLeft                        &&                        // 右边                        that.plane.offsetLeft + that.plane.offsetWidth > myPlane.bullets[i].bulletEle.offsetLeft                        &&                        // 上边                        myPlane.bullets[i].bulletEle.offsetTop + myPlane.bullets[i].bulletEle.offsetHeight > that.plane.offsetTop                        &&                        // 下边                        that.plane.offsetTop + that.plane.offsetHeight > myPlane.bullets[i].bulletEle.offsetTop                    ){
                           that.hp--;                        myPlane.bullets[i].die();                        if(that.hp===0){
                           that.die();                        }                    }                }                // 敌机和我的飞机的碰撞检测                if(                    // 左边                    myPlane.meElement.offsetLeft + myPlane.meElement.offsetWidth > that.plane.offsetLeft                    &&                    // 右边                    that.plane.offsetLeft + that.plane.offsetWidth > myPlane.meElement.offsetLeft                    &&                    // 上边                    myPlane.meElement.offsetTop + myPlane.meElement.offsetHeight > that.plane.offsetTop                    &&                    // 下边                    that.plane.offsetTop + that.plane.offsetHeight > myPlane.meElement.offsetTop                ){
                       // 我的飞机爆炸                    // 游戏结束的功能，在我的飞机的爆炸内部实现                    myPlane.die();                    clearInterval(that.t);                }            }        }, 50);    }        // var t = setInterval(function () {
           //     if (that.plane.offsetTop > cont.offsetHeight - 300) {
           //         that.die();        //         clearInterval(t);        //     }        //     else {
           //         that.plane.style.top = that.plane.offsetTop + 3 + "px";        //     }        // }, 50);    die() {
           score+=20;        paintText();        var that = this;        clearInterval(that.t);        var num = 1;        var t = setInterval(function () {
               if (num === 5) {
                   clearInterval(t);                that.plane.remove();            } else {
                   that.plane.style.background = "url(enemy_down" + num + ".png)";                num++;            }        }, 150);    }}class enemy3 {
       constructor() {
           this.hp=5;        var cont = document.getElementById("background");        this.plane = document.createElement("div");        cont.appendChild(this.plane);        this.plane.className = "big";        this.plane.style.left = random(0, cont.offsetWidth - this.plane.offsetWidth) + "px";        this.plane.style.top = -this.plane.offsetHeight + "px";        var that=this;        that.t = setInterval(function(){
               if(that.plane.offsetTop > cont.offsetHight){
                   clearInterval(that.t);                that.die();            }else{
                   that.plane.style.top = that.plane.offsetTop + 3 + "px";                for(var i=0;i
      
        that.plane.offsetLeft                        &&                        // 右边                        that.plane.offsetLeft + that.plane.offsetWidth > myPlane.bullets[i].bulletEle.offsetLeft                        &&                        // 上边                        myPlane.bullets[i].bulletEle.offsetTop + myPlane.bullets[i].bulletEle.offsetHeight > that.plane.offsetTop                        &&                        // 下边                        that.plane.offsetTop + that.plane.offsetHeight > myPlane.bullets[i].bulletEle.offsetTop                    ){
                           that.hp--;                        myPlane.bullets[i].die();                        if(that.hp===0){
                           that.die();                        }                    }                }                // 敌机和我的飞机的碰撞检测                if(                    // 左边                    myPlane.meElement.offsetLeft + myPlane.meElement.offsetWidth > that.plane.offsetLeft                    &&                    // 右边                    that.plane.offsetLeft + that.plane.offsetWidth > myPlane.meElement.offsetLeft                    &&                    // 上边                    myPlane.meElement.offsetTop + myPlane.meElement.offsetHeight > that.plane.offsetTop                    &&                    // 下边                    that.plane.offsetTop + that.plane.offsetHeight > myPlane.meElement.offsetTop                ){
                       // 我的飞机爆炸                    // 游戏结束的功能，在我的飞机的爆炸内部实现                    myPlane.die();                    clearInterval(that.t);                }            }        }, 150);    }    die() {
           score+=30;        paintText();        var that = this;        clearInterval(that.t);        var num = 1;        var t = setInterval(function () {
               if (num === 7) {
                   clearInterval(t);                that.plane.remove();            } else {
                   that.plane.style.background = "url(super_boss_down" + num + ".png)";                num++;            }        }, 200);    }}class give {
       constructor() {
           var cont = document.getElementById("background");        var plane = document.createElement("div");        cont.appendChild(plane);        plane.className = "give";        plane.style.left = random(0, cont.offsetWidth - plane.offsetWidth) + "px";        plane.style.top = 0        var t = setInterval(function () {
               if (plane.offsetTop == "1000px") {
                   clearInterval(t);            }            else {
                   plane.style.top = plane.offsetTop + 8 + "px";            }        if(            // 左边            myPlane.meElement.offsetLeft + myPlane.meElement.offsetWidth > plane.offsetLeft            &&            // 右边            plane.offsetLeft + plane.offsetWidth > myPlane.meElement.offsetLeft            &&            // 上边            myPlane.meElement.offsetTop + myPlane.meElement.offsetHeight > plane.offsetTop            &&            // 下边            plane.offsetTop + plane.offsetHeight > myPlane.meElement.offsetTop        ){
               plane.remove();            new boom();        }    }, 50);    }}class boom{
        constructor() {
           var that = this;        var cont = document.getElementById("background");        that.plane = document.createElement("div");        cont.appendChild(that.plane);        that.plane.className = "boom";        that.plane.style.left = cont.offsetLeft-that.plane.offsetWidth+"px";        that.plane.style.top = "0px";        var num = 1;        var t = setInterval(function () {
               if (num === 11) {
                   clearInterval(t);                that.plane.remove();            } else {
                   that.plane.style.background = "url(轰雷击" + num + ".png)";                num++;                for(var i=0;i
      
     
    
   

转载地址：http://dpgwi.baihongyu.com/