建立太空遊戲Part4：加入雷射與碰撞偵測

文档摘要

建立太空遊戲 Part 4：加入雷射與碰撞偵測課前測驗課前測驗這堂課中，你會學會如何在 JavaScript 上發射雷射光！我們需要在遊戲中新增兩項東西：雷射光：這束雷射會從英雄艦艇垂直往上移動碰撞偵測，除了完成射擊這項能力，我們還會新增幾項遊戲規則：雷射擊中敵人：被雷射擊中的敵人會死亡雷射擊中畫面最上方：雷射擊中到畫面最上方會消失敵人碰觸到英雄：敵人與英雄在互相碰觸時皆會被摧毀敵人碰觸到畫面最下方：敵人碰觸到畫面最下方時，該敵人與英雄會被摧毀簡單來說，你這位英雄需要在敵人到達畫面最下方之前，使用雷射擊毀它們。 ✅ 做點關於第一款電腦遊戲的研究。它有哪些功能？讓我們成為英雄吧！碰撞偵測我們該如何進行碰撞偵測呢？我們需要將遊戲物件視為移動中的矩形。你或許會問為什麼？

建立太空遊戲 Part 4：加入雷射與碰撞偵測

課前測驗

這堂課中，你會學會如何在 JavaScript 上發射雷射光！我們需要在遊戲中新增兩項東西：

雷射光：這束雷射會從英雄艦艇垂直往上移動
碰撞偵測，除了完成射擊這項能力，我們還會新增幾項遊戲規則：
- 雷射擊中敵人：被雷射擊中的敵人會死亡
- 雷射擊中畫面最上方：雷射擊中到畫面最上方會消失
- 敵人碰觸到英雄：敵人與英雄在互相碰觸時皆會被摧毀
- 敵人碰觸到畫面最下方：敵人碰觸到畫面最下方時，該敵人與英雄會被摧毀

簡單來說，你這位英雄需要在敵人到達畫面最下方之前，使用雷射擊毀它們。

✅ 做點關於第一款電腦遊戲的研究。它有哪些功能？

讓我們成為英雄吧！

碰撞偵測

我們該如何進行碰撞偵測呢？我們需要將遊戲物件視為移動中的矩形。你或許會問為什麼？這是因為，繪製遊戲物件的圖片皆為矩形：它有一組 x 與 y、width 與 height。

若兩個矩形，舉例來說：英雄與敵人相交了，這就是一次碰撞。至於會發生什麼事取決於遊戲規則。要製作碰撞偵測，你需要這些步驟：

取得表達遊戲物件為矩形的方法，好比是：


rectFromGameObject() {
  return {
    top: this.y,
    left: this.x,
    bottom: this.y + this.height,
    right: this.x + this.width
  }
}

一個比較函式，這個函式可以如下：


function intersectRect(r1, r2) {
  return !(r2.left > r1.right ||
    r2.right < r1.left ||
    r2.top > r1.bottom ||
    r2.bottom < r1.top);
}

我們該如何摧毀物件

要摧毀遊戲物件，你需要讓遊戲知道，它不再需要在定期的遊戲迴圈中繪製該物件。一種方法是在情況發生時，我們可以標記遊戲物件為死亡，例如：


// 碰撞發生
enemy.dead = true

接著，你在重新繪製畫面前，排除掉這些死亡的物件，例如：


gameObjects = gameObject.filter(go => !go.dead);

我們該如何發射雷射

發射雷射可以被視作回應一件鍵盤事件，並建立往特定方向移動的物件。因此我們需要列出下列步驟：

建立雷射物件：從英雄艦艇的正上方，建立往畫面上方移動的物件。
連接該程式到鍵盤事件：我們需要在鍵盤中挑選一個按鍵，表達玩家發射雷射光。
在按鍵按壓時，建立看起來像雷射光的遊戲物件。

雷射的冷卻時間

在每次按壓按鍵時，好比說空白鍵，雷射光都需要被發射出來。為了讓遊戲不要在短時間內發射太多組雷射光，我們需要修正它。修法為建立冷卻時間 ── 一個計時器確保雷射在一定期間內只能被發射一次。你可以藉由下列方式建立：


class Cooldown {
  constructor(time) {
    this.cool = false;
    setTimeout(() => {
      this.cool = true;
    }, time)
  }
}

class Weapon {
  constructor {
  }
  fire() {
    if (!this.cooldown || this.cooldown.cool) {
      // 產生雷射光
      this.cooldown = new Cooldown(500);
    } else {
      // 什麼事都不做，冷卻中。
    }
  }
}

✅ 根據太空遊戲系列課程的第一章，回想關於冷卻時間。

建立目標

你會利用上一堂課中現成的程式碼(你應該有整理並重構過)做延伸。使用來自 Part II 的檔案或是使用 Part III - Starter。

要點：你需要使用的雷射光已經在資料夾中，並已匯入到程式碼中。

