飞机大作战游戏 3----（运用H5和Js制作）

游戏运行中

我方飞机的状态：

var heros1 = [];
            //          飞机未被撞击时的状态
            heros1[0] = new Image;
            heros1[0].src = "img/hero1.png"
            heros1[1] = new Image;
            heros1[1].src = "img/hero2.png"
            //          飞机被撞击的状态
            heros1[2] = new Image;
            heros1[2].src = "img/hero_blowup_n1.png"
            heros1[3] = new Image;
            heros1[3].src = "img/hero_blowup_n2.png"
            heros1[4] = new Image;
            heros1[4].src = "img/hero_blowup_n3.png"
            heros1[5] = new Image;
            heros1[5].src = "img/hero_blowup_n4.png"

初始化飞机的数据：

var heros = {
                img: heros1,
                length: heros1.length,
                 99,
                height: 124,
                frame: 2 /*区分飞机是否碰撞的状态*/
            }

创建飞机的构造函数

            function hero(her) {
                this.img = her.img;
                this.length = her.length;
                this.width = her.width;
                this.height = her.height;
                this.frame = her.frame;
                //              图片索引
                this.starindex = 0;
                //              飞机的位置
                this.x = WIDTH / 2 - this.width / 2;
                this.y = HEIGHT - 150
                //              飞机是否被撞击
                this.dash = false; /*飞机未被撞击*/
                //             碰撞以后会产生动画    是否撞完了
                this.candel = false;
                //                撞击方法
                this.bang = function() {
                    this.dash = true;
                }
                //                绘制飞机paint方法
                this.paint = function() {
                    context.drawImage(this.img[this.starindex], this.x, this.y)
                };
                //              运动的方法
                this.step = function() {
                    if(!this.dash) {
                        this.starindex++;
                        this.starindex = this.starindex % 2;
                    } else {
                        this.starindex++;
                        if(this.starindex == this.length) {
                            life--;
                            if(life == 0) {
                                start = GAMEOVER;
                                this.starindex = this.length - 1
                            } else {
                                sky2 = new hero(heros)
                            }
                        }
                    }
                }
                //              射击的方法    
                this.time = 0;
                this.shoot = function() {
                    this.time++;
                    if(this.time % 3 == 0) {
                        bulled.push(new bulls(bull));
                    }
                }
            }

创建飞机的对象

var sky2 = new hero(heros)

让飞机随着鼠标运动

首先获取鼠标在画布中的位置然后赋给飞机，并让其居中

canvas.onmousemove = function(event) {
                var event = event || window.event;
                if(start == RUNNING) {
//                    获取鼠标在画布中的位置
                    var x = event.offsetX;
                    var y = event.offsetY;
                    sky2.x = x - sky2.width / 2
                    sky2.y = y - sky2.height / 2
                }
            }

绘制子弹

子弹的图片

var img1 = new Image();
            img1.src = "img/bullet1.png";

初始化子弹数据

var bull = {
                img: img1,
                 9,
                height: 21
            }

创建子弹的构造函数

function bulls(bb) {
                this.img = bb.img;
                this.width = bb.width;
                this.height = bb.height;
                //             绘制坐标
                this.x = sky2.x + sky2.width / 2 - this.width / 2;
                this.y = sky2.y - this.height - 10;
                //             绘制方法
                this.paint = function() {
                    context.drawImage(this.img, this.x, this.y)
                };
                //             移动的方法
                this.step = function() {
                    this.y -= 10;
                };
                //             碰撞属性
                this.candel = false;
                //             碰撞方法      改变碰撞属性
                this.bang = function() {
                    this.candel = true;
                }
            }
               var sky3 = new bulls(bull);

建立数组储存子弹对象

var bulled = [];

绘制所有子弹的方法

function suoyou() {
                for(var i = 0; i < bulled.length; i++) {
                    bulled[i].paint();
                }
            }

绘制所有子弹运动的方法

