】欢迎来到我的HTML5游戏编程小教程。我会尽量简要说明如何使用HTML5 canvas元素和Javascript创建简单的游戏。本教程将省略一些代码，但绝非故意。您可以随时查看我的游戏演示。
之前，我们使用使用HTML编写网页游戏，现在却在使用HTML5。那么两者有区别吗?元素用来创建客户端游戏时非常方便。针对客户端游戏编程，Canvas和Javascript使用起来非常简单。
这是一个典型的Javascript游戏骨架。有趣的是“setInterval”方法。当完成所有资源的加载后，我们可以开始主要的游戏循环，收集用户输入，执行计算，并每隔X毫秒渲染我们的游戏。这种方式特别适用于哪些后台有计算程序，人工智能运动、动画等相关的游戏。对于哪些只基于用户输入而重画游戏内容的静态游戏，可以修改这个框架类和去除游戏循环。
这两个游戏更新和重画操作均只发生于用户输入。这种方法有效减少了CPU负载，只适用于简单的游戏。
我要给你示例一个大家熟知的非常简单的经典游戏Sokoban。几乎每个游戏平台都有不同版本的sokoban，但是我还没有看到任何使用canvas元素的应用。
就是这样!现在我们可以看到一个支持Canvas元素的空白页面，出现在支持的浏览器：Chrome、Firefox和Safari。IE 8以及相应的旧版本不支持Canvas。
在我们开始利用画布绘画前，我们需要得到绘图上下文。Canvas公开一个或多个绘图上下文，但是我们将专注于最受欢迎的一个“2 d”上下文。
元素。fillRect和strokeRect都用于绘图的矩形。唯一的区别是，fillRect是画一个填充色彩的矩形，而strokeRect是画一个空矩形，边框为彩色。fillText用于在画布上放置文本。
因为我们现在有一个游戏骨架，我们也知道如何利用Canvas绘图。在实现真正的游戏之前，唯一剩下的是双缓冲技术。不过我们不会活灵活现地演示这种技术，因为我们没有闪烁的动画效果。但是，既然这篇文章是你学习Canvas游戏的起点，我寻思着应该向您展示如何利用双缓冲技术在Canvas快速绘画。
双缓冲技术背后的想法是减少闪烁：首先基于内存缓冲区绘画，然后将内存中渲染完成的图像，刷入到屏幕上。
