How to Add a Game Over Screen and Handle Game Restart

This tutorial was put together by our community member shawnBuilds for Rosebud AI, the AI-powered game creation platform. Check out shawn’s games here, and join our Discord to find more tutorials and connect with other creators!

‍

Adding a restart to your game can be pretty frustrating. I'll show you how to prevent common errors anytime you add this feature.  

We'll use a simple 2D shooter game, and add a way to restart and a nice-looking display when the game ends. And, we'll work with Rosie to set up these important features, making our game more fun to play. Let's get started!

Setup Project

You can try out the starting project here: https://play.rosebud.ai/games/48964143-dcde-4f53-b6fc-3f613fb9ee54

Feel free to click "remix" to follow along as we build this out.

Step #1: End the game

First, we need to add what happens when the player dies.

Prompt:

Hey Rosie! Let's add game over functionality to our 2D shooter. Here's what we need:

• End the game when the player dies:
 - Safely remove all active game objects
 - Keep only essential UI elements visible
 - Prepare for a game over display (we'll add this later)

• Clean up the game state:
 - Clear all active time events and timers
 - Save the high score in local storage with a unique label

• Handle player input:
 - Disable player-specific actions like shooting
 - Keep general input (mouse and keyboard) enabled

Remember to always check if objects exist before trying to destroy or modify them!

Now, when you run out of health, the game stops right away. The screen clears the player, enemies, and bullets. Your final score is saved, and you can't move or shoot anymore.

Best Practices:

• Check if game objects still exist before removing them. This stops the game from crashing when trying to remove things that are already gone. For example, a bullet that kills the player might disappear right away, but then the game tries to remove it again, causing a crash if not checked.
• Remove all active timers when the game ends. This stops crashes caused by timers trying to work with game objects that are gone. For example, a timer that makes new enemies might try to do so after the game is over, causing errors.
• Turn off player actions but keep other controls on. This lets players restart the game or use menus without accidentally doing things like shooting after the game is over.

‍

Step #2: Restart the game

Now, let's add a way to restart the game.

Prompt:

Hey Rosie! Let's add restart functionality to our game. Here's what we need:

• Create a temporary restart mechanism:
 - Add a debug key 'R' to restart the game when it's over

• Implement restart actions:
 - Hide the game over display (we'll create this later)
 - Reset the player to their initial state
 - Restart enemy spawning
 - Reset the score to zero

Make sure this only works when the game is actually over!

Now, when the game is over, pressing the 'R' key will start the game again. The player shows up at the start, enemies begin to appear, and your score goes back to zero.

Best Practices:

• Make the game restart feature without adding new things like a menu. This makes the restart easier to understand and change. For example, focus only on resetting game objects and scores without worrying about menu buttons.
• Add a test key for restarting. You can quickly check if the restart works during development without a menu. For instance, using the 'R' key lets you quickly test the game loop without clicking buttons or going through menus.

‍

Step #3: Add game over screen

Finally, let's make a nice game over screen.

Prompt:

Hey Rosie! Let's create a stylish game over display. Here's what we need:

• Create the display content:
 - Add "Game over!" text
 - Show the high score
 - Display the current score
 - Include a "Play again" button

• Style and position the display:
 - Use HTML elements created with JavaScript
 - Position the display over the Phaser game window
 - Arrange elements in a centered, vertical list

• Add interactivity to the Play Again button:
 - Create a fill/unfill effect on hover
 - Make the button restart the game when clicked

Remember to use HTML for the display, not the game canvas!

Now, when the game ends, a "Game Over" screen shows up over the game. It displays your score, the high score, and a "Play Again" button. Clicking the button or pressing 'R' starts the game over.

Best Practices:

• Use HTML for the game over screen. This gives you more options to make it look good compared to using Phaser. For example, you can easily make pretty buttons and text layouts.
• Make HTML elements with JavaScript for the game over screen. This lets you add and change the screen easily in your game.
• Put the screen over the Phaser game window. This makes the screen stay in the right place, even if the game size changes. For example, if the player makes the game full screen, your game over screen will still be in the middle and easy to see.

‍

Finished Project Link

Here's the finished project so you can see how it all works together: https://play.rosebud.ai/games/e8f388de-5c20-44b5-9161-f2170499c4f5

Great job! You've made your 2D shooter game more polished by adding a proper ending, a way to restart, and a nice game over screen. These changes are key for making players excited to play again. Have fun making your games even better!