飞机大战游戏（三）

今天继续讲下最后的几块飞机大战，也属于是重要部分

重要点一呢就是如何结束，其实呢这个应该和游戏的开始一起讲的，因为如果要做游戏，主要的关键点就是开始结束，没有开始结束，整个游戏就没有意义了

首先我们先接着上篇来讲下，因为到了开始的时候，然后我们需要把所有的飞机画出来，然后呢还需要让飞机跟着鼠标的移动来移动，而且在移动中，我们要开始发射子弹：

/***游戏进行中***/
var hero; 
//此处不能new
//我方英雄飞机的构造方法
function Hero(imgs){
  //我方飞机初始时出现在屏幕下方中央
  this.x = canvasWidth/2-imgs[0].width/2;
  this.y = canvasHeight-imgs[0].height;
  this.width = imgs[0].width;
  this.height = imgs[0].height;
  this.index = 0;
  //待绘制的是数组中的哪个图片
  this.crashed = false;
  //当前是否开始撞毁程序
  this.draw = function(){
    ctx.drawImage(imgs[this.index],this.x,this.y);
}
this.counter = 0;
//move函数被调用的次数
this.move = function(){
    this.counter ++;
    if(this.counter%2===0){
        if(!this.crashed){
        //未开始撞毁程序  0-1-0-1-0-...
            if(this.index===0)this.index = 1;
            else if(this.index===1)this.index = 0;
        }else {
       //开始撞毁程序 2-3-4..removable
            if(this.index===0||this.index===1)
                this.index=2;
            else if(this.index<imgs.length-1)
                this.index++;
            else{
            //撞毁程序结束，创建新英雄或GAMEOVER
                heroCount--;
                if(heroCount>0){ //还有英雄可用
                    hero = new Hero(imgsHero);
                }else {  //英雄全部阵亡
                    curPhase = PHASE_GAMEOVER;
                }
            }
        }
    }
    ///边移动，边发射子弹
    if(this.counter%5===0){
    //此处的5指定每两发子弹的间隔,越小则发射的越快
        this.fire();
    }
  }
  //发射子弹
  this.fire = function(){
    var b = new Bullet(imgBullet1);
    bulletList.add( b );
  }
}

上面代码是画个飞机的代码，也是我们的主机的创建代码，主机主要有他自己的定位和图片的尺寸，然后下面一个画的方法，和一个飞机移动的方法，然后就是子弹的方法了

画的方法和子弹就不说了，画的方法太简单了，子弹在讲子弹的时候再说

移动的方法里面同样有一个计数器，然后里面主要的就是摧毁的时候的程序和开始摧毁的程序，移动的话，因为有鼠标移动，然后移动的时候把主要的坐标系带进来就可以了，也就是刚才说的主机的定位，摧毁的时候开始摧毁，就主要是播放下摧毁主机的动画，也就是几个图片切换下，然后还有个情况就是飞机的生命值，然后就判断下有几条命，如果用完了，那就需要重新开始了，否则就继续，重新开始的话，就新建一个Hero就可以了，生命没了，就把游戏装填改成结束就可以了

然后接下来就是鼠标移动了，其实挺简单的，主要就是设置下主机的xy坐标

//当鼠标在画布上方移动时，修改我方英雄的位置          
canvas.onmousemove = function(event){
  if(curPhase===PHASE_PLAY){
      var x = event.offsetX; //鼠标事件相对于画布左上角的偏移量
      var y = event.offsetY;
      hero.x = x - imgsHero[0].width/2;
      hero.y = y - imgsHero[0].height/2;
  }
}

这个完了之后就可以开始画子弹了

//子弹对象的构造方法function Bullet(img){    //子弹对象的初始坐标

this.x = hero.x + (imgsHero[0].width/2-img.width/2);
this.y = hero.y - img.height;
this.width = img.width;
this.height = img.height;
this.removable = false;
//当前子弹能否被删除了
this.draw = function(){
    /*console.log('bullet.draw');
    console.log(img);
    console.log(this.x + '-'+this.y);*/
    ctx.drawImage(img,this.x,this.y);
}
  this.move = function(){
      this.y -= 10;
     //此处的10指定子弹的移动速度，可以设置为全局变量
      //若飞出画布上边界、或打中敌机，子弹可以消失
      if(this.y <= -img.height){
        this.removable = true;
      }
  }
}

子弹的话，主要和主机差不多参数，坐标，图片宽高和子弹画的方法，这里主要有个参数判断下子弹是否被删除了，这个的话因为子弹删除的话有好几种情况，所以要弄个这个参数，然后子弹移动的话，因为我们这个游戏做的比较简单，只是让子弹往前飞，所以只有y坐标变化，这里有个判断，如果是想要弄的多种子弹弹道，这个需要大家自己发挥了，其实也很简单的，主要就是需要点计算公式而已

因为xy坐标的圆点在左上角，所以y坐标是只要比自己的图片高度小，也就算是出了屏幕了，就可以算是可以销毁了

子弹的话因为所有子弹是属于一直要在界面上显示的，所以就需要把所有子弹放在一个数组里，方便子弹记录：

//子弹列表对象，其中保存着当前的所有子弹
var bulletList;
function BulletList(){
  this.arr = [];
  //画布上所有的子弹对象
  this.add = function(bullet){
  //添加子弹
    this.arr.push(bullet);
  }
this.remove = function(i){
//删除子弹
    this.arr.splice(i, 1); 
 }
this.draw = function(){ //绘制每一个子弹
    //console.log('bulletList.draw...'+this.arr.length);
    for(var i in this.arr){
        this.arr[i].draw();
    }
}
this.move = function(){
    for(var i in this.arr){
        this.arr[i].move(); //让每个子弹都移动
        if(this.arr[i].removable){
            this.remove(i);
        }
    }
  }
}

这里是子弹列表了，主要就是子弹的添加方法，添加进去之后每次移动的时候需要让每一颗子弹都要重画一下，然后如果删除子弹，就从数组里去掉一个，这些都需要弄个方法，以便外面调用

今天讲到这里了，明天差不多就可以讲完了，下次再见