HTML5 遊戲無神秘指南

Daniel X. Moore
Daniel X. Moore
X 首頁

簡介

您想使用 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);
}

您現在已在畫面上移動了一些文字，這表示您已完成遊戲一半的開發工作。只要強化控制項、改善遊戲體驗，以及改善圖像即可。好吧，也許只有 1/7 的內容是實際遊戲，但好消息是，教學課程還有更多內容。

建立播放器

建立物件來存放玩家資料，並負責繪圖等工作。我們會在此使用簡單的物件文字常值建立玩家物件，用於儲存所有資訊。

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

我們想檢查幾個衝突：

  1. 玩家子彈> 敵方船艦
  2. 玩家 => 敵方飛船

我們來建立一個方法，用於處理從更新方法呼叫的衝突。

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 中使用聲音 (例如圖片) 可能會有些麻煩，但多虧了我們的魔法公式 sound.js，讓聲音處理變得超簡單。

player.shoot = function() {
  Sound.play("shoot");
  ...
}

function Enemy(I) {
  ...

  I.explode = function() {
    Sound.play("explode");
    ...
  }
}

雖然 API 目前不會造成撕裂，但新增音效是目前讓應用程式當機最快的方式。音效經常會中斷或關閉整個瀏覽器分頁，因此請準備好紙巾。

Farewell

再次提醒，以下是完整的遊戲試玩版。您也可以將原始碼下載為 ZIP 檔案。

希望您喜歡本課程，瞭解如何使用 JavaScript 和 HTML5 製作簡單遊戲的基本概念。透過在適當抽象層級進行程式設計，我們可以避免使用較難用的 API 部分，並在日後面臨變更時保持彈性。

參考資料