額外生命 - 遊戲開發 | MDN

新屬性

在您的程式碼中，在現有屬性下方新增以下新屬性

class ExampleScene extends Phaser.Scene {
  // ... previous property definitions ...
  lives = 3;
  livesText;
  lifeLostText;
  // ... rest of the class ...
}

這些屬性將分別儲存生命的數量、顯示剩餘生命數量的文字標籤，以及當玩家失去一條生命時螢幕上顯示的文字標籤。

定義新的文字標籤

定義文字看起來和我們在分數課程中學到的很相似。在 create() 方法中，在現有的 scoreText 定義下方新增以下幾行

this.livesText = this.add.text(
  this.scale.width - 5,
  5,
  `Lives: ${this.lives}`,
  { font: "18px Arial", fill: "#0095dd" },
);
this.livesText.setOrigin(1, 0);
this.lifeLostText = this.add.text(
  this.scale.width * 0.5,
  this.scale.height * 0.5,
  "Life lost, click to continue",
  { font: "18px Arial", fill: "#0095dd" },
);
this.lifeLostText.setOrigin(0.5, 0.5);
this.lifeLostText.visible = false;

this.livesText 和 this.lifeLostText 物件看起來與 this.scoreText 非常相似——它們定義了螢幕上的位置、要顯示的實際文字以及字型樣式。前者在其右上角錨定以正確對齊螢幕，後者居中，都使用了 setOrigin。

lifeLostText 只會在失去生命時顯示，因此其可見性最初設定為 false。

讓我們的文字樣式 DRY

您可能已經注意到，我們對所有三個文字：scoreText、livesText 和 lifeLostText 使用了相同的樣式。如果我們想更改字型大小或顏色，將不得不在多個地方進行更改。為了將來更易於維護，我們可以建立一個單獨的變數來儲存我們的樣式，我們稱之為 textStyle，並將其放在文字定義之前

const textStyle = { font: "18px Arial", fill: "#0095dd" };

現在我們可以在設定文字標籤樣式時使用此變數——更新您的程式碼，將多個文字樣式例項替換為該變數

this.scoreText = this.add.text(5, 5, "Points: 0", textStyle);

this.livesText = this.add.text(
  this.scale.width - 5,
  5,
  `Lives: ${this.lives}`,
  textStyle,
);
this.livesText.setOrigin(1, 0);
this.lifeLostText = this.add.text(
  this.scale.width * 0.5,
  this.scale.height * 0.5,
  "Life lost, click to continue",
  textStyle,
);
this.lifeLostText.setOrigin(0.5, 0.5);
this.lifeLostText.visible = false;

這樣，在一個變數中更改字型將把更改應用於所有使用它的地方。

生命處理程式碼

為了在我們的遊戲中實現生命系統，讓我們先改變當球超出邊界時的行為。而不是立即重新開始

if (ballIsOutOfBounds) {
  // Game over logic
  location.reload();
}

我們將呼叫一個名為 ballLeaveScreen() 的新方法；刪除之前的行（如上所示），並用以下行替換

if (ballIsOutOfBounds) {
  this.ballLeaveScreen();
}

我們希望每次球離開畫布時都減少生命數量。將 ballLeaveScreen() 方法定義新增到 ExampleScene 類的末尾

class ExampleScene extends Phaser.Scene {
  // ...
  ballLeaveScreen() {
    this.lives--;
    if (this.lives > 0) {
      this.livesText.setText(`Lives: ${this.lives}`);
      this.lifeLostText.visible = true;
      this.ball.body.reset(this.scale.width * 0.5, this.scale.height - 25);
      this.input.once(
        "pointerdown",
        () => {
          this.lifeLostText.visible = false;
          this.ball.body.setVelocity(150, -150);
        },
        this,
      );
    } else {
      // Game over logic
      location.reload();
    }
  }
}

而不是在失去生命時立即彈出提示，我們首先從當前數量中減去一條生命，並檢查它是否為非零值。如果是，則玩家仍有一些生命，並且可以繼續玩——他們將看到生命丟失訊息，球和擋板的位置將在螢幕上重置，在下一個輸入（單擊或觸控）時，訊息將隱藏，球將再次開始移動。

當可用生命數量達到零時，遊戲結束，將顯示遊戲結束提示訊息。

事件

您可能已經注意到上述程式碼塊中的 once 方法呼叫，並想知道它是什麼。once() 方法是一個 Phaser 事件偵聽器，它偵聽指定事件（在本例中為 pointer down 事件）的下一次發生，然後在觸發後自行移除。這意味著回撥中的程式碼在呼叫 once 後只會執行一次，這正是我們想要的——我們只想在玩家單擊或觸控式螢幕幕後隱藏生命丟失訊息並重新開始球的移動。

Compare your code

