飞机大战游戏（完结）

子弹可以飞了，完事儿之后就可以添加敌机了

其实这里面所有的敌机基本上都类似，这里只说一种，然后现在把代码弄过来：

/////////V6版本新增加内容/////////
//小号敌机
function Enemy1(imgs) {
    this.x = Math.random() * (canvasWidth - imgs[0].width);
    this.y = -imgs[0].height;
    this.width = imgs[0].width;
    this.height = imgs[0].height;
    this.index = 0; //当前绘制的图片在数组中的下标
    this.speed = 7;  //小敌机每42ms移动的距离——即飞行速度
    this.removable = false; //可以删除了吗
    this.blood = 1;  //小敌机只有1格血
    this.crashed = false;   //是否被撞毁
    this.draw = function () {
        ctx.drawImage(imgs[this.index], this.x, this.y);
    }
    this.counter = 0;
    this.move = function () {
        this.counter++;
        this.y += this.speed;
        this.checkHit(); //碰撞检查
        //若飞出下边界或炸毁了，则可以删除了
        if (this.crashed && this.counter % 2 === 0) {
            if (this.index === 0) this.index = 1;
            else if (this.index < imgs.length - 1) this.index++;
            else {
                this.removable = true;
                heroScore += 5;
            }
        }
        if (this.y >= canvasHeight) { //飞出下边界
            this.removable = true;
        }
    }
    ////碰撞检验////
    /*
    碰撞的四个条件：
        obj1.x + obj1.width >= obj2.x
        obj2.x + obj2.width >= obj1.x
        obj1.y + obj1.height >= obj2.y
        obj2.y + obj2.height >= obj1.y
    */
    this.checkHit = function () {
        //每个敌机必须和我方的每个子弹进行碰撞检验
        for (var i in bulletList.arr) {
            var b = bulletList.arr[i];
            /*console.log('1'+this.x+'-'+this.y);
            console.log('2'+this.width+'-'+this.height);
            console.log('3'+b.x+'-'+b.y);
            console.log('4'+b.width+'-'+b.height);*/
            if ((this.x + this.width >= b.x)
                && (b.x + b.width >= this.x)
                && (this.y + this.height >= b.y)
                && (b.y + b.height >= this.y)) {
                this.blood--;
                if (this.blood <= 0) { //没有血格了，开始撞毁进程
                    this.crashed = true;
                }
                b.removable = true;
            }
        }
        //每个敌机必须和我方英雄做碰撞检验
        if ((this.x + this.width >= hero.x)
            && (hero.x + hero.width >= this.x)
            && (this.y + this.height >= hero.y)
            && (hero.y + hero.height >= this.y)) {
            hero.crashed = true; //我方英雄开始撞毁程序
        }
    }
}

首先先要设置下这个飞机的参数变量，先介绍下：

x坐标，首先是先想下飞机怎么出来，然后呢因为x坐标就是屏幕的横向宽度，所以直接用canvas的宽度，因为图片从顶点画的，到最后的位置只能是图片的右边挨着屏幕右边，所以要减去一个图片的宽度

y坐标，开始的时候基本上可以设置为图片的高度，这样每次移动的时候才能显示出来，看起来好点

宽高就是图片的宽高了

index,用于图片更换的时候，也就是这个敌机死亡的时候需要切换动画，这时候才能用到，否则基本都是0就可以了

speed，也就是敌机飞行速度，这个的话可以根据自己想要的效果去设置，可以在后面根据分数去增加减少等等

removable,用于判断这个敌机是不是删除了

blood,对于敌机来说是血格，这个的话，可以解释为可以接受几次子弹的打击

crashed,是否被撞毁，

移动方法呢和上面的子弹差不多，一个正一个反，这个就不说了

验证方法，主要是判断每个敌机和子弹，主机的判断，先检验是否和子弹碰撞，因为子弹放在子弹列表里，所以要循环判断下，如果被打了，判断下是不是有血格，如果没有就可以执行删除程序了，然后就是判断是不是和主机碰撞

然后就可以弄中号大号敌机了，这里面的方法和小型敌机几乎是一模一样，所以这里就不说了

敌机弄完之后就可以放到敌机列表里面了:

