Multiply Defense - HTML5 Game Development - page 142

background-image: url(../images/replay_hover.png);
}
#replay-btn:active {
background-image: url(../images/replay_active.png);
}
Now the game-over layer is ready and we can get into the JavaScript code.
Engage thrusters
Let's work on the JavaScript code to restart our game after the game is over.
1. In the gameView JavaScript object, we define two more methods to show and hide
the game-over overlay, which are shown as follows:
game.gameView = {
gameOverOverlay: document.getElementById('game-over'),
showGameOver: function() {
this.gameOverOverlay.classList.remove('hide');
this.gameOverOverlay.classList.add('show');
},
hideGameOver: function() {
this.gameOverOverlay.classList.remove('show');
this.gameOverOverlay.classList.add('hide');
},
// existing gameView code goes here.
};
2. We handle the click event of the restart buton. Put the following code inside the
input module:
// replay button in game over scene
var replay = document.getElementById('replay-btn');
replay.onclick = function(){
game.resetGame();
};
3. We need the resetGame method that resets all the game objects to their
iniial statuses:
game.resetGame = function() {
this.lifes = game.setting.initialLifes;
game.gameView.removeAllNumberBoxes();
game.gameView.hideGameOver();