Building a CSS Quest Game - HTML5 Game Development - page 12

nextLevel: function() {
game.startScene.hide();
game.summaryScene.hide();
game.gameScene.show();
},
finishLevel: function() {
game.gameScene.hide();
game.summaryScene.show();
},
}
9. The init funcion is the entry point of the game. Inside this funcion, we will
register the click input listeners:
var init = function() {
game.startScene.handleInput();
game.summaryScene.handleInput();
game.gameoverScene.handleInput();
game.gameScene.handleInput();
}
10. At last, we need some styling for the scenes to make them work. Put the following
CSS rules at the end of the game.css file:
#game {
width: 480px;
height: 600px;
margin: 0 auto;
border: 1px solid #333;
text-align: center;
position: relative;
overflow: hidden;
}
.scene {
background: white;
width: 100%;
height: 100%;
position: absolute;
transition: all .4s ease-out;
}
.scene.out {top: -150%;}
.scene.in {top: 0;}
.button {
width: 145px;