怎樣用HTML5 Canvas制作一個簡單的游戲

為了讓大家清楚HTML5制作游戲的簡單流程，所以先了制作一個非常簡單的游戲，來看一看這個過程。

游戲非常簡單，無非就是英雄抓住怪物就得分，然后游戲重新開始，怪物出現在地圖的隨機位置，英雄初始化在地圖的中間。點擊這里，我們可以直接先玩玩這個游戲

1. 創建一個Canvas對象

這里相信大家都知道，當然代碼里面是通過JS動態創建的畫布，大家也可以直接在HTML頁面上先創建畫布，然后再通過document.getELementById()來獲取，這兩種方法沒有什么區別，只是看你更習慣哪一種。

// 創建畫布canvas,并獲取畫布上下文環境

var canvas = document.createElement("canvas");

var ctx = canvas.getContext("2d");

canvas.width = 512;

canvas.height = 480;

document.body.appendChild(canvas);

2. 載入圖片

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

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

// 背景圖片 bgImage

var bgReady = false;

var bgImage = new Image();

bgImage.onload = function () {

bgReady = true;

};

bgImage.src = "images/background.png";

這里需要注意的一點，把bgImage.src寫在bgImage.onload之后是為了解決IE顯示的bug，所以建議大家都這么么寫。

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

// 游戲對象

var hero = {

speed: 256, // 英雄每秒移動的速度，即256px/s

x: 0,

y: 0

};

var monster = {

x: 0,

y: 0

};

var monstersCaught = 0;

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

4. 處理玩家輸入

// 鍵盤 輸入處理

var keysDown = {};

addEventListener("keydown", function (e) {

keysDown[e.keyCode] = true;

}, false);

addEventListener("keyup", function (e) {

delete keysDown[e.keyCode];

}, false);

用戶到底按下了哪個鍵，通過鍵盤事件來處理，將按下的鍵的keyCode保存在空對象KeysDown中。如果該變量中具有某個鍵編碼，就表示用戶目前正按下這個鍵。

5. 新游戲

// 當英雄捉住怪物之后重新開始游戲，英雄的位置在畫布中間，怪物位置隨機

var reset = function () {

hero.x = canvas.width / 2;

hero.y = canvas.height / 2;

// 將怪物位置隨機放在地圖上，當然不能超過地圖。

monster.x = 32 + (Math.random() * (canvas.width - 64));

monster.y = 32 + (Math.random() * (canvas.height - 64));

};

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

6. 更新對象

// 更新游戲對象

var update = function (modifier) {

if (38 in keysDown) { // 上

hero.y -= hero.speed * modifier;

}

if (40 in keysDown) { // 下

hero.y += hero.speed * modifier;

}

if (37 in keysDown) { // 左

hero.x -= hero.speed * modifier;

}

if (39 in keysDown) { // 右

hero.x += hero.speed * modifier;

}

// 是否捉住怪物

if (

hero.x <= (monster.x + 32)

&& monster.x <= (hero.x + 32)

&& hero.y <= (monster.y + 32)

&& monster.y <= (hero.y + 32)

) {

++monstersCaught;

reset();

}

};

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

這和我們之前的做法是不一樣的，我們之前的做法經常是向右移動 x += spped，向左移動 x -= speed,之前的這種做法，相當于已經給定了物體移動的速度，無論是什么機器，都必須保證，每次移動的距離是speed的長度。

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

7. 渲染對象

// Draw everything

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

}

// Score

ctx.fillStyle = "rgb(250, 250, 250)";

ctx.font = "24px Helvetica";

ctx.textAlign = "left";

ctx.textBaseline = "top";

ctx.fillText("Goblins caught: " + monstersCaught, 32, 32);

};

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

想一想，每次如果英雄的位置改變，那么我們會把所有的場景包括背景都重新繪制一次，那么你在界面上看到的就好像是英雄走了一步

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

8. 游戲主循環

// 游戲主循環

var main = function () {

var now = Date.now();

var delta = now - then;

update(delta / 1000);

render();

then = now;

requestAnimationFrame(main);

};

var w = window;

requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

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

游戲主循環是游戲中最重要的概念，無論游戲怎么變化，無非就是移動，消失。而移動消失，無非又是畫布的重畫，所以把移動或者消失的位置放在update函數里面，把畫布重畫放在render函數里面。而隨著時間的變化，無非就是這兩個函數函數一直在執行而已。

9. 開始游戲

var then = Date.now();

reset();

main();

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

原文：http://www.cnblogs.com/18200345061-hjl/p/4120719.html

總結

以上是生活随笔為你收集整理的html游戏怎么做,HTML5 制做“游戏”的一个基本流程的全部內容，希望文章能夠幫你解決所遇到的問題。

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