【IT168技術】歡迎來到我的HTML5遊戲編程小教程。我會儘量簡要說明如何使用HTML5 canvas元素和JavaScript創建簡單的遊戲。本教程將省略一些代碼，但絕非故意。您可以隨時查看我的遊戲演示。
HTML5有許多的神奇功能，諸如:
畫布元素
視頻和音頻的支持
本地存儲
離線Web應用程式
地理定位
…
這篇文章不打算覆蓋所有的HTML5規範，有關HTML5的更多信息，請參考HTML5:http://diveintohtml5.org/.
之前，我們使用使用HTML編寫網頁遊戲，現在卻在使用HTML5。那麼兩者有區別嗎?元素用來創建客戶端遊戲時非常方便。針對客戶端遊戲編程，Canvas和JavaScript使用起來非常簡單。
典型的遊戲類
在開始我們的遊戲實現和畫布元素之前，我想很快向您展示典型的遊戲類結構:
function Game() {
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毫秒渲染我們的遊戲。這種方式特別適用於哪些後臺有計算程序，人工智慧運動、動畫等相關的遊戲。對於哪些只基於用戶輸入而重畫遊戲內容的靜態遊戲，可以修改這個框架類和去除遊戲循環。
function Game() {
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頁面。
<html>
<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標記:
<script type="text/javascript" src="../Scripts/test01.js"></script>
這就是部分的JavaScript文件。
var _canvas = document.getElementById('canvas');
var _canvasContext = null;
//check whether browser supports getting canvas context
if (_canvas && _canvas.getContext) {
_canvasContext = _canvas.getContext('2d');
// ... drawing here ...
}
在本教程中，我將快速講解canvas上下文相關的繪畫方法，他們是：
rawImage(img,x,y);
• 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:
_canvas = document.getElementById('canvas');
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緩衝區的內容輸出到屏幕。就這麼簡單!