Restarting the game

In this task, we provide a game over screen with a button to let the player restart the game.

Prepare for lift off

We will first set up the game-over overlay in HTML. We add the following HTML script inside the #game section after the existing elements and just before closing the </section>, as shown in the following code:

<div id="game-over" class="hide">
  <a href="#" id="replay-btn"></a>
</div>

An HTML often comes with its styles. We will add the following style from CSS:

// game over scene
#game-over {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}
// visibility controlling
.show {
  display: block;
}
.hide {
  display: none;
}

#replay-btn {
  background: url(../images/replay.png);
  display: block;
  width: 100px;
  height: 60px;
  margin: auto;
  position: relative;
  top: 200px;
}
#replay-btn:hover {
  background-image: url(../images/replay_hover.png);
...