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

下面是正文：

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

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

附件下載地址：simple_canvas_game



1. 創(chuàng)建一個(gè)Canvas對(duì)象

?

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

我們首先要做的是創(chuàng)建一個(gè)canvas對(duì)象。可以用JavaScript或HTML來做，都非常簡(jiǎn)單。此處我用的是JS。當(dāng)創(chuàng)建了canvas之后，我們就可以獲取它的上下文對(duì)象（context）、設(shè)置尺寸，并且把它加到當(dāng)前文檔中。

2. 載入圖片

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

游戲需要圖像，所以讓我們載入一些圖片吧。我想盡量簡(jiǎn)單化，所以只用了Image對(duì)象來做，當(dāng)然，還可以將載入圖像的功能封裝成一個(gè)類或別的任何形式。代 碼中的bgReady用來標(biāo)識(shí)圖片是否已完全載入，只有當(dāng)圖片載入完成后，我們才能使用它，如果在載入完成前就對(duì)其進(jìn)行繪制或渲染，JS將會(huì)報(bào)一個(gè)DOM error的錯(cuò)誤。

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

3. 定義游戲要使用的對(duì)象

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

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

4. 處理玩家輸入

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

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

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));};

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

6. 更新對(duì)象

// 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函數(shù)，游戲每隔一定時(shí)間會(huì)調(diào)用它一次。它所做的第一件事情是檢查用戶是否按下了上下左右四個(gè)箭頭鍵。如果是，就將我們的英雄向相應(yīng)的方向移動(dòng)。

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

我們已經(jīng)實(shí)現(xiàn)了根據(jù)用戶的輸入來移動(dòng)英雄，但我們還可以在移動(dòng)英雄時(shí)對(duì)其進(jìn)行檢查，以確定是否有其他事件發(fā)生。例如：英雄是否與怪物發(fā)生了碰撞——當(dāng)英雄與怪物發(fā)生碰撞時(shí)，我們?yōu)橥婕疫M(jìn)行計(jì)分（monstersCaught加1）并重置游戲（調(diào)用reset函數(shù)）。

7. 渲染對(duì)象

// 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);};

當(dāng)你能夠看到你的行動(dòng)時(shí)游戲才會(huì)變得更有趣，所以讓我們?cè)谄聊簧侠L制吧。首先我們將背景圖片繪制到canvas，然后是英雄和怪物。注意順序很重要，因?yàn)槿魏挝挥诒韺拥膱D片都會(huì)將其下面的像素覆蓋掉。

接下來是文字，這有些不同，我們調(diào)用fillText函數(shù)顯示玩家的分?jǐn)?shù)。因?yàn)椴恍枰獜?fù)雜的動(dòng)畫或者對(duì)文字進(jìn)行移動(dòng)，所以只是繪制一下就ok了。

8. 游戲主循環(huán)

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

游戲的主循環(huán)用來控制游戲流程。首先我們要獲得當(dāng)前的時(shí)間，這樣我們才能計(jì)算時(shí)間差（自上次循環(huán)以來經(jīng)過的時(shí)間）。然后計(jì)算modifier的值并交給update（需要將delta除以1000以將其轉(zhuǎn)換為毫秒）。最后調(diào)用render并更新記錄的時(shí)間。

更多關(guān)于游戲循環(huán)的內(nèi)容見“Onslaught! Arena Case Study”。

9. 開始游戲吧

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

快完成了，這是最后一段代碼。首先調(diào)用reset來開始新游戲。（還記得嗎，這會(huì)將英雄置中并隨機(jī)安放怪物）。然后將起始時(shí)間保存到變量then中并啟動(dòng)游戲的主循環(huán)。

OK！（但愿）你現(xiàn)在已經(jīng)理解了在HTML5 Canvas中用JS來開發(fā)游戲的基礎(chǔ)知識(shí)了。建議最好是能夠自己親自試一把！

?

轉(zhuǎn)載于:https://www.cnblogs.com/antineutrino/p/3301880.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。