加入碰撞偵測，建立下列規則給各個雷射碰觸到東西的情況：
1. 雷射擊中敵人：被雷射擊中的敵人會死亡
2. 雷射擊中畫面最上方：雷射擊中到畫面最上方會消失
3. 敵人碰觸到英雄：敵人與英雄在互相碰觸時皆會被摧毀
4. 敵人碰觸到畫面最下方：敵人碰觸到畫面最下方時，該敵人與英雄會被摧毀

建議步驟

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


-| assets
https://www.aiknowledge.cn/images/初学者的Web开发课程/  -| enemyShip.webp
https://www.aiknowledge.cn/images/初学者的Web开发课程/  -| player.webp
https://www.aiknowledge.cn/images/初学者的Web开发课程/  -| laserRed.webp
-| index.html
-| app.js
-| package.json

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


cd your-work
npm start

這會啟動 HTTP 伺服器並發布網址 http://localhost:5000。開啟瀏覽器並輸入該網址，現在它能呈現英雄以及所有的敵人，但它們還沒辦法移動！

建立程式碼

設定表達遊戲物件為矩形的方法，以處理碰撞狀況 下列的程式表達 GameObject 的矩形呈現方式。編輯你的 GameObject class：


rectFromGameObject() {
    return {
      top: this.y,
      left: this.x,
      bottom: this.y + this.height,
      right: this.x + this.width,
    };
  }

加入程式碼來檢查碰撞 這會是新函式來測試兩矩形是否相交：


function intersectRect(r1, r2) {
  return !(
    r2.left > r1.right ||
    r2.right < r1.left ||
    r2.top > r1.bottom ||
    r2.bottom < r1.top
  );
}

加入雷射發射功能

加入鍵盤事件訊息。 空白鍵要能在英雄艦艇上方建立雷射光。加入三個常數到 Messages 物件中：


 KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
 COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
 COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",

處理空白鍵。編輯 window.addEventListener 的 keyup 函式來處理空白鍵：


  } else if(evt.keyCode === 32) {
    eventEmitter.emit(Messages.KEY_EVENT_SPACE);
  }

加入監聽者。編輯函式 initGame() 來確保英雄可以在空白鍵按壓時，發射雷射光：


eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
 if (hero.canFire()) {
   hero.fire();
 }

建立新的函式 eventEmitter.on() 確保敵人碰觸到雷射光時，能更新死亡狀態：


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

移動物件。確保雷射逐步地向畫面上方移動。建立新的 class Laser 延伸自 GameObject，你應該有做過：


  class Laser extends GameObject {
  constructor(x, y) {
    super(x,y);
    (this.width = 9), (this.height = 33);
    this.type = 'Laser';
    this.img = laserImg;
    let id = setInterval(() => {
      if (this.y > 0) {
        this.y -= 15;
      } else {
        this.dead = true;
        clearInterval(id);
      }
    }, 100)
  }
}

處理碰撞。建立雷射的碰撞規則。加入函式 updateGameObjects() 來確認被碰撞的物件。


function updateGameObjects() {
  const enemies = gameObjects.filter(go => go.type === 'Enemy');
  const lasers = gameObjects.filter((go) => go.type === "Laser");
// 雷射擊中某物
  lasers.forEach((l) => {
    enemies.forEach((m) => {
      if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
        first: l,
        second: m,
      });
    }
   });
});

  gameObjects = gameObjects.filter(go => !go.dead);
}

記得在 window.onload 裡的遊戲迴圈中加入 updateGameObjects()。

設定雷射的冷卻時間，它只能在定期內發射一次。

最後，編輯 Hero class 來允許冷卻：


class Hero extends GameObject {
 constructor(x, y) {
   super(x, y);
   (this.width = 99), (this.height = 75);
   this.type = "Hero";
   this.speed = { x: 0, y: 0 };
   this.cooldown = 0;
 }
 fire() {
   gameObjects.push(new Laser(this.x + 45, this.y - 10));
   this.cooldown = 500;

   let id = setInterval(() => {
     if (this.cooldown > 0) {
       this.cooldown -= 100;
     } else {
       clearInterval(id);
     }
   }, 200);
 }
 canFire() {
   return this.cooldown === 0;
 }
}

到這裡，你的遊戲有了些功能！你可以測試方向鍵，使用空白鍵發射雷射。當你擊中敵人時它們會消失。幹得漂亮！

挑戰

加入爆炸特效！看看 Space Art Repo 中的檔案，試著在雷射擊中外星人時，加入爆炸畫面。

課後測驗

複習與自學

對遊戲中的迴圈定時做點實驗。當你改變數值時，發生了什麼事？閱讀更多關於 JavaScript 計時事件。

作業

探索碰撞

作者与出处

原作者： microsoft

来源：microsoft

原文： https://github.com/microsoft/Web-Dev-For-Beginners

许可证：MIT

整理：灏天文库整理

由灏天文库结构化整理，提供目录导航、全文检索与在线阅读，便于系统化学习