太空衛士 - 部分遊戲狀態

在上一篇文章中我們已經使用了 HUD，現在我們的遊戲已經基本完成，但還缺少一些東西。我們需要添加一個遊戲結束畫面以及重新啟動遊戲的方法。我們還希望在您剛開始遊戲時添加一個螢幕，而不是立即開始遊戲。

遊戲狀態

我們將在遊戲中加入一些遊戲狀態。我們將有一個 gameState 枚舉來保存遊戲的不同狀態。我們還將有一個變數來保存遊戲的當前狀態。

在 main.ts 檔案的開頭加入以下程式碼：

enum gameStates {
    "PLAYING",
    "PAUSED",
    "GAME_OVER"
}
let gameState = gameStates.PAUSED;

此程式碼建立一個名為 gameStates 的枚舉，用於保存遊戲的不同狀態。然後我們建立一個名為 gameState 的變數來保存遊戲的當前狀態。我們將初始狀態設定為 PAUSED。

在對這些狀態進行任何操作之前，我們需要一個重置函數。該函數將在我們開始遊戲之前被呼叫。將以下程式碼加入 main.ts 檔案的底部：

function resetGame() {
    lives = 3;
    level = 1;
    score = 0;
    setHudValue("gameLives", lives);
    setHudValue("gameLevel", level);
    setHudValue("gameScore", score);
    Player.x = app.screen.width / 2 - Player.width / 2;
    Player.y = app.screen.height - 50;
    bullets.forEach(bullet => app.stage.removeChild(bullet));
    enemies.forEach(enemy => app.stage.removeChild(enemy));
    bullets.length = 0;
    enemies.length = 0;
    setEnemySpawnInterval();
    spawnEnemy();
}

這會將所有值設為初始值，清除舞台和陣列中的子彈和敵人，重置玩家的位置，並設定敵人的生成間隔。然後透過生成敵人來開始遊戲。

現在已經設定完畢，讓我們加入一種開始遊戲的方式。

開始遊戲

我們將為此添加一個新的 KeyHandler。在我們為左右箭頭鍵定義 KeyHandler 的位置之後加入以下程式碼：

KeyHandler(
    "Enter",
    () => {
        if(gameState !== gameStates.PLAYING) {
            if(gameState === gameStates.GAME_OVER) {
                resetGame();
            }
            gameState = gameStates.PLAYING;
            togglePauseText();
        }
    }
);

當玩家按下 Enter 鍵時，此程式碼將開始遊戲。如果遊戲不處於PLAYING狀態，則會將遊戲狀態設為PLAYING。如果遊戲處於GAME_OVER狀態，則會重置遊戲，然後將遊戲狀態設為PLAYING。

但是玩家不會知道這一點，所以我們需要一些文字來告訴玩家要做什麼。在我們定義 KeyHandlers
的位置之後加入以下程式碼

// A simple text style, 24px white text
const textsStyle = {
    fontSize: 24,
    fill: 0xFFFFFF
};

let startGameText = new PIXI.Text({
    text: 'Press enter to start the game',
    style: textsStyle
});

startGameText.y = 250;

function togglePauseText() {
    if(gameState === gameStates.PAUSED || gameState === gameStates.GAME_OVER) {
        // Since the text can change, we need to reposition it.
        startGameText.x = app.screen.width / 2 - startGameText.width / 2;
        app.stage.addChild(startGameText);
    } else {
        app.stage.removeChild(startGameText);
    }
}
togglePauseText();

此程式碼會建立一個新的文字對象，其中顯示「按 Enter 鍵開始遊戲」並將其放置在螢幕中間。然後，它會建立一個名為togglePauseText 的函數，該函數將根據當前遊戲狀態顯示或隱藏文字。然後，當遊戲暫停或結束時，它會呼叫此函數來顯示文字。

現在，我們還想暫停遊戲。

暫停遊戲

在我們定義左右箭頭鍵的 KeyHandler 之後加入以下程式碼：

