這是我翻譯自LostDecadeGames主頁的一篇文章，原文地址：How To Make A Simple HTML5 Canvas Game。

下面是正文：

自從我制作了一些HTML5游戲（例如Crypt Run）后，我收到了很多建議，要求我寫一篇關于怎樣利用HTML5 Canvas制作游戲的入門教程。花了一點時間考慮怎么著手寫這篇文章后，我決定先實現一個我覺得最最簡單的游戲，然后一行代碼一行代碼地進行講解。

讓我們開始吧，首先看看game.js，當然你也可以先玩玩這個游戲（譯注：附件是游戲源碼，用瀏覽器打開其中的index.html就可以玩了，或者也可以到lostdecadegames官網上去玩）。

附件下載地址：simple_canvas_game



1. 創建一個Canvas對象

?

// Create the canvasvar canvas = document.createElement("canvas");var ctx = canvas.getContext("2d");canvas.width = 512;canvas.height = 480;document.body.appendChild(canvas);

我們首先要做的是創建一個canvas對象。可以用JavaScript或HTML來做，都非常簡單。此處我用的是JS。當創建了canvas之后，我們就可以獲取它的上下文對象（context）、設置尺寸，并且把它加到當前文檔中。

2. 載入圖片

// Background imagevar bgReady = false;var bgImage = new Image();bgImage.onload = function () {bgReady = true;};bgImage.src = "images/background.png";

游戲需要圖像，所以讓我們載入一些圖片吧。我想盡量簡單化，所以只用了Image對象來做，當然，還可以將載入圖像的功能封裝成一個類或別的任何形式。代 碼中的bgReady用來標識圖片是否已完全載入，只有當圖片載入完成后，我們才能使用它，如果在載入完成前就對其進行繪制或渲染，JS將會報一個DOM error的錯誤。

我們會用到三張圖片（背景、英雄、怪物），每張圖片都需要這樣處理。

3. 定義游戲要使用的對象

// Game objectsvar hero = {speed: 256, // movement in pixels per secondx: 0,y: 0};var monster = {x: 0,y: 0};var monstersCaught = 0;

定義一些變量，稍后會用到。hero對象的speed屬性表示英雄的移動速度（像素/秒）；monster對象不會移動，所以僅僅具有一對坐標；monstersCaught表示玩家抓住的怪物數量。

4. 處理玩家輸入

// Handle keyboard controls var keysDown = {}; addEventListener("keydown", function (e) {keysDown[e.keyCode] = true; }, false); addEventListener("keyup", function (e) {delete keysDown[e.keyCode]; }, false);

現在進行輸入的處理。（對具有web開發背景的人來說，這是目前為止第一個具有挑戰性的部分）對一般的網頁來說，當用戶開始輸入時，可能需要馬上開始播放 動畫或請求數據。但在這里，我們想讓游戲邏輯在一個單獨的地方對游戲中發生的事情進行處理。為此我們需要將用戶輸入保存下來以備稍后處理，而不是立即處 理。
我們通過簡單地將事件對應的鍵編碼（keyCode）保存在keysDown變量中來實現。如果該變量中具有某個鍵編碼，就表示用戶目前正按下這個鍵。簡單吧！

5. 新游戲

// Reset the game when the player catches a monstervar reset = function () {hero.x = canvas.width / 2;hero.y = canvas.height / 2;// Throw the monster somewhere on the screen randomlymonster.x = 32 + (Math.random() * (canvas.width - 64));monster.y = 32 + (Math.random() * (canvas.height - 64));};

通過調用reset函數來開始新游戲。該函數將英雄（即玩家角色）放到屏幕中間，然后隨機選擇一個位置來安置怪物。

6. 更新對象

// Update game objectsvar update = function (modifier) {if (38 in keysDown) { // Player holding uphero.y -= hero.speed * modifier;}if (40 in keysDown) { // Player holding downhero.y += hero.speed * modifier;}if (37 in keysDown) { // Player holding lefthero.x -= hero.speed * modifier;}if (39 in keysDown) { // Player holding righthero.x += hero.speed * modifier;}// Are they touching?if (hero.x <= (monster.x + 32)&& monster.x <= (hero.x + 32)&& hero.y <= (monster.y + 32)&& monster.y <= (hero.y + 32)) {++monstersCaught;reset();}};

這是update函數，游戲每隔一定時間會調用它一次。它所做的第一件事情是檢查用戶是否按下了上下左右四個箭頭鍵。如果是，就將我們的英雄向相應的方向移動。

update有一個modifier參數，這看起來好像有點奇怪。你會在游戲的主函數即main函數中看到它，不過我在這 兒先解釋一下。modifier參數是一個從1開始的與時間相關的數。如果間隔剛好為1秒時，它的值就會為1，英雄移動的距離即為256像素（英雄的速度 為256像素/秒）；而如果間隔是0.5秒，它的值就為0.5，即英雄移動的距離為其速度的一半，以此類推。通常update函數調用的間隔很短，所以 modifier的值很小，但用這種方式能夠確保不管代碼執行的速度怎么樣，英雄的移動速度都是相同的。

我們已經實現了根據用戶的輸入來移動英雄，但我們還可以在移動英雄時對其進行檢查，以確定是否有其他事件發生。例如：英雄是否與怪物發生了碰撞——當英雄與怪物發生碰撞時，我們為玩家進行計分（monstersCaught加1）并重置游戲（調用reset函數）。

7. 渲染對象

// Draw everythingvar render = function () {if (bgReady) {ctx.drawImage(bgImage, 0, 0);}if (heroReady) {ctx.drawImage(heroImage, hero.x, hero.y);}if (monsterReady) {ctx.drawImage(monsterImage, monster.x, monster.y);}// Scorectx.fillStyle = "rgb(250, 250, 250)";ctx.font = "24px Helvetica";ctx.textAlign = "left";ctx.textBaseline = "top";ctx.fillText("Goblins caught: " + monstersCaught, 32, 32);};

當你能夠看到你的行動時游戲才會變得更有趣，所以讓我們在屏幕上繪制吧。首先我們將背景圖片繪制到canvas，然后是英雄和怪物。注意順序很重要，因為任何位于表層的圖片都會將其下面的像素覆蓋掉。

接下來是文字，這有些不同，我們調用fillText函數顯示玩家的分數。因為不需要復雜的動畫或者對文字進行移動，所以只是繪制一下就ok了。

8. 游戲主循環

// The main game loopvar main = function () {var now = Date.now();var delta = now - then;update(delta / 1000);render();then = now;};

游戲的主循環用來控制游戲流程。首先我們要獲得當前的時間，這樣我們才能計算時間差（自上次循環以來經過的時間）。然后計算modifier的值并交給update（需要將delta除以1000以將其轉換為毫秒）。最后調用render并更新記錄的時間。

更多關于游戲循環的內容見“Onslaught! Arena Case Study”。

9. 開始游戲吧

// Let's play this game! reset(); var then = Date.now(); setInterval(main, 1); // Execute as fast as possible

快完成了，這是最后一段代碼。首先調用reset來開始新游戲。（還記得嗎，這會將英雄置中并隨機安放怪物）。然后將起始時間保存到變量then中并啟動游戲的主循環。

OK！（但愿）你現在已經理解了在HTML5 Canvas中用JS來開發游戲的基礎知識了。建議最好是能夠自己親自試一把！

?

轉載于:https://www.cnblogs.com/antineutrino/p/3301880.html

總結

以上是生活随笔為你收集整理的[译]怎样用HTML5 Canvas制作一个简单的游戏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。