一、概述我们的坦克大战游戏

上次那个能开坦克乱跑的游戏是不是很好玩？那咱们今天就换个玩法试试这个坦克大战呗~想想看，驾驶着自己的坦克，跟敌人斗智斗勇，最终赢得胜利的那份成就感和激动，真的是让人热血沸腾！

//定义一个Hero类(后面还要改进）  
//x表示坦克的横坐标  
//y表示纵坐标  
//direct表示方向  
function Hero(x,y,direct){  
    this.x=x;  
    this.y=y;  
    this.speed=1;  
    this.direct=direct;  
    //上移  
    this.moveUp=function(){  
        this.y-=this.speed;  
        this.direct=0;  
    }  
    //右移  
    this.moveRight=function(){  
        this.x+=this.speed;  
        this.direct=1;  
    }  
    //下移  
    this.moveDown=function(){  
        this.y+=this.speed;  
        this.direct=2;  
    }  
    //左移  
    this.moveLeft=function(){  
        this.x-=this.speed;  
        this.direct=3;  
    }  
}  
  
    //绘制坦克  
function drawTank(tank){  
    //考虑方向  
    switch(tank.direct){  
        case 0:     //向上  
        case 2:     //向下  
            //设置颜色  
            cxt.fillStyle="#BA9658";  
            //左边的矩形  
            cxt.fillRect(tank.x,tank.y,5,30);  
            //右边的矩形  
            cxt.fillRect(tank.x+17,tank.y,5,30);  
            //画中间的矩形  
            cxt.fillRect(tank.x+6,tank.y+5,10,20);  
            //画出坦克的盖子  
            cxt.fillStyle="#FEF26E";  
            cxt.arc(tank.x+11,tank.y+15,5,0,Math.PI*2,true);  
            cxt.fill();  
            //画出炮筒  
            cxt.strokeStyle="#FEF26E";  
            cxt.lineWidth=1.5;  
            cxt.beginPath();  
            cxt.moveTo(tank.x+11,tank.y+15);  
            if(tank.direct==0){         //只是炮筒的方向不同  
                cxt.lineTo(tank.x+11,tank.y);  
            }else{  
                cxt.lineTo(tank.x+11,tank.y+30);  
            }  
            cxt.closePath();  
            cxt.stroke();  
            break;  
        case 1:  
        case 3:  
            //设置颜色  
            cxt.fillStyle="#BA9658";  
            //上边的矩形  
            cxt.fillRect(tank.x-4,tank.y+4,30,5);  
            //下边的矩形  
            cxt.fillRect(tank.x-4,tank.y+17+4,30,5);  
            //画中间的矩形  
            cxt.fillRect(tank.x+5-4,tank.y+6+4,20,10);  
            //画出坦克的盖子  
            cxt.fillStyle="#FEF26E";  
            cxt.arc(tank.x+15-4,tank.y+11+4,5,0,Math.PI*2,true);  
            cxt.fill();  
            //画出炮筒  
            cxt.strokeStyle="#FEF26E";  
            cxt.lineWidth=1.5;  
            cxt.beginPath();  
            cxt.moveTo(tank.x+15-4,tank.y+11+4);  
            if(tank.direct==1){         //只是炮筒的方向不同  
                cxt.lineTo(tank.x+30-4,tank.y+11+4);  
            }else{  
                cxt.lineTo(tank.x-4,tank.y+11+4);  
            }  
            cxt.closePath();  
            cxt.stroke();  
            break;    
    }  
      
}

二、将JS文件分离出来

//画出坦克的盖子  
cxt.fillStyle="#FEF26E";  
cxt.arc(tank.x+15-4,tank.y+11+4,5,0,360,true);  
cxt.fill();

首先，咱们得把画坦克的那段JS代码挪到新的文件里头。这样HTML文件看起来会更整洁，以后管理起来也方便多了。再说了，这也是面向对象编程的一个小技巧，可以让代码更清晰明了。

三、感谢Mark_Lee的提醒

上次咱们造那坦克盖子形状有点怪，不够顺眼。好在有Mark_Lee提醒，我们找出问题换了个新的。看看，现在好看多了，真像那回事儿！

  
  
  
  
  
  
