【IT168技术】欢迎来到我的HTML5游戏编程小教程。我会尽量简要说明如何使用HTML5 canvas元素和JavaScript创建简单的游戏。本教程将省略一些代码，但绝非故意。您可以随时查看我的游戏演示。
HTML5有许多的神奇功能，诸如:
画布元素
视频和音频的支持
本地存储
离线Web应用程序
地理定位
…
这篇文章不打算覆盖所有的HTML5规范，有关HTML5的更多信息，请参考HTML5:http://diveintohtml5.org/.
之前，我们使用使用HTML编写网页游戏，现在却在使用HTML5。那么两者有区别吗?元素用来创建客户端游戏时非常方便。针对客户端游戏编程，Canvas和JavaScript使用起来非常简单。
典型的游戏类
在开始我们的游戏实现和画布元素之前，我想很快向您展示典型的游戏类结构:
this.Initialize = function () {
// initialize all game variables
}
this.LoadContent = function () {
// load content – graphics, sound etc.
// since all content is loaded run main game loop
// Calls RunGameLoop method every ‘draw interval’
this.GameLoop = setInterval(this.RunGameLoop, this.DrawInterval);
}
this.RunGameLoop = function (game) {
this.Update();
this.Draw();
}
this.Update = function () {
// update game variables, handle user input, perform calculations etc.
}
this.Draw = function () {
// draw game frame
}
}
这是一个典型的JavaScript游戏骨架。有趣的是“setInterval”方法。当完成所有资源的加载后，我们可以开始主要的游戏循环，收集用户输入，执行计算，并每隔X毫秒渲染我们的游戏。这种方式特别适用于哪些后台有计算程序，人工智能运动、动画等相关的游戏。对于哪些只基于用户输入而重画游戏内容的静态游戏，可以修改这个框架类和去除游戏循环。
this.Initialize = function () {
// initialize all game variables
}
this.LoadContent = function () {
// load content – graphics, sound etc.
var ourGame = this;
$(document).bind('keyup', function (event) {
ourGame.Update(event);
ourGame.Draw();
});
}
this.Update = function (event) {
// update game variables, handle user input, perform calculations etc.
}
this.Draw = function () {
// draw game frame
}
}
这两个游戏更新和重画操作均只发生于用户输入。这种方法有效减少了CPU负载，只适用于简单的游戏。
我要给你示例一个大家熟知的非常简单的经典游戏Sokoban。几乎每个游戏平台都有不同版本的sokoban，但是我还没有看到任何使用canvas元素的应用。
${PageNumber}canvas入门
让我们仅使用单个canvas元素，开始创建我们的HTML5页面。
<head>
<title>Sokoban</title>
</head>
<body>
<canvas id="canvas" width="800" height="500">
Canvas not supported.
</canvas>
</body>
</html>
就是这样!现在我们可以看到一个支持Canvas元素的空白页面，出现在支持的浏览器：Chrome、Firefox和Safari。IE 8以及相应的旧版本不支持Canvas。
在我们开始利用画布绘画前，我们需要得到绘图上下文。Canvas公开一个或多个绘图上下文，但是我们将专注于最受欢迎的一个——“2 d”上下文。
让我们添加一个引用JavaScript文件后直接我们关闭canvas标记:
这就是部分的JavaScript文件。
var _canvasContext = null;
//check whether browser supports getting canvas context
if (_canvas && _canvas.getContext) {
_canvasContext = _canvas.getContext('2d');
// ... drawing here ...
}
在本教程中，我将快速讲解canvas上下文相关的绘画方法，他们是：
• fillRect(x,y,width、height);
• strokeRect(x,y, width、height);
• fillText(“text”,x,y);
重要提示：Canvas的开始坐标 (0,0)位于左上角。
这些方法非常简单。drawImage要么绘制指定Image对象，要么根据x，y坐标，绘画
元素。fillRect和strokeRect都用于绘图的矩形。唯一的区别是，fillRect是画一个填充色彩的矩形，而strokeRect是画一个空矩形，边框为彩色。fillText用于在画布上放置文本。
点击以下链接，浏览演示内容：
http://demo2.felinesoft.com/Sokoban/Home/Test01
关于渲染2个矩形，文本和图像的JavaScript源文件，可以在这里找到:
http://demo2.felinesoft.com/Sokoban/Scripts/Test01.js
这就是测试页面：
双缓冲
因为我们现在有一个游戏骨架，我们也知道如何利用Canvas绘图。在实现真正的游戏之前，唯一剩下的是双缓冲技术。不过我们不会活灵活现地演示这种技术，因为我们没有闪烁的动画效果。但是，既然这篇文章是你学习Canvas游戏的起点，我寻思着应该向您展示如何利用双缓冲技术在Canvas快速绘画。
双缓冲技术背后的想法是减少闪烁：首先基于内存缓冲区绘画，然后将内存中渲染完成的图像，刷入到屏幕上。
我们只需要稍微修改我们的Canvas的JavaScript:
if (_canvas && _canvas.getContext) {
_canvasContext = _canvas.getContext('2d');
_canvasBuffer = document.createElement('canvas');
_canvasBuffer.width = _canvas.width;
_canvasBuffer.height = _canvas.height;
_canvasBufferContext = _canvasBuffer.getContext('2d');
}
现在，我们就调用_canvasBufferContext 而非_canvasContext对象绘图了。如下：
_canvasContext.drawImage(_canvasBuffer, 0, 0);
这样就把Canvas缓冲区的内容输出到屏幕。就这么简单!
