今天繼續(xù)講下最后的幾塊飛機(jī)大戰(zhàn)，也屬于是重要部分

重要點(diǎn)一呢就是如何結(jié)束，其實(shí)呢這個(gè)應(yīng)該和游戲的開(kāi)始一起講的，因?yàn)槿绻鲇螒?，主要的關(guān)鍵點(diǎn)就是開(kāi)始結(jié)束，沒(méi)有開(kāi)始結(jié)束，整個(gè)游戲就沒(méi)有意義了

首先我們先接著上篇來(lái)講下，因?yàn)榈搅碎_(kāi)始的時(shí)候，然后我們需要把所有的飛機(jī)畫(huà)出來(lái)，然后呢還需要讓飛機(jī)跟著鼠標(biāo)的移動(dòng)來(lái)移動(dòng)，而且在移動(dòng)中，我們要開(kāi)始發(fā)射子彈：

/***游戲進(jìn)行中***/
var hero; 
//此處不能new
//我方英雄飛機(jī)的構(gòu)造方法
function Hero(imgs){
  //我方飛機(jī)初始時(shí)出現(xiàn)在屏幕下方中央
  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;
  //待繪制的是數(shù)組中的哪個(gè)圖片
  this.crashed = false;
  //當(dāng)前是否開(kāi)始撞毀程序
  this.draw = function(){
    ctx.drawImage(imgs[this.index],this.x,this.y);
}
this.counter = 0;
//move函數(shù)被調(diào)用的次數(shù)
this.move = function(){
    this.counter ++;
    if(this.counter%2===0){
        if(!this.crashed){
        //未開(kāi)始撞毀程序  0-1-0-1-0-...
            if(this.index===0)this.index = 1;
            else if(this.index===1)this.index = 0;
        }else {
       //開(kāi)始撞毀程序 2-3-4..removable
            if(this.index===0||this.index===1)
                this.index=2;
            else if(this.index<imgs.length-1)
                this.index++;
            else{
            //撞毀程序結(jié)束，創(chuàng)建新英雄或GAMEOVER
                heroCount--;
                if(heroCount>0){ //還有英雄可用
                    hero = new Hero(imgsHero);
                }else {  //英雄全部陣亡
                    curPhase = PHASE_GAMEOVER;
                }
            }
        }
    }
    ///邊移動(dòng)，邊發(fā)射子彈
    if(this.counter%5===0){
    //此處的5指定每?jī)砂l(fā)子彈的間隔,越小則發(fā)射的越快
        this.fire();
    }
  }
  //發(fā)射子彈
  this.fire = function(){
    var b = new Bullet(imgBullet1);
    bulletList.add( b );
  }
}

上面代碼是畫(huà)個(gè)飛機(jī)的代碼，也是我們的主機(jī)的創(chuàng)建代碼，主機(jī)主要有他自己的定位和圖片的尺寸，然后下面一個(gè)畫(huà)的方法，和一個(gè)飛機(jī)移動(dòng)的方法，然后就是子彈的方法了

畫(huà)的方法和子彈就不說(shuō)了，畫(huà)的方法太簡(jiǎn)單了，子彈在講子彈的時(shí)候再說(shuō)

移動(dòng)的方法里面同樣有一個(gè)計(jì)數(shù)器，然后里面主要的就是摧毀的時(shí)候的程序和開(kāi)始摧毀的程序，移動(dòng)的話，因?yàn)橛惺髽?biāo)移動(dòng)，然后移動(dòng)的時(shí)候把主要的坐標(biāo)系帶進(jìn)來(lái)就可以了，也就是剛才說(shuō)的主機(jī)的定位，摧毀的時(shí)候開(kāi)始摧毀，就主要是播放下摧毀主機(jī)的動(dòng)畫(huà)，也就是幾個(gè)圖片切換下，然后還有個(gè)情況就是飛機(jī)的生命值，然后就判斷下有幾條命，如果用完了，那就需要重新開(kāi)始了，否則就繼續(xù)，重新開(kāi)始的話，就新建一個(gè)Hero就可以了，生命沒(méi)了，就把游戲裝填改成結(jié)束就可以了

然后接下來(lái)就是鼠標(biāo)移動(dòng)了，其實(shí)挺簡(jiǎn)單的，主要就是設(shè)置下主機(jī)的xy坐標(biāo)

//當(dāng)鼠標(biāo)在畫(huà)布上方移動(dòng)時(shí)，修改我方英雄的位置          
canvas.onmousemove = function(event){
  if(curPhase===PHASE_PLAY){
      var x = event.offsetX; //鼠標(biāo)事件相對(duì)于畫(huà)布左上角的偏移量
      var y = event.offsetY;
      hero.x = x - imgsHero[0].width/2;
      hero.y = y - imgsHero[0].height/2;
  }
}

這個(gè)完了之后就可以開(kāi)始畫(huà)子彈了

//子彈對(duì)象的構(gòu)造方法function Bullet(img){    //子彈對(duì)象的初始坐標(biāo)

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;
//當(dāng)前子彈能否被刪除了
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指定子彈的移動(dòng)速度，可以設(shè)置為全局變量
      //若飛出畫(huà)布上邊界、或打中敵機(jī)，子彈可以消失
      if(this.y <= -img.height){
        this.removable = true;
      }
  }
}

子彈的話，主要和主機(jī)差不多參數(shù)，坐標(biāo)，圖片寬高和子彈畫(huà)的方法，這里主要有個(gè)參數(shù)判斷下子彈是否被刪除了，這個(gè)的話因?yàn)樽訌梽h除的話有好幾種情況，所以要弄個(gè)這個(gè)參數(shù)，然后子彈移動(dòng)的話，因?yàn)槲覀冞@個(gè)游戲做的比較簡(jiǎn)單，只是讓子彈往前飛，所以只有y坐標(biāo)變化，這里有個(gè)判斷，如果是想要弄的多種子彈彈道，這個(gè)需要大家自己發(fā)揮了，其實(shí)也很簡(jiǎn)單的，主要就是需要點(diǎn)計(jì)算公式而已

因?yàn)閤y坐標(biāo)的圓點(diǎn)在左上角，所以y坐標(biāo)是只要比自己的圖片高度小，也就算是出了屏幕了，就可以算是可以銷(xiāo)毀了

子彈的話因?yàn)樗凶訌検菍儆谝恢币诮缑嫔巷@示的，所以就需要把所有子彈放在一個(gè)數(shù)組里，方便子彈記錄：

//子彈列表對(duì)象，其中保存著當(dāng)前的所有子彈
var bulletList;
function BulletList(){
  this.arr = [];
  //畫(huà)布上所有的子彈對(duì)象
  this.add = function(bullet){
  //添加子彈
    this.arr.push(bullet);
  }
this.remove = function(i){
//刪除子彈
    this.arr.splice(i, 1); 
 }
this.draw = function(){ //繪制每一個(gè)子彈
    //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(); //讓每個(gè)子彈都移動(dòng)
        if(this.arr[i].removable){
            this.remove(i);
        }
    }
  }
}

這里是子彈列表了，主要就是子彈的添加方法，添加進(jìn)去之后每次移動(dòng)的時(shí)候需要讓每一顆子彈都要重畫(huà)一下，然后如果刪除子彈，就從數(shù)組里去掉一個(gè)，這些都需要弄個(gè)方法，以便外面調(diào)用

今天講到這里了，明天差不多就可以講完了，下次再見(jiàn)