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

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

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

1. 創(chuàng)建一個Canvas對象

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

// 創(chuàng)建畫布canvas,并獲取畫布上下文環(huán)境

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

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

canvas.width = 512;

canvas.height = 480;

document.body.appendChild(canvas);

2. 載入圖片

游戲需要圖像，所以讓我們載入一些圖片吧。我想盡量簡單化，所以只用了Image對象來做，當(dāng)然，還可以將載入圖像的功能封裝成一個類或別的任何形式。代碼中的bgReady用來標(biāo)識圖片是否已完全載入，只有當(dāng)圖片載入完成后，我們才能使用它，如果在載入完成前就對其進行繪制或渲染，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. 定義游戲要使用的對象

// 游戲?qū)ο?/p>

var hero = {

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

x: 0,

y: 0

};

var monster = {

x: 0,

y: 0

};

var monstersCaught = 0;

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

4. 處理玩家輸入

// 鍵盤 輸入處理

var keysDown = {};

addEventListener("keydown", function (e) {

keysDown[e.keyCode] = true;

}, false);

addEventListener("keyup", function (e) {

delete keysDown[e.keyCode];

}, false);

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

5. 新游戲

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

var reset = function () {

hero.x = canvas.width / 2;

hero.y = canvas.height / 2;

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

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

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

};

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

6. 更新對象

// 更新游戲?qū)ο?/p>

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

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

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

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

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

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

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

// 游戲主循環(huán)

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;

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

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

9. 開始游戲

var then = Date.now();

reset();

main();

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

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

總結(jié)

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

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