太空卫士 - 部分游戏状态

在上一篇文章中我们已经使用了 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中文网其他相关文章！