用HTML5 canvas製作簡單遊戲

**裡面是通過js動態建立的畫布，大家也可以直接在html頁面上先建立畫布，然後再通過document.getelementbyid()來獲取，這兩種方法沒有什麼區別，只是看你更習慣哪一種。

var canvas = document.createelement("canvas");
var ctx = canvas.getcontext("2d");
canvas.width = 512;
canvas.height = 480;


**中的bgready用來標識是否已完全載入，只有當載入完成後，我們才能使用它，如果在載入完成前就對其進行繪製或渲染，js將會報乙個dom error的錯誤。
我們會用到三張（背景、英雄、怪物），每張都需要這樣處理。

// 背景 bgimage
var bgready = false;
var bgimage = new image();
bgimage.onload = function () ;
bgimage.src = "images/background.png";

這裡需要注意的一點，把bgimage.src寫在bgimage.onload之後是為了解決ie顯示的bug，所以建議大家都這麼麼寫。

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

使用者到底按下了哪個鍵，通過鍵盤事件來處理，將按下的鍵的keycode儲存在空物件keysdown中。如果該變數中具有某個鍵編碼，就表示使用者目前正按下這個鍵。

通過呼叫reset函式來開始新遊戲。該函式將英雄（即玩家角色）放到螢幕中間，然後隨機選擇乙個位置來安置怪物。

var update = function (modifier) 
if (40 in keysdown) 
if (37 in keysdown) 
if (39 in keysdown)

update有乙個modifier引數，。modifier引數是乙個從1開始的與時間相關的數。如果間隔剛好為1秒時，它的值就會為1，英雄移動的距離即為256畫素（英雄的速度為256畫素/秒）；而如果間隔是0.5秒，它的值就為0.5，即英雄移動的距離為其速度的一半，以此類推。

update函式相當於只是改變的值，而render函式則是繪製圖案，當你能夠看到你的行動時遊戲才會變得更有趣，首先我們將背景繪製到canvas，然後是英雄和怪物。注意順序，因為任何位於表層的都會將其下面的畫素覆蓋掉。

遊戲的主迴圈用來控制遊戲流程。首先我們要獲得當前的時間，這樣我們才能計算時間差。然後計算modifier的值並交給update。最後呼叫render並更新記錄的時間。

var then = date.now();
reset();
main();

呼叫reset來開始新遊戲。然後將起始時間儲存到變數then中並啟動遊戲的主迴圈。