KeyHandler(
    "Escape",
    () => {
        if(gameState !== gameStates.PAUSED) {
            gameState = gameStates.PAUSED;
            startGameText.text = 'Press enter to resume the game';
            togglePauseText();
        }
    }
);

在此程式碼中，當玩家按下 Escape 鍵時，我們將把 gameState 設為 PAUSED。我們還將重複使用 startGameText 物件並將文字設定為「按 Enter 鍵恢復遊戲」。

使用遊戲狀態

太好了，現在我們可以在「PLAYING」和「PAUSED」狀態之間切換，讓我們實際使用這些狀態，並讓遊戲進行相應的操作。

如果我們沒有處於 PLAYING 狀態，我們不想在玩家按下向左或向右箭頭鍵時設定playerSpeed。將以下程式碼加入 KeyHandlers 中，我們將左右箭頭鍵的 playerSpeedX 設定為 500 或 -500：

if (gameState !== gameStates.PLAYING) {
    return;
}

同時將上述程式碼加入空白鍵KeyHandler的處理程序中，以便玩家在遊戲暫停或結束時無法射擊。

接下來，更新spawnEnemy函數中的if語句，如下圖所示：

if(!document.hasFocus() || gameState !== gameStates.PLAYING) {
    return;
}

最後，如果我們暫停，整個遊戲循環不需要觸發，請在遊戲循環的開頭添加以下程式碼：

if(gameState !== gameStates.PLAYING) {
    return;
}

遊戲結束

現在我們有了開始和暫停遊戲的方法，讓我們在螢幕上添加遊戲。

現在我們有一個 console.log("Game Over")，我們想要將遊戲狀態設為 GAME_OVER 並顯示遊戲結束文字。將 console.log 替換為以下程式碼：

gameState = gameStates.GAME_OVER;
startGameText.text = 'Press enter to restart the game';
scoreText.text = `Score: ${score}`;
scoreText.x = app.screen.width / 2 - scoreText.width / 2;
app.stage.addChild(gameOverText);
togglePauseText();
app.stage.addChild(scoreText);

此程式碼使用了另外兩個我們尚未建立的文字對象，讓我們這樣做。

在我們建立 startGameText 物件之後，加入以下程式碼：

let gameOverText = new PIXI.Text({
    text: 'GAME OVER',
    style: textsStyle
});

gameOverText.x = app.screen.width / 2 - gameOverText.width / 2;
gameOverText.y = 200;

let scoreText = new PIXI.Text({
    text: 'Score: 0',
    style: textsStyle
});

scoreText.y = 300;

現在，我們應該能夠玩遊戲，暫停遊戲，並在輸了時重新啟動遊戲。

結論

就是這樣！現在您可以玩遊戲，暫停遊戲，輸掉遊戲後重新啟動。

我知道最後一部分可能有點讓人不知所措，但我希望您能夠跟上並理解所有內容，不要忘記您可以隨時查看完整的源代碼。如果您有任何問題或回饋，請隨時透過 X 聯繫我或在下面發表評論

---

這是這個小系列的最後一部分，我希望你喜歡它並學到一些新東西。在留給您的同時，我想指出的一件小事是，這是一款非常基礎的遊戲，有很多方法可以改進它。你可以增加更多的敵人、能力提升、不同的等級等等。我鼓勵您嘗試和嘗試新事物，這就是您作為開發人員學習和成長的方式。

此外，這個遊戲的結構方式並不是構建遊戲的最佳方式，但為了本教程的目的，我想保持簡單並放在一個文件中。在未來的教程中，我可能會向您展示如何以更具可擴展性的方式建立遊戲。

感謝您從頭到尾閱讀本教學！

---

使用 Vite 和 TypeScript 設定 PixiJS

先生。 Linxed ・ 4 月 20 日

#webdev #javascript #初學者 ＃教程

透過「完成崇拜」實現更多

先生。 Linxed ・ 2 月 18 日

＃生產率 #初學者 ＃討論 ＃動機

---

不要忘記訂閱我的時事通訊，成為第一個了解類似教學的人。

以上是太空衛士 - 部分遊戲狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！