html5-坦克大战
  
  
  
  
  
  
  
  
    //得到画布  
    var canvas1 = document.getElementById("tankMap");  
    //得到绘图上下文  
    var cxt = canvas1.getContext("2d");  
      
    //我的tank  
    //规定0向上、1向右、2向下、3向左  
    var hero = new Hero(40,40,0);  
    drawTank(hero);  
  
      
    //接收用户按键的函数  
    function getCommand(){  
        var code = event.keyCode;  //键盘上字幕的ASCII码  
        switch(code){  
            case 87:  
                hero.moveUp();  
                break;  
            case 68:  
                hero.moveRight();  
                break;  
            case 83:  
                hero.moveDown();  
                break;  
            case 65:  
                hero.moveLeft();  
                break;  
        }  
        //把画布清理  
        cxt.clearRect(0,0,400,300);  
        //重新绘制  
        drawTank(hero);  
    }  
  
  

四、绘制敌人的坦克

画坦克看起来挺容易？其实还有点儿挑战！涂个色就能搞定吗？老实讲，真没什么用处。咱们得找找坦克的共性，那才能画出自家的坦克大战对手。

五、使用面向对象的思想

就算JavaScript不是标准面向对象语言，但照样能玩转面对面编程。那个“物体冒充原理”咋回事儿？说白了，就是让一个东西偷偷学别人的招数，这样你就能同时操控自家和敌方的坦克。

六、绘制坦克的drawTank函数

知道了我方和敌人的坦克是啥类型后，还得调画坦克的dearTank吗？别担心这不用操心。这个函数就是用来画我们或对手的坦克哒，统统拿来用就对了！

function  classA(color){  
  this.color = color;  
  this.show = function(){alert(this.color);}  
}  
/* 
   Note: 
     1> this 代表的是classA函数所构建的对象，而非函数classA对象本身这样说主要是为了避免（function is object）的影响; 
     2> 在构建classA对象时，是通过this来初始化的属性和方法的，如果用classB的this去冒充classA的this，那么就实现了简单的继承了 
*/

七、创建坦克对象

咱们这儿有敌我双方的坦克，快让他们开始行动！想象一下，它们在战场上互相追逐，开火射击，多刺激！

八、让坦克发子弹

//定义一个Tank类（基类）  
function Tank(x,y,direct,color){  
    this.x=x;  
    this.y=y;  
    this.speed=1;  
    this.direct=direct;  
    this.color=color;  
    //上移  
    this.moveUp=function(){  
        this.y-=this.speed;  
        this.direct=0;  
    }  
    //右移  
    this.moveRight=function(){  
        this.x+=this.speed;  
        this.direct=1;  
    }  
    //下移  
    this.moveDown=function(){  
        this.y+=this.speed;  
        this.direct=2;  
    }  
    //左移  
    this.moveLeft=function(){  
        this.x-=this.speed;  
        this.direct=3;  
    }  
}  
  
//定义一个Hero类  
function Hero(x,y,direct,color){  
    //下面两句话的作用是通过对象冒充达到继承的效果  
    this.tank=Tank;  
    this.tank(x,y,direct,color);  
}  
  
//定义一个EnemyTank类  
function EnemyTank(x,y,direct,color){  
    this.tank=Tank;  
    this.tank(x,y,direct,color);  
}

我家的坦克就是个打酱油的，还不能发炮。下次我告诉你怎么让它砰砰响起来，想想都刺激，按个按钮，一颗导弹飕地飞过去，敌方坦克瞬间爆炸，那感觉太爽了！

总结：

大战炮弹坦克的日子来了！虽然还没完善，但是每次改进不都是往好地方走。你们咋想的？要不要来点儿漂移技能，还是能跟飞机对打，或者有趣点的地图设计？赶快留言给我！别忘了点赞！

//我的tank  
//规定0向上、1向右、2向下、3向左  
var hero=new Hero(40,40,0,heroColor);  
//敌人的tank  
var enemyTanks=new Array();  
for(var i=0;i<3;i++){  
    var enemyTank = new EnemyTank((i+1)*50,0,2,enemyColor);  
    enemyTanks[i]=enemyTank;      
}