今天继续讲下最后的几块飞机大战，也属于是重要部分
重要点一呢就是如何结束，其实呢这个应该和游戏的开始一起讲的，因为如果要做游戏，主要的关键点就是开始结束，没有开始结束，整个游戏就没有意义了
首先我们先接着上篇来讲下，因为到了开始的时候，然后我们需要把所有的飞机画出来，然后呢还需要让飞机跟着鼠标的移动来移动，而且在移动中，我们要开始发射子弹：
/***游戏进行中***/
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);
}
}
}
}
这里是子弹列表了，主要就是子弹的添加方法，添加进去之后每次移动的时候需要让每一颗子弹都要重画一下，然后如果删除子弹，就从数组里去掉一个，这些都需要弄个方法，以便外面调用
今天讲到这里了，明天差不多就可以讲完了，下次再见
