HTML and CSS Reference
In-Depth Information
6. Then, we have the summary scene. The summary scene has a buton that links to
the game scene again to show the next level:
var summaryScene = game.summaryScene =
Object.create(scene);
summaryScene.node = document.getElementById('summary-
scene');
summaryScene.handleInput = function() {
document.getElementById('next-level-button')
.onclick = function() {
game.flow.nextLevel();
};
};
7. At last, we add the game over scene code to the
scenes.js
file. When the game is
over, we bring the player back to the menu scene ater the back buton is clicked:
var gameoverScene = game.gameoverScene = Object.create(scene);
gameoverScene.node = document.getElementById('gameover-scene');
gameoverScene.handleInput = function() {
var scene = this;
document.getElementById('back-to-menu-button').onclick =
function() {
game.flow.startOver();
};
};
8. Now, we will define a game flow in the
game.js
file that will help us control how to
show and hide the scenes:
// Main Game Logic
game.flow = {
startOver: function() {
game.startScene.hide();
game.summaryScene.hide();
game.gameoverScene.hide();
game.gameScene.hide();
game.startScene.show();
},
gameWin: function() {
game.gameScene.hide();
game.summaryScene.show();
},
gameOver: function() {
game.startScene.show();
game.gameScene.hide();
game.gameoverScene.show();
},
