Game Over Menu Component

The Game Over Menu component displays the player's final score and provides an option to restart the game. Below, we break down its implementation.

1. Import Statements

import React from 'react';

Imports the React library, which is required to create the GameOverMenu component.

2. Functional Component Declaration

const GameOverMenu = ({ score, onRestart }) => { ... };

The `GameOverMenu` component is a functional component that takes two props: - `score`: Displays the player's final score. - `onRestart`: A function that resets the game when triggered.

3. Rendering the Game Over Screen


        return (
          <div className="game-over">
            <h2>Game Over!</h2>
            <p>Final Score: {score}</p>
            <button className="button" onClick={onRestart}>
              Play Again
            </button>
          </div>
        );

This renders the Game Over screen: - A message (`Game Over!`) to notify the player. - The player's final score (`score`). - A button (`Play Again`) to restart the game. Clicking the button triggers the `onRestart` function passed as a prop.

4. Export Statement

export default GameOverMenu;

Exports the `GameOverMenu` component so it can be used in the main game logic or other parts of the application.

Back to Home