用 HTML5 Canvas 做游戏（一）

HTML5 已经诞生很多年了，在 Canvas 上开发游戏也不再是一件新鲜事。如果某一天你能够在朋友们面前炫耀自己亲手制作的游戏作品，而且这个游戏具有美观漂亮的画面，那一定是件很拉风的事情！　　那么有多少人自己动手写过游戏呢？有人说那太难太复杂了，而我要说：不！你觉得游戏难做是因为你不了解其中的奥秘。我将逐步给你解释、介绍如何使用 Canvas 制作开发符合你脑海中想象的游戏，由简入繁地慢慢深入，并且告诉你如何把你的作品发布在移动设备（诸如我们十分喜爱的就是Android或iPhone手机）上。　　当然这篇文章并不是教授基本编程语言或者逻辑概念的，所以我希望正在阅读此文的你应该具备如下知识或经验：　　　1）基本的HTML（以及CSS）知识——不需要了解太多，但毕竟我们的程序（游戏）是运行在HTML环境中，或者说是在浏览器中运行的。　　　2）Javascript语言编程经验——这个是主体，在部分内容里将会有比较高深的写法出现（开玩笑的，别被我吓倒）。　　　3）初中级别的几何数学常识——主要是三角函数的运用，你得知道如何换算角度以及坐标，这将保证你游戏中的物体有个正确的位置。　　好了，让我们开始吧！　　如图，先把我们的 html 文件写出来，这是整个程序的宿主和载体。　　如果你的浏览器不支持 HTML5 或者不支持 Canvas 那么你将有幸看到代码中的文字：“do not support HTML5”。否则就可以在浏览器中看到正确的结果。　　哎呀！我们的 Canvas 在哪儿？！别着急，因为 Canvas 也是一个 HTML 的控件，你想要看到它的话请照我说的做，我们把 Canvas 标签的 style 属性加点内容。　　然后再看效果，怎么样？看到我们的 Canvas 了吧。　　我们之后所有的代码效果都会在这个方框的范围内显示出来，但是需要注意的是超出这个范围的区域里可能是有内容的，只是我们可视范围只有这么大的一块。因而我在这里依然需要引入并介绍Canvas 的坐标系。　　和绝大多数计算机图形坐标系一样， Canvas 的原点也在画面左上角（也就是 Canvas 的左上角），向右是 x 轴正方向，向下是 y 轴正方向。在从原点开始到Canvas 边界为止正方向上的所有内容都是可见的，超出这个范围的部分，包括负方向（x 轴或 y 轴）和边界外的内容是看不到然而有时确实是存在的。你一定注意到了”边界“这个词，回头看看我们的代码里定义过的那个 Canvas 是不是有两个属性 width 和 height （宽度和高度）？所以这个 Canvas 的可视范围就是原点开始到宽500个像素，高450个像素的区域。　　现在让我们来画点什么吧，一个白板太难看了。而且老实说，白色太刺眼。于是我决定把代码稍作修改，给 body 标签加上背景色，把 Canvas 的背景色也调整一下。这样舒服多了。　　在 Canvas 中绘制图形图片需要创建 Context 我们可以直接从 Canvas 获取。Canvas 可以提供 2D 和 3D 的绘制工具（Context），我们还是先从 2D 入手吧，我保证以后会介绍 3D 的。那么首先要取得 Canvas 控件，这用 document.getElementById(ElementName ); 就可以获得，之后调用 Canvas 的方法 getContext('2d'); 取得 Context 。Canvas 图形编程的第一个秘密：所有图形的绘制通过 Context 完成！即便是 3D 图形也是如此，只不过参数需要替换一下变成getContext('3d'); 并且绘制方式会有不同。　　所以，现在你应该在脑海里有了这么两段代码：　　　　　　varcanvasObj = document.getElementById('cvs');　　　　　　var context = canvasObj.getContext('2d');　　第一行取得 Canvas 控件，第二行获取 Context 实例，接下来对 Context 的实例进行设置并使用就可以绘制出图形。想象一下你在画画的时候有过的一些步骤（你一定画过，不论是好还是坏），首先拿起笔，然后蘸上颜料，最后才在纸张或者画布上面涂抹。既然 Canvas 直译过来就是”画布“，那么就把我们的 Context 当作画笔吧，它也需要先配置好笔形、颜料最后才能够绘图。　　　　　　context.fillStyle = '#ffffaa';　　　　　　context.fillRect(0,0,50,50);　　先设置画笔以填充方式绘制时所需要的颜色，然后用填充的方法绘制一个矩形（说白了就是画出一个实心的矩形）。fillRect(0,0,50,50); 第一个和第二个参数代表坐标，第三个参数表示宽度，第四个参数表示高度。这将在 Canvas 上原点为起点绘制大小为 50x50 像素的正方形，请注意这个正方形的左上角是坐标点，这就是 Context 绘图的规则。所有图形绘制都以图形的左上角作为坐标点。　　我得警告你！如果你按照这段代码像下图中这么写出来的话（当然是在