5.9 KiB

Raw Blame History Unescape Escape

建立太空遊戲 Part 5：分數與生命數

課前測驗

在這堂課中，你會學習如何為遊戲加入計分功能與計算性命數。

在畫面上繪製文字

為了在畫面上顯示遊戲分數，你需要了解如何配置文字。答案是在 Canvas 物件上使用方法 fillText()。你也可以控制其他特徵，例如文字字型、文字顏色甚至文字對齊方向(左、右、置中)。下面是在畫面中繪製一些文字。

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ 閱讀更多關於在畫布上建立文字，你可以自由地豐富你的文字！

性命，一個遊戲概念

遊戲中的生命概念只是一個數字。在太空遊戲中，在你的船艦受到攻擊時，扣除生命值是一種常見的方式。如果能以圖像的方式顯示生命值也是很好的方式，例如船艦圖示、心臟圖像，而非單純使用數字。

建立目標

我們在遊戲中新增下列功能：

遊戲分數：當每一艘敵軍艦艇被摧毀時，英雄應該取得一些獎勵分數，我們建議一艘敵艦一百分。遊戲總分應該顯示在畫面的左下角。
生命值：你的船艦有三條性命。在每一次敵軍艦艇撞擊你時，你會損失一條性命。生命數應該顯示在畫面的右下角，以下列圖像顯示出來。

建議步驟

在你的 your-work 子資料夾中，確認檔案是否建立完成。它應該包括：

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
-| index.html
-| app.js
-| package.json

開始 your_work 資料夾中的專案，輸入：

cd your-work
npm start

這會啟動 HTTP 伺服器並發布網址 http://localhost:5000。開啟瀏覽器並輸入該網址，現在它能顯示出英雄與所有的敵人，在你操作方向鍵後，英雄能移動並擊落敵人。

加入程式碼

從資料夾 solution/assets/ 複製你需要的檔案 到資料夾 your-work 中。你會加入檔案 life.png。在函式 window.onload 中加入 lifeImg ：
```
lifeImg = await loadTexture("assets/life.png");
```

在檔案清單中加入 lifeImg：

let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();

新增變數。加入程式碼表達你的遊戲總分(0)和剩餘性命(3)，並顯示在畫面上。

擴增函式 updateGameObjects()。擴增函式 updateGameObjects() 來處理敵軍碰撞：

enemies.forEach(enemy => {
    const heroRect = hero.rectFromGameObject();
    if (intersectRect(heroRect, enemy.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
    }
  })

加入 life 與 points.

初始化變數。在 Hero class 的 this.cooldown = 0 下方，設定性命與分數：
```
this.life = 3;
this.points = 0;
```

在畫面上顯示變數內容。在畫面上繪製這些數值：

function drawLife() {
  // TODO, 35, 27
  const START_POS = canvas.width - 180;
  for(let i=0; i < hero.life; i++ ) {
    ctx.drawImage(
      lifeImg, 
      START_POS + (45 * (i+1) ), 
      canvas.height - 37);
  }
}

function drawPoints() {
  ctx.font = "30px Arial";
  ctx.fillStyle = "red";
  ctx.textAlign = "left";
  drawText("Points: " + hero.points, 10, canvas.height-20);
}

function drawText(message, x, y) {
  ctx.fillText(message, x, y);
}

在遊戲迴圈中加入呼叫。請確保你加入這些函式到 updateGameObjects() 下方的 window.onload 內：
```
drawPoints();
drawLife();
```

制定遊戲規則。制定下列的遊戲規則：

在英雄與敵人發生碰撞時，扣除一條生命。

擴增 Hero class 來執行這段減法：

decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}

當雷射擊中敵人時，增加遊戲總分一百分。

擴增 Hero class 來執行這段加法：

  incrementPoints() {
    this.points += 100;
  }

加入這些函式到碰撞事件發送器中：

eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
   first.dead = true;
   second.dead = true;
   hero.incrementPoints();
})

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
   enemy.dead = true;
   hero.decrementLife();
});

✅ 做點研究，探索其他使用到 JavaScript 與 Canvas 的遊戲。他們有什麼共同特徵？

在這個工作的尾聲，你應該能在右下方看到「性命」小船；左下方看到遊戲總分。當你碰撞到敵人時會扣除生命；當你擊落敵人時會增加分數。做得好！你的遊戲就快完成了。

🚀 挑戰

你的程式就快完成了。你能預測到下一步嗎？

課後測驗

複習與自學

研究其他種增加與減少分數與生命數的方法。這邊有一些有趣的遊戲引擎，例如：PlayFab。使用這些引擎能如何增進你的遊戲？

作業

建立計分遊戲

5.9 KiB Raw Blame History Unescape Escape