在上一篇文章中我们已经使用了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;
现在，我们应该能够玩游戏，暂停游戏，并在输了时重新启动游戏。
结论
就是这样！您现在可以玩游戏，暂停游戏，输掉游戏后重新启动。
我知道最后一部分可能有点让人不知所措，但我希望您能够跟上并理解所有内容，不要忘记您可以随时查看完整的源代码。如果您有任何问题或反馈，请随时通过 x 联系我或在下面发表评论
这是这个小系列的最后一部分，我希望你喜欢它并学到新的东西。在留给您的同时，我想指出的一件小事是，这是一款非常基础的游戏，有很多方法可以改进它。你可以添加更多的敌人、能力提升、不同的等级等等。我鼓励您尝试和尝试新事物，这就是您作为开发人员学习和成长的方式。
此外，这个游戏的结构方式并不是构建游戏的最佳方式，但出于本教程的目的，我想保持简单并放在一个文件中。在未来的教程中，我可能会向您展示如何以更具可扩展性的方式构建游戏。
感谢您从头到尾阅读本教程！
使用 vite 和 typescript 设置 pixijs
先生linxed ・ 4 月 20 日
通过“完成崇拜”取得更多成就
先生linxed ・ 2 月 18 日
不要忘记订阅我的时事通讯，成为第一个了解与这些类似的教程的人。
