⑴ 如何開發一個簡單的HTML5 Canvas 小游戲
首先我們需要創建一張畫布作為游戲的舞台。這里通過JS代碼而不是直接在HTML里寫一個<canvas>元素目的是要說明代碼創建也是很方便的。有了畫布後就可以獲得它的上下文來進行繪圖了。然後我們還設置了畫布大小，最後將其添加到頁面上。 准備圖片 // 背景圖片 var bgReady = false; var bgImage = new Image(); bgImage.onload = function () { bgReady = true; }; bgImage.src = "images/background.png"; 游戲嘛少不了圖片的，所以我們先載入一些圖片先。簡便起見，這里僅創建簡單的圖片對象，而不是專門寫一個類或者Helper來做圖片載入。bgReady這個變數用來標識圖片是否已經載入完成從而可以放心地使用了，因為如果在圖片載入未完成情況下進行繪制是會報錯的。 整個游戲中需要用到的三張圖片：背景，英雄及怪物我們都用上面的方法來處理。 游戲對象 // 游戲對象 var hero = { speed: 256, // 每秒移動的像素 x: 0, y: 0 }; var monster = { x: 0, y: 0 };