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>
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 {
Search WWH ::

Custom Search