function yidong() {
                for(var i = 0; i < bulled.length; i++) {
                    bulled[i].step();
                }
            }

 清除无用的子弹    （碰撞的和超出边界的）

function qingchu() {
                for(i = 0; i < bulled.length; i++) {
                    if(bulled[i].candel || bulled[i].y < -bulled[i].height) {
                        bulled.splice(i, 1)
                    }
                }

效果图

敌方飞机

敌方飞机的图片

var enemy1 = []; /*小飞机*/
            enemy1[0] = new Image();
            enemy1[0].src = "img/enemy1.png";
            enemy1[1] = new Image();
            enemy1[1].src = "img/enemy1_down1.png";
            enemy1[2] = new Image();
            enemy1[2].src = "img/enemy1_down2.png";
            enemy1[3] = new Image();
            enemy1[3].src = "img/enemy1_down3.png";
            enemy1[4] = new Image();
            enemy1[4].src = "img/enemy1_down4.png";
            var enemy2 = []; /*中飞机*/
            enemy2[0] = new Image();
            enemy2[0].src = "img/enemy2.png";
            enemy2[1] = new Image();
            enemy2[1].src = "img/enemy2_down1.png";
            enemy2[2] = new Image();
            enemy2[2].src = "img/enemy2_down2.png";
            enemy2[3] = new Image();
            enemy2[3].src = "img/enemy2_down3.png";
            enemy2[4] = new Image();
            enemy2[4].src = "img/enemy2_down4.png";
            var enemy3 = []; /*大飞机*/
            enemy3[0] = new Image();
            enemy3[0].src = "img/enemy3_n1.png";
            enemy3[1] = new Image();
            enemy3[1].src = "img/enemy3_n2.png";
            enemy3[2] = new Image();
            enemy3[2].src = "img/enemy3_down1.png";
            enemy3[3] = new Image();
            enemy3[3].src = "img/enemy3_down2.png";
            enemy3[4] = new Image();
            enemy3[4].src = "img/enemy3_down3.png";
            enemy3[5] = new Image();
            enemy3[5].src = "img/enemy3_down4.png";
            enemy3[6] = new Image();
            enemy3[6].src = "img/enemy3_down5.png";
            enemy3[7] = new Image();
            enemy3[7].src = "img/enemy3_down6.png";

初始化所有飞机的数据

var Enemy1 = {/*小飞机*/
                img: enemy1,
                length: enemy1.length,
                 57,
                height: 51,
                type: 1,
                /*飞机类型 1是小飞机*/
                frame: 1,
                /*飞机的动态小中飞机为同一种*/
                life: 1,
                score: 1
            }
            var Enemy2 = {/*中飞机*/
                img: enemy2,
                length: enemy2.length,
                 69,
                height: 95,
                type: 2,
                frame: 1,
                life: 3,
                score: 3
            }
            var Enemy3 = {/*大飞机*/
                img: enemy3,
                length: enemy3.length,
                 169,
                height: 258,
                type: 3,
                frame: 2,
                life: 10,
                score: 150
            }

创造敌方飞机的构造函数

function dffj(df) {
                this.img = df.img;
                this.length = df.length;
                this.width = df.width;
                this.height = df.height;
                this.type = df.type;
                this.frame = df.frame;
                this.life = df.life;
                this.score = df.score;
                //              敌方飞机的坐标
                this.x = Math.random() * (WIDTH - this.width);
                this.y = -this.length;
                //              敌方飞机是否被撞击
                this.down = false;
                //              敌方飞机是否被删除
                this.del = false;
                //              敌方飞机的索引
                this.startindex = 0;
                //              敌方飞机的绘制的方法
                this.paint = function() {
                    context.drawImage(this.img[this.startindex], this.x, this.y)
                }
                //              敌方飞机的运动方法
                this.step = function() {
                    if(!this.down) {
                        this.startindex++;
                        //                      小中飞机下标是0,大飞机是0和1之间切换
                        this.startindex = this.startindex % this.frame;
                        this.y+=10;
                    } else {
                        this.startindex++;
                        if(this.startindex == this.length) {
                            this.del = true; /*飞机被删除*/
                            this.startIndex = this.length - 1; /*飞机停留在最后一张图片*/
                        }
                    }
                }
                //              碰撞造成数据的变化
                this.bang = function() {
                    this.life--;
                    if(this.life == 0) {
                        this.down = true;
                        score += this.score;
                    }
                }
                //              判断是否碰撞
                this.hit = function(unm) {
                    //                  传参可以我方飞机也可以是子弹·数据
                    return this.height + this.y > unm.y && this.y < unm.y + unm.height &&
                        this.x + this.width > unm.x && this.x < unm.x + unm.width
                }
            }

定义数组用于储存产生的敌方飞机

var dfj = [];
            //              将创造的敌方飞机的对象放入数组中
            function enterEnemies() {
                var rand = Math.floor(Math.random() * 100);
                if(rand < 5) {
                    dfj.push(new dffj(Enemy1));
                } else if(rand < 7) {
                    dfj.push(new dffj(Enemy2));
                } else if(rand == 60) {
                    if (dfj&&dfj.length) {
                        if(dfj[0].type != 3 && dfj.length > 2) {
                        dfj.splice(0, 0, new dffj(Enemy3));
                    }
                    }
                    
                }
            }

绘制所有敌方飞机

function sydj() {
                for(var i = 0; i < dfj.length; i++) {
                    dfj[i].paint();
                }
            }

绘制所有敌机的运动

function djyd() {
                for(var i = 0; i < dfj.length; i++) {
                    dfj[i].step();
                }
            }

删除敌机（超出边界和摧毁的）

function deldj() {
                for(var i = 0; i < dfj.length; i++) {
                    if(dfj[i].del || dfj[i].y > HEIGHT) {
                        dfj.splice(i, 1);
                    }
                }
            }

效果图

考虑撞击情况

function hit() {
                //                撞击的是我方飞机
                for(var i = 0; i < dfj.length; i++) { //
                    if(dfj[i].hit(sky2)) {
                        dfj[i].bang();
                        sky2.bang();
                    }
//                            撞击的是子弹
                    for(var j = 0; j < bulled.length; j++) {
                        if(dfj[i].hit(bulled[j])) {
                            bulled[j].bang();
                            dfj[i].bang();
                        }
                    }
                }
                       }

//          飞机的生命值和得分
            function paintText() {
                context.font = "bold 24px Arial";
                context.fillText("SCORE:" + score, 10, 30);
                context.fillText("LIFE:" + life, 400, 30);
            }
            //            暂停
            canvas.onmouseover = function() {
                if(start == PAUSE) {
                    start = RUNNING;
                }
            }

            canvas.onmouseout = function() {
                if(start == RUNNING) {
                    start = PAUSE;
                }
            }
            //            暂停图片
            var pause = new Image();
            pause.src = "img/game_pause_nor.png";
            //            游戏结束的方法
            function gameover() {
                context.font = "bold 50px Arial";
                context.fillText("GAME OVER", 90, 300)
            }

最终定时器

//          飞机的生命值和得分
            function paintText() {
                context.font = "bold 24px Arial";
                context.fillText("SCORE:" + score, 10, 30);
                context.fillText("LIFE:" + life, 400, 30);
            }
            //            暂停
            canvas.onmouseover = function() {
                if(start == PAUSE) {
                    start = RUNNING;
                }
            }

            canvas.onmouseout = function() {
                if(start == RUNNING) {
                    start = PAUSE;
                }
            }
            //            暂停图片
            var pause = new Image();
            pause.src = "img/game_pause_nor.png";
            //            游戏结束的方法
            function gameover() {
                context.font = "bold 50px Arial";
                context.fillText("GAME OVER", 90, 300)
            }

 效果图