H5 canvas控制坦克移动
接着上一篇（http://www.cnblogs.com/zhouhuan/p/H5_tankgame.html），这一篇研究一下怎么响应玩家的操作让坦克进行相应的移动。
1. 了解keydown事件
keydown这一键盘事件的触发条件为按下键盘上的任意键，如果按住不放，则会重发触发。
示例：
window.onkeydown = function(){ alert("Merry Christmas！"); };
此时载入页面之后，无论按下哪个键，都会弹出“Merry Christmas！”的弹窗。
2. 了解键码和字符编码
① 键码
在发生keydown和keyup事件时，event对象的keyCode（键码）属性会包含一个代码，与键盘上一个特定的键对应。对于数字字母字符集，keyCode属性的值与ASCII码中对应小写字母或数字的编码相同。字母中的大小写不影响。
window.onkeydown = function(eve){ alert(eve.keyCode); };
此时按键盘上的任意键，便可得到所按键对应的keyCode
② 字符编码
发生keypress事件时，event对象的charCode属性会包含一个值，这个值就是按下的那个键所代表字符的ASCII编码，并且，同一个字母的大小写对应的字符编码也是不一样的。
要注意的是，keypress事件只有在按下字符键时才会触发，并不是所有的按键，像Ctrl, Alt之类的就不会触发该事件。
3. 热身环节
① 获取玩家的指令
我们先看看怎么获取到玩家的操控指令，这里我们写一段代码：
window.onkeydown = function(eve){ alert("所按键对应的键码是： " + eve.keyCode); };
大家运行一下就可以知道键盘上每一个按键所对应的键码是多少了，然后取自己需要的按键继续编写程序。这里需要的是方向键的上下左右，当然这个在网上可以查到，也非常方便。
我们运行了之后会发现，上下左右对应的键码分别是38, 40, 37, 39。考虑到有些玩家习惯于使用W A S D来操作，那我们把这几个键也做进去，这几个键对应的键码分别是87, 65, 83, 68。
OK，知道了上面这些东西之后我们就可以写出下面这段代码了：
window.onkeydown = function(eve){ if(eve.keyCode == 38 || eve.keyCode == 87){ alert("上"); }else if(eve.keyCode == 40 || eve.keyCode == 83){ alert("下"); }else if(eve.keyCode == 37 || eve.keyCode == 65){ alert("左"); }else if(eve.keyCode == 39 || eve.keyCode == 68){ alert("右"); } };
此时，根据玩家的操作便能弹出相应方向的文字。
鉴于上面if语句的条件分支数量略多，我们最好用switch语句改写一下上面的代码，这样可以提高性能，如下：
window.onkeydown = function(eve){ switch(eve.keyCode){ case 38: case 87: alert("上"); break; case 40: case 83: alert("下"); break; case 37: case 65: alert("左"); break; case 39: case 68: alert("右"); } };
② 封装画坦克的函数
前面我们写的画坦克的代码其实是面向过程的，我们将它拿过来改巴改巴做以封装：
function drawTank(x,y){ var myCanvas = document.getElementById('floor'); var cxt = myCanvas.getContext('2d'); cxt.fillStyle = "#542174"; cxt.fillRect(x,y,20,65); cxt.fillRect(x+70,y,20,65); cxt.fillRect(x+23,y+10,44,50); cxt.fillStyle = "#FCB827"; cxt.beginPath(); cxt.arc(x+45,y+35,16,0,2*Math.PI,false); cxt.closePath(); cxt.fill(); cxt.strokeStyle = "#FCB827"; cxt.lineWidth = "8.0"; cxt.moveTo(x+45,y+35); cxt.lineTo(x+45,y-25); cxt.stroke(); }
这个函数调用的时候传两个参数(x, y)，分别代表坦克左上角的X坐标，Y坐标。
封装好之后，在任何地方只要一调用，便可以造出一个坦克了：
drawTank(150,200); //以(150,200)的点为坦克的左上角（左边履带的左上角）造一个坦克
③ 了解clearRect()方法
有一个前面遗漏掉的知识点clearRect()方法，这个方法是做游戏的关键，用来清空指定矩形内的所有像素，传四个参数(x, y, width, height)，前两个参数表示要清除的矩形的左上角坐标，后两个参数表示要清除的矩形的宽高。
比如我们先画一个矩形：
var myCanvas = document.getElementById('floor'); var cxt = myCanvas.getContext('2d'); cxt.fillStyle = "orange"; cxt.fillRect(50,50,300,80);
得到：
我们再加上下面这句代码运行一下：
cxt.clearRect(0,0,800,500);
此时会发现整个画布又空空如也了，因为我们把整个画布的像素都清除掉了。
4. 热身完毕，正式开始
前面热身热了这么久，相信大家已经可以写出一个根据玩家的操作移动的坦克了。
我们尽量以面向对象的思想来写每一个过程，代码如下：
//封装一个获取绘图环境的函数 function getCxt(){ var myCanvas = document.getElementById('floor'), myContext = myCanvas.getContext('2d'); return myContext; } //封装一个画坦克的函数，传两个参数x,y,分别代表左上角的横纵坐标 function drawTank(x,y){ var cxt = getCxt(); cxt.fillStyle = "#542174"; cxt.fillRect(x,y,20,65); cxt.fillRect(x+70,y,20,65); cxt.fillRect(x+23,y+10,44,50); cxt.fillStyle = "#FCB827"; cxt.beginPath(); cxt.arc(x+45,y+35,16,0,2*Math.PI,false); cxt.closePath(); cxt.fill(); cxt.strokeStyle = "#FCB827"; cxt.lineWidth = "8.0"; cxt.moveTo(x+45,y+35); cxt.lineTo(x+45,y-25); cxt.stroke(); } //初始化一个对象myTank,用来存储一些属性和方法 var myTank = {}; myTank.x = 350; myTank.y = 400; myTank.step = 3; //设置步长，步长越大那么坦克运动的速度越快 //先画一个坦克出来 drawTank(myTank.x,myTank.y); //封装一个更新战场的函数 function updateFloor(){ var cxt = getCxt(); cxt.clearRect(0,0,800,500); //更新之前先清除画布 drawTank(myTank.x,myTank.y); //清除完之后重新造坦克，坦克要移动就必须实时地根据坐标重新来造 } //设置一个间歇调用的函数，每隔100ms更新一下战场 setInterval(function(){ updateFloor(); },100); //响应玩家的操作指令 window.onkeydown = function(eve){ switch(eve.keyCode){ case 38: case 87: myTank.y -= myTank.step; //Y坐标减小向上移动 break; case 40: case 83: myTank.y += myTank.step; //Y坐标增加向下移动 break; case 37: case 65: myTank.x -= myTank.step; //X坐标减小向左移动 break; case 39: case 68: myTank.x += myTank.step; //X坐标增加向右移动 } };
所有必要的说明都已经写在了注释中。这样写出来之后，我们发现坦克已经可以随着玩家的按键上下左右移动了，但是还存在一点问题，坦克运动起来非常的生硬，不管向哪个方向动它的头一直都是朝上的，我们必须在这个基础上做以修改，下篇待续...
