HTML and CSS Reference
In-Depth Information
3. In the scene.js file, we add the following code to define the scene's object and
its instances:
(function(){
var game = this.colorQuestGame = this.colorQuestGame ||
{};
// put common scene logic into 'scene' object.
var scene = {
node: document.querySelector('.scene'),
show: function() {
this.node.classList.remove('out');
this.node.classList.add('in');
},
hide: function() {
this.node.classList.remove('in');
this.node.classList.add('out');
}
};
// scene instances code to go here.
)();
4. Then, we create an instance of the game scene. Put the following code right after
the scene object code. The following code creates two temporary links to finish
the level and complete the game:
var gameScene = game.gameScene = Object.create(scene);
gameScene.node = document.getElementById('game-scene');
gameScene.handleInput = function() {
document.getElementById('finish-btn').onclick = function(){
game.flow.finishLevel();
};
document.getElementById('gameover-btn').onclick = function(){
game.flow.gameOver();
};
};
5. The start scene instance comes after the game scene code. The following code
handles the clicking of the start buton that links to the game scene:
var startScene = game.startScene = Object.create(scene);
startScene.node = document.getElementById('start-scene');
startScene.handleInput = function() {
document.getElementById('start-btn').onclick = function(){
game.flow.nextLevel();
};
};
 
Search WWH ::




Custom Search