引言
如果你想使用 Canvas 和 HTML5 製作遊戲，請按照本教學課程進行，很快就能上路。
本教學課程假設您至少具備 JavaScript 的中級知識。
正在建立畫布
為了繪製內容，我們必須先建立畫布因為這是《沒有恐懼的》指南，我們將使用 jQuery
var CANVAS_WIDTH = 480;
var CANVAS_HEIGHT = 320;
var canvasElement = $("<canvas width='" + CANVAS_WIDTH +
"' height='" + CANVAS_HEIGHT + "'></canvas>");
var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo('body');
遊戲迴圈
為了模擬連續的遊戲過程外觀，我們想要更新遊戲，並縮短畫面重新繪製的速度，比人類心智和眼睛能察覺的速度更快。
var FPS = 30;
setInterval(function() {
update();
draw();
}, 1000/FPS);
現在，我們可以將更新和繪製方法留空。請務必瞭解，setInterval() 會定期呼叫這些函式。
function update() { ... }
function draw() { ... }
Hello World
遊戲迴圈建立完成之後，讓我們更新繪圖方法，實際在螢幕上繪製部分文字。
function draw() {
canvas.fillStyle = "#000"; // Set color to black
canvas.fillText("Sup Bro!", 50, 50);
}
這對固定式文字來說十分酷，但由於我們已設定過遊戲迴圈，應該可以輕鬆移動。
var textX = 50;
var textY = 50;
function update() {
textX += 1;
textY += 1;
}
function draw() {
canvas.fillStyle = "#000";
canvas.fillText("Sup Bro!", textX, textY);
}
大膽嘗試吧！如果您想跟上進度，它應該移動，但也會留下之前繪製在螢幕上的時間。請花一點時間猜猜可能的原因為何。這是因為我們不會清除畫面。 現在，我們要在繪圖方法中新增一些畫面清除程式碼。
function draw() {
canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
canvas.fillStyle = "#000";
canvas.fillText("Sup Bro!", textX, textY);
}
現在，您已在畫面上四處移動文字，還有完成實際遊戲的一半。只要縮短控制項、改善遊戲體驗，再修飾圖像即可。也許是實際遊戲的一半，但好消息是，本教學課程還有更多功能等您來發掘。
建立播放器
建立物件來存放玩家資料，並負責繪圖等操作。我們在此使用簡單的物件常值建立玩家物件，藉此存放所有資訊。
var player = {
color: "#00A",
x: 220,
y: 270,
width: 32,
height: 32,
draw: function() {
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
}
};
目前，我們使用簡單的彩色矩形來代表玩家。我們會在繪製遊戲時清除畫布，並繪製玩家。
function draw() {
canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
player.draw();
}
鍵盤控制項
使用 jQuery 快速鍵
jQuery Hotkeys 外掛程式讓不同瀏覽器之間的金鑰處理變得更加容易。我們不必轉換無法解密的跨瀏覽器 keyCode 和 charCode 問題，而是繫結事件，如下所示：
$(document).bind("keydown", "left", function() { ... });
您不必擔心哪些金鑰包含哪些代碼，就能帶來豐碩的成果。我們想要可以說「玩家按向上按鈕的時候，可以做些什麼」，而 jQuery Hotkeys 就能派上用場。
玩家移動
JavaScript 處理鍵盤事件的方式完全由事件驅動。這表示沒有內建查詢可用來檢查金鑰是否停擺，因此我們必須使用自己的查詢。
您可能會問：「為什麼不直接使用事件導向的處理金鑰？」這是因為鍵盤的重複率會因系統而異，且沒有遊戲迴圈的時間，因此各個系統的遊戲過程可能大不相同。如要建立一致的體驗，請務必將鍵盤事件偵測功能與遊戲迴圈緊密整合。
好消息是，我已加入 16 行 JS 包裝函式，以便提供事件查詢功能。稱為 key_status.js，您隨時可以檢查 keydown.left 等來查詢金鑰狀態。
既然我們已能夠查詢按鍵是否卸下，我們可以使用這個簡單的更新方法移動玩家。
function update() {
if (keydown.left) {
player.x -= 2;
}
if (keydown.right) {
player.x += 2;
}
}
快試試看吧！
您可能會注意到，播放器可以離開畫面。讓我們用取值範圍限制玩家的位置，讓玩家保持在邊界內。此外，玩家的速度似乎很慢，所以也讓我們加快速度。
function update() {
if (keydown.left) {
player.x -= 5;
}
if (keydown.right) {
player.x += 5;
}
player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
}
加入更多輸入都很方便，所以現在要加入幾種投影機。
function update() {
if (keydown.space) {
player.shoot();
}
if (keydown.left) {
player.x -= 5;
}
if (keydown.right) {
player.x += 5;
}
player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
}
player.shoot = function() {
console.log("Pew pew");
// :) Well at least adding the key binding was easy...
};
新增更多遊戲物件
投影機
現在讓我們來新增投射器。首先，我們需要集合即可儲存在：
var playerBullets = [];
接下來，我們需要建構函式來建立項目符號例項。
function Bullet(I) {
I.active = true;
I.xVelocity = 0;
I.yVelocity = -I.speed;
I.width = 3;
I.height = 3;
I.color = "#000";
I.inBounds = function() {
return I.x >= 0 && I.x <= CANVAS_WIDTH &&
I.y >= 0 && I.y <= CANVAS_HEIGHT;
};
I.draw = function() {
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
};
I.update = function() {
I.x += I.xVelocity;
I.y += I.yVelocity;
I.active = I.active && I.inBounds();
};
return I;
}
在球員拍攝時，我們應建立一個項目符號例項，並將其新增至項目符號集合。
player.shoot = function() {
var bulletPosition = this.midpoint();
playerBullets.push(Bullet({
speed: 5,
x: bulletPosition.x,
y: bulletPosition.y
}));
};
player.midpoint = function() {
return {
x: this.x + this.width/2,
y: this.y + this.height/2
};
};
現在，我們需要在更新步驟函式中加入項目符號的更新機制。為避免項目符號集合無限期填入，我們會篩選項目符號清單，僅納入使用中的項目符號。如此一來，我們就能移除與敵人相撞的項目符號。
function update() {
...
playerBullets.forEach(function(bullet) {
bullet.update();
});
playerBullets = playerBullets.filter(function(bullet) {
return bullet.active;
});
}
最後一個步驟是繪製項目符號：
function draw() {
...
playerBullets.forEach(function(bullet) {
bullet.draw();
});
}
敵人
現在該為新增敵人了，方法就像新增項目符號一樣。
enemies = [];
function Enemy(I) {
I = I || {};
I.active = true;
I.age = Math.floor(Math.random() * 128);
I.color = "#A2B";
I.x = CANVAS_WIDTH / 4 + Math.random() * CANVAS_WIDTH / 2;
I.y = 0;
I.xVelocity = 0
I.yVelocity = 2;
I.width = 32;
I.height = 32;
I.inBounds = function() {
return I.x >= 0 && I.x <= CANVAS_WIDTH &&
I.y >= 0 && I.y <= CANVAS_HEIGHT;
};
I.draw = function() {
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
};
I.update = function() {
I.x += I.xVelocity;
I.y += I.yVelocity;
I.xVelocity = 3 * Math.sin(I.age * Math.PI / 64);
I.age++;
I.active = I.active && I.inBounds();
};
return I;
};
function update() {
...
enemies.forEach(function(enemy) {
enemy.update();
});
enemies = enemies.filter(function(enemy) {
return enemy.active;
});
if(Math.random() < 0.1) {
enemies.push(Enemy());
}
};
function draw() {
...
enemies.forEach(function(enemy) {
enemy.draw();
});
}
載入及繪製圖片
雖然看那些飛船飛過的畫面是很酷的，但擁有圖片的話會更冷。在畫布上載入及繪製圖片時，通常會令人感到困擾。為了預防這種疼痛與痛苦，我們可以使用簡單的公用程式類別。
player.sprite = Sprite("player");
player.draw = function() {
this.sprite.draw(canvas, this.x, this.y);
};
function Enemy(I) {
...
I.sprite = Sprite("enemy");
I.draw = function() {
this.sprite.draw(canvas, this.x, this.y);
};
...
}
衝突偵測
這些交易會在螢幕上飛動，但不會與彼此互動。為了讓所有知道何時該高吹，我們必須新增某種衝突偵測。
讓我們使用簡單的矩形衝突偵測演算法：
function collides(a, b) {
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;
}
請留意以下兩種衝突：
- 玩家項目符號 => 敵方飛船
- 玩家 => 敵方飛船
現在我們來製作方法，處理可從更新方法呼叫的衝突。
function handleCollisions() {
playerBullets.forEach(function(bullet) {
enemies.forEach(function(enemy) {
if (collides(bullet, enemy)) {
enemy.explode();
bullet.active = false;
}
});
});
enemies.forEach(function(enemy) {
if (collides(enemy, player)) {
enemy.explode();
player.explode();
}
});
}
function update() {
...
handleCollisions();
}
現在，我們需要將爆炸方法加入玩家和敵人。這個動作會標記他們要求我們移除內容，並增加爆炸次數。
function Enemy(I) {
...
I.explode = function() {
this.active = false;
// Extra Credit: Add an explosion graphic
};
return I;
};
player.explode = function() {
this.active = false;
// Extra Credit: Add an explosion graphic and then end the game
};
音效
我們現在就加入一些音效吧！ 聲音就像圖片一樣，在 HTML5 中使用起來可能會令人難過，但多虧了我們魔術的 al-Tears Sound.js，聲音的發音可以超簡單。
player.shoot = function() {
Sound.play("shoot");
...
}
function Enemy(I) {
...
I.explode = function() {
Sound.play("explode");
...
}
}
雖然 API 現為免緩解，新增音效是導致應用程式當機的最快方法。正常情況下，音訊會遭到截斷，或完全滑掉整個瀏覽器分頁，因此請備妥問題。
別告訴她
您也可以參考完整操作遊戲示範影片。您也可以下載原始碼為 ZIP 檔案。
希望您喜歡透過 JavaScript 和 HTML5 製作簡易遊戲的基本概念。透過在適當的抽象層級進行程式設計，我們就能將自己與 API 中較複雜的部分區隔開來，並在日後發生變更時也能保持彈性。