在上一篇文章中我们已经使用了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 textconst 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：
芝士饼
芝士饼是一个一站式AI原生应用开发平台，简单几步即可完成应用的创建与发布。
42 查看详情 
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 日
＃生产率 #初学者 ＃讨论 ＃动机
不要忘记订阅我的时事通讯，成为第一个了解与这些类似的教程的人。
以上就是太空卫士 – 部分游戏状态的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/468690.html
微信扫一扫 
支付宝扫一扫 
