HTML and CSS Reference
In-Depth Information
<div id="gameover-scene" class="scene out">
<p><a href="#" id="back-to-menu-button"
class="button"></a></p>
</div>
</section>
...
2. The following CSS (
game.css
) rules are for the game over scene. In the game over
screen, we need a background and a restart buton:
.button {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#gameover-scene {
background: rgba(0, 0, 0, .5) url(../images/gameover.png);
}
3. Next, we iniialize the game with a temporary code that toggles the game into the
game over state after a 3 seconds delay:
gameScene.setup = function() {
this.startOver();
};
gameScene.startOver = function() {
game.isGameOver = false;
// temporary code to test game over scene
setTimeout(function(){
game.flow.gameOver();
}, 3000);
// end temporary code
};
It's ime to check whether the code works. When we open the HTML ile in a web browser,
the game should start at the game scene. Wait for 3 seconds ater staring the game and the
game switches to the game over scene. Then, try to click anywhere in the game and it will
lead us to the game scene again.
