一、用Canvas画出我们的坦克

咱们先学画坦克！其实很简单，就几个形状组成，尺寸我写在下面啦（都是像素，px结尾哦）。用Canvas画的时候别忘了参考点我选了左上角作为参考点，图片上也标出来了，跟着画就能轻松搞定。

二、怎么让坦克动起来

搞定了坦克图像后，就该琢磨让它活蹦乱跳。让我们先玩点小把戏，试试看键盘如何操控这个小球。canvas可得加上个监听功能，再设个全局变量储存小球的坐标。然后就可以使用键盘上的WSDA按键指挥小球移动。不过要小心，别忘了在重新绘制前清除屏幕上的旧位置标记哟~

  
  
  
  
  
  
html5-坦克大战
  
  
  
  
    //得到画布  
    var canvas1 = document.getElementById("tankMap");  
      
    //定义一个位置变量  
    var heroX = 80;  
    var heroY = 80;  
      
    //得到绘图上下文  
    var cxt = canvas1.getContext("2d");  
    //设置颜色  
    cxt.fillStyle="#BA9658";  
    //左边的矩形  
    cxt.fillRect(heroX,heroY,5,30);  
    //右边的矩形  
    cxt.fillRect(heroX+17,heroY,5,30);  
    //画中间的矩形  
    cxt.fillRect(heroX+6,heroY+5,10,20);  
    //画出坦克的盖子  
    cxt.fillStyle="#FEF26E";  
    cxt.arc(heroX+11,heroY+15,5,0,360,true);  
    cxt.fill();  
    //画出炮筒  
    cxt.strokeStyle="#FEF26E";  
    cxt.lineWidth=1.5;  
    cxt.beginPath();  
    cxt.moveTo(heroX+11,heroY+15);  
    cxt.lineTo(heroX+11,heroY);  
    cxt.closePath();  
    cxt.stroke();  
      
      
  
  

三、让我们的坦克动起来

小绿球动起来，坦克才能跑。想让坦克直直地开，就得换个画坦克的代码。不过，我们还得让它更炫酷，能转弯。想象一下，坦克转起来，炮管也得跟着转，这可得算角度和坐标。别担心，你们数学应该都挺好的，按照图上的比例算一算，转完后坦克就变成这个样子。

四、坦克的灵活转向

坦克可不仅仅只会直线路线行进，它还要能灵活地转弯！你瞧，无论是向左朝右，还是向上向下，炮筒的角度都是不一样滴！我们干脆把这四个方向分俩大类来搞定，再细致点儿划分。用面向对象那套方法，把代码包装好，这样看起来清爽多了，以后维护也方便。

五、添加敌人与障碍物

坦克跑得单调？咱们多加些敌人跟障碍！画敌人坦克就盯着自家坦克来，改下颜色就好；障碍的话，画点墙呀石头就让坦克走远点儿。这些搞上去，游戏就能看起来有趣点儿。

//现在按键盘上ASDW移动小球  
//说明：当我们按下一个键，实际上触发了一个onkeydown事件  
function test(){  
    var code = event.keyCode;  //键盘上字幕的ASCII码  
    switch(code){  
        case 87:  
            ballY--;  
            break;  
        case 68:  
            ballX++;  
            break;  
        case 83:  
            ballY++;  
            break;  
        case 65:  
            ballX--;  
            break;  
    }  
    //重新绘制  
    drawBall();  
}

六、实现碰撞检测

要有敌人和墙壁挡路，所以要注意撞击检测！坦克可别硬撞过去，得写个小程序看看坦克离别的东西多远，太近的话就停下来或者转弯呗。这个检测运算得精确点，否则玩起来就没那么好玩。

七、加入子弹和爆炸效果

坦克大战怎么能没有子弹和炸弹？那我们得在坦克上添个开火功能，当子弹碰到敌人或者墙壁时还会产生炸裂效果！爆炸效果，我们可以搞点简陋的动画来呈现出来，比如弄个烟雾和闪光啥的，这样玩起来肯定更带劲儿！

八、完善游戏界面和音效

  
  
  
  
  
  
  
小球上下左右移动
  
  
  
  
  
    //得到画布  
    var canvas1 = document.getElementById("test");  
      
    //定义一个位置变量  
    var ballX = 80;  
    var ballY = 80;  
      
    //得到绘图上下文  
    var cxt = canvas1.getContext("2d");  
    drawBall();  
    function drawBall(){  
        //画出一个红色的圆球  
        cxt.beginPath();  //要注意闭合路径  
        cxt.fillStyle="#FF0000";  
        cxt.arc(ballX,ballY,10,0,360,true);  
        cxt.closePath();  
        cxt.fill();  
    }  
      
    //现在按键盘上ASDW移动小球  
    //说明：当我们按下一个键，实际上触发了一个onkeydown事件  
    function test(){  
        var code = event.keyCode;  //键盘上字幕的ASCII码  
        switch(code){  
            case 87:  
                ballY--;  
                break;  
            case 68:  
                ballX++;  
                break;  
            case 83:  
                ballY++;  
                break;  
            case 65:  
                ballX--;  
                break;  
        }  
        //把画布清理  
        cxt.clearRect(0,0,400,300);  
        //重新绘制  
        drawBall();  
    }  
  
  

最后，我们得把游戏画面搞得漂亮点儿，加点背景图片和按钮啥的，让大家看了舒坦。还有，声音也要弄好，像开火声、爆炸声这些不能少，这样才好玩儿！

九、总结与未来展望

咱们的坦克大战游戏终于搞定！一路走来，弄出坦克、让它活起来，还有各种游戏元素，真心不简单。不过别急，以后我们还能加上更多好玩儿的，比如大家一起玩儿，或者更聪明的电脑对手什么的。

十、你的想法？

咋样看这篇文章，你是啥感觉？你觉着这款坦克大战游戏还能咋改？快到评论区跟我们聊聊，别忘了给我们点个赞并把它分享出去！