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

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

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

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

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

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

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

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

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

快完成了，这是最后一段代码。首先调用reset来开始新游戏。（还记得吗，这会将英雄置中并随机安放怪物）。然后将起始时间保存到变量then中并启动游戏的主循环。

OK！（但愿）你现在已经理解了在HTML5 Canvas中用JS来开发游戏的基础知识了。建议最好是能够自己亲自试一把！