O'Reilly logo

HTML5 Game Development HOTSHOT by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required