In this task, we provide a game over screen with a button to let the player restart the game.
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);
}
#replay-btn:active {
background-image...