2.2.10 Cycle 10 - Add Game Over and Restart

Design

Objectives

In this cycle I aim to add a restart and game over menu which will come up when the player dies, and this will allow the player to quickly restart if they die using a GUI, which is far nicer than having to refresh the page.

• Add a restart button

• Add a game over screen

Usability Features

Key Variables

Variable Name	Use
gameOver	This is the variable that parses the gameOver data to the html code.
restart	This is the variable that parses the restart data to the html code.
explosion	This is the variable that stores the animation for the player exploding.

Pseudocode

procedure killPlayer
    explosion = new sprite ( player x, player y, as explosion animation)
    play explosion
    kill player
    
    respawn = listen for click anywhere 
end procedure

Development

Outcome

Game.js

Game.js

const gameOver = document.querySelector('.gameover');
const restart = document.querySelector('.restart');
//Function killPlayer removes the player from the game
function killPlayer() {
  let explosion = game.add.sprite(player.x - 50, player.y - 80, 'explosion');
  explosion.scale.set(4);
  explosion.animations.add('boom');
  explosion.play('boom', 15, false, true);
  player.kill();

  setInterval(function() {
    Phaser.GAMES[0].paused = true;
  }, 500);

  if (laser) {
    laser.kill();
  }

  restart.classList.remove('display-none');
  gameOver.style.display = 'initial';

  restart.addEventListener('click', function(e) {
    location.reload();
  });
}

index.html

index.html

<div id="game-wrapper">
        <h1 class="score">Score: 0</h1>
        <h1 class="gameover">GAME OVER</h1>
        <div class="restart display-none">RESTART</div>
        <h5 id="health">Health: 200</h5>
</div>

Challenges

I was implementing this feature at the same time as I was adding the pause menu, so I was having the same issue where I wasn't declaring the html variables that link this data in the javascript to the html code, and this meant that it was erroring as there was no data.

I also had a typo with adding the explosion animation that meant the code was erroring when the player was killed and this meant that it wasn't reaching the code with the restart and the game over menu.

Testing

Evidence for testing

Tests

Test	Instructions	What I expect	What actually happens	Pass/Fail
1	Crash the player ship	The menu should appear and so should the restart button. The restart button should glow yellow when you hover over it.	Nothing comes up.	Fail
2	Crash the player ship	The menu should appear and so should the restart button. The restart button should glow yellow when you hover over it.	As expected	Pass

Evidence

This is a picture of the game over menu and the restart button

What next?

• I want to try and add a pause menu to the game, to be able to pick up where you left off