HTML and CSS Reference
In-Depth Information
Restarting the game
In this task, we provide a game over screen with a buton 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
secion ater the exising 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 {