//所有敌机组成的列表
var enemyList;
function EnemyList() {
    this.arr = []; //保存所有的敌机
    this.add = function (enemy) { //增加新敌机
        this.arr.push(enemy);
    }
    this.remove = function (i) { //删除指定的敌机
        this.arr.splice(i, 1);
    }
    this.draw = function () {  //绘制所有的敌机
        for (var i in this.arr) {
            this.arr[i].draw();
        }
    }
    this.move = function () {  //让所有的敌机移动
        this.generate(); //生成新的敌人
        for (var i in this.arr) {
            var e = this.arr[i];
            e.move();
            if (e.removable) {
                this.remove(i);
            }
        }
    }
    //随机生成一个敌机
    this.generate = function () {
        /*敌机生成的要求：
        *何时生成敌机是随机的，不是定时或者连续的
        *小号敌机的概率最大，中号其次，大号最少
        *思路：0~199随机数  小号0/1/2/3/4/5  中号6/7/8  大号9  其它值不生成敌机
        *进一步扩展：可以将6/9/10设置为变量，以增加游戏难度
        */
        var num = Math.floor(Math.random() * 200);
        if (num < 6) {
            this.add(new Enemy1(imgsEnemy1));
        } else if (num < 9) {
            this.add(new Enemy2(imgsEnemy2));
        } else if (num < 10) {
            this.add(new Enemy3(imgsEnemy3));
        }
    }
}

这个的话，和子弹列表差不多，都有添加删除画和移动方法，最后呢多出来一个generate函数，这个现在来说下，主要就是说下生成敌机的要求，这个的话主要就随机设置了，设置完之后直接判断下生成的数来判断生成的敌机种类，这个的话，也可以修改下，增加游戏难度，也可以和分数挂钩，这样就可以变的越来越难了

最后说下分数和剩余主机生命值的方法里面基本也没什么东西，主要就是画下数字文字而已，只是这些分数变化的时候就可以自己随意玩了，嘻嘻嘻嘻

后面还有俩函数，一个暂停和开始，这里只是简单的改了下状态，大家可以让用户更好的体验，可以和其他游戏一样，弄点按钮，弄个设置啊什么的

因为有个暂停，所以函数也弄了一个，把所有的东西都清空下就可以了，这里的话，用的法子是直接把一个图片画下，就相当于是覆盖所有东西了

终于到最后了，gameover函数，当游戏结束的时候可以画出自己想要出来的画面，可以用文字来弄出来，当然也可以把现在一些分享啊什么的按钮弄上去，这里要看大家怎么弄了

//绘制当前得分和剩余英雄数量
function drawStat() {   //绘制统计数据
    ctx.font = '25px Helvetica';
    ctx.fillStyle = '#333';

    //绘制当前的游戏得分
    var score = 'SCORE: ' + heroScore;
    ctx.fillText(score, 10, 35);
    //绘制剩余的英雄数量
    var heros = 'HEROS: ' + heroCount;
    var w = ctx.measureText(heros).width;
    ctx.fillText(heros, canvasWidth - w - 10, 35);
}


/***阶段5：游戏暂停***/
canvas.onmouseout = function () { //鼠标移出画布
    if (curPhase === PHASE_PLAY) {
        curPhase = PHASE_PAUSE;
    }
}
canvas.onmouseover = function () { //鼠标移入画布
    if (curPhase === PHASE_PAUSE) {
        curPhase = PHASE_PLAY;
    }
}
function drawPause() {  //绘制暂停提示图标
    var x = canvasWidth / 2 - imgGamePauseNor.width / 2;
    var y = canvasHeight / 2 - imgGamePauseNor.height / 2;
    ctx.drawImage(imgGamePauseNor, x, y);
}

/***阶段6：游戏结束***/
function drawGameover() {
    ctx.font = '50px Helvetica';
    ctx.fillStyle = '#ccc';
    ctx.strokeStyle = '#333';
    var txt = 'GAME OVER';
    var w = ctx.measureText(txt).width;
    var x = canvasWidth / 2 - w / 2;
    var y = canvasHeight / 2 + 50 / 2;
    ctx.fillText(txt, x, y);
    ctx.strokeText(txt, x, y);
}

好了，到此为止，就算是真个项目结束了，最近看了下，感觉写这些东西看的人比较多点，所以最近我会找下一些特效什么的，写成公众号，希望大家也帮忙找找人过来关注下公众号，我会努力加油的！！！