太空卫士 - 部分游戏状态-js教程-PHP中文网

在上一篇文章中我们已经使用了 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;

登录后复制

现在，我们应该能够玩游戏，暂停游戏，并在输了时重新启动游戏。