当前位置：首页 > 文章列表 > 文章 > 前端 > 太空卫士 - 部分游戏状态

太空卫士 - 部分游戏状态

来源：dev.to 2024-07-21 08:06:51 0浏览收藏

本篇文章向大家介绍《太空卫士 - 部分游戏状态》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

在上一篇文章中我们已经使用了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 状态，我们不想在玩家按下向左或向右箭头键时设置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;

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