這是您到目前為止應該看到的效果，即時執行。要檢視其原始碼，請單擊“播放”按鈕。

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.90.0/phaser.js"></script>

* {
  padding: 0;
  margin: 0;
}

class ExampleScene extends Phaser.Scene {
  ball;
  paddle;
  bricks;

  scoreText;
  score = 0;

  lives = 3;
  livesText;
  lifeLostText;

  preload() {
    this.load.setBaseURL(
      "https://mdn.github.io/shared-assets/images/examples/2D_breakout_game_Phaser",
    );

    this.load.image("ball", "ball.png");
    this.load.image("paddle", "paddle.png");
    this.load.image("brick", "brick.png");
  }
  create() {
    this.physics.world.checkCollision.down = false;

    this.ball = this.add.sprite(
      this.scale.width * 0.5,
      this.scale.height - 25,
      "ball",
    );
    this.physics.add.existing(this.ball);
    this.ball.body.setVelocity(150, -150);
    this.ball.body.setCollideWorldBounds(true, 1, 1);
    this.ball.body.setBounce(1);

    this.paddle = this.add.sprite(
      this.scale.width * 0.5,
      this.scale.height - 5,
      "paddle",
    );
    this.paddle.setOrigin(0.5, 1);
    this.physics.add.existing(this.paddle);
    this.paddle.body.setImmovable(true);

    this.initBricks();

    const textStyle = { font: "18px Arial", fill: "#0095dd" };
    this.scoreText = this.add.text(5, 5, "Points: 0", textStyle);

    this.livesText = this.add.text(
      this.scale.width - 5,
      5,
      `Lives: ${this.lives}`,
      textStyle,
    );
    this.livesText.setOrigin(1, 0);
    this.lifeLostText = this.add.text(
      this.scale.width * 0.5,
      this.scale.height * 0.5,
      "Life lost, click to continue",
      textStyle,
    );
    this.lifeLostText.setOrigin(0.5, 0.5);
    this.lifeLostText.visible = false;
  }
  update() {
    this.physics.collide(this.ball, this.paddle);
    this.physics.collide(this.ball, this.bricks, (ball, brick) =>
      this.hitBrick(ball, brick),
    );

    this.paddle.x = this.input.x || this.scale.width * 0.5;
    const ballIsOutOfBounds = !Phaser.Geom.Rectangle.Overlaps(
      this.physics.world.bounds,
      this.ball.getBounds(),
    );
    if (ballIsOutOfBounds) {
      this.ballLeaveScreen();
    }
    if (this.bricks.countActive() === 0) {
      alert("You won the game, congratulations!");
      location.reload();
    }
  }

  initBricks() {
    const bricksLayout = {
      width: 50,
      height: 20,
      count: {
        row: 3,
        col: 7,
      },
      offset: {
        top: 50,
        left: 60,
      },
      padding: 10,
    };

    this.bricks = this.add.group();
    for (let c = 0; c < bricksLayout.count.col; c++) {
      for (let r = 0; r < bricksLayout.count.row; r++) {
        const brickX =
          c * (bricksLayout.width + bricksLayout.padding) +
          bricksLayout.offset.left;
        const brickY =
          r * (bricksLayout.height + bricksLayout.padding) +
          bricksLayout.offset.top;

        const newBrick = this.add.sprite(brickX, brickY, "brick");
        this.physics.add.existing(newBrick);
        newBrick.body.setImmovable(true);
        this.bricks.add(newBrick);
      }
    }
  }

  hitBrick(ball, brick) {
    brick.destroy();
    this.score += 10;
    this.scoreText.setText(`Points: ${this.score}`);
  }

  ballLeaveScreen() {
    this.lives--;
    if (this.lives > 0) {
      this.livesText.setText(`Lives: ${this.lives}`);
      this.lifeLostText.visible = true;
      this.ball.body.reset(this.scale.width * 0.5, this.scale.height - 25);
      this.input.once(
        "pointerdown",
        () => {
          this.lifeLostText.visible = false;
          this.ball.body.setVelocity(150, -150);
        },
        this,
      );
    } else {
      // Game over logic
      location.reload();
    }
  }
}

const config = {
  type: Phaser.CANVAS,
  width: 480,
  height: 320,
  scene: ExampleScene,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
  },
  backgroundColor: "#eeeeee",
  physics: {
    default: "arcade",
  },
};

const game = new Phaser.Game(config);

後續步驟

生命系統讓遊戲更加寬容——如果您失去一條生命，您還有兩條生命可以繼續玩。現在，讓我們透過新增動畫和緩動效果來擴充套件遊戲的外觀和感覺。

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025 年 8 月 2 日，由 MDN 貢獻者編輯。

在 GitHub 上檢視此頁面 • 報告此內容的某個問題