上一篇我們介紹了關於Canvas的基礎知識，用Canvas繪製各種圖形和圖片，在上一篇的基礎上我們來做一個基於HTML5的坦克大戰遊戲，下面我們開始吧
一、用Canvas畫出我們的坦克車
我們設計的坦克結構如下圖所示，如果有的朋友有更好的設計，希望分享並交流一下。
如上圖所示，我們的坦克基本上是由三個矩形和一個圓形一個線段組成，每個部件的尺寸進行了標記，單位為px,下面我們用上一篇中講到的知識來畫出我們的坦克，注意：我們在畫坦克的時候應該選擇一個參考點，這裡我們選擇的是坦克的左上角，如圖所示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1 id="html-坦克大战">html5-坦克大战</h1>
<!--坦克大战的战场-->
<canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>
<script type="text/javascript">
//得到画布
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();
</script>
</body>
</html>
二、怎麼讓坦克動起來？
在研究怎麼讓坦克動起來之前，我們先來研究一下怎麼讓一個小球透過鍵盤操作使其動起來。
首先我們為
標籤新增一個監聽函數<body onkeydown="test()">
監聽函數
//现在按键盘上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();
}我們可以在外部定義兩個全域的變數分別表示x軸和y軸的座標，然後透過改變ballX和ballY的值來改變小球的位置，我們用鍵盤的WDSA鍵來控制，這樣出來的效果非常奇怪，如下圖：
我們在繪製的時候沒有將以前位置的小球擦除掉，在每次重新繪製前應該先擦除一下，下面將全部程式碼貼出來：
<body onkeydown="test()">小球上下左右移动