这篇博客主要讲了如何处理HTML5 Canvas 游戏中的角色移动问题。
笔者这几天做了一个 HTML5 Canvas 的射击类小游戏，嗯，名字叫做《DroppingBalls》，大概就是自己控制一个坦克在界面的最下面左右移动，然后上面会有怪向下移动，我们必须赶在怪完全掉下来之前将它击毙，否则我们会掉血。怪会越来越多越来越强，我们最后一定会死掉的，这没关系，因为我们的目前是在死之前拿更多的分数。
这个游戏目前还没有完全做完，也仅仅是练习作。游戏挂在笔者的个人网站上了，大家可以去看一下。
该博客中的代码仅为了表明思路，并不保证可以直接运行。若需要可以直接运行的代码，可以到该游戏页面 f12 查看：
http://dawufan.cn/HtmlGame/Game001
好了，今天的话题就是 如何实现这样的射击类小游戏的第一步，完美的控制己方坦克移动。
##主要技术
JS + Canvas
代码难度低，只要自己写过一遍就感觉非常非常简单了。代码仅是工具，但将许多代码组合在一起并让它们高效的工作，这就是一门艺术了。
##游戏分析
射击类游戏，比如坦克大战、打飞机等等，基本元素几乎相同。我们从最简单的入手来看一下。我们就以坦克举例。
首先得有玩家的坦克，然后玩家会通过键盘来控制自己的坦克移动，通过键盘控制射击，射击后会发出子弹，子弹在射出后会自动飞行，直到击中敌方坦克或者飞出地图后消失。敌方坦克的移动路线可以是随机的，也可以是设定好的。在《DroppingBalls》中，己方坦克、敌方坦克、子弹 全都是一个球Ball， 这样做的目的是因为相比于正方形等，两个圆形之间的距离是最好判断的，这将使【子弹是否能够击毁坦克】的判断非常容易。
游戏中，玩家通过wasd来控制移动，j来射击。
HTML页面中的Canvas标签id=CanvasGame， 宽=600，高=600
##分步骤实现 第1步
我们要画一个球（这里的球和圆是一个意思），表示己方坦克。
这个可以在w3school上自己看一下，这个可以做到之后就可以进行第二步了。
w3school的Canvas教程链接：
http://www.w3school.com.cn/html5/html_5_canvas.asp
##分步骤实现 第2