HTML and CSS Reference
In-Depth Information
this.node.classList.remove('in');
this.node.classList.add('out');
}
};
After this, comes the
GameOver
scene, which is a clone instance of the basic scene object. It
adds logic to the
setup
funcion for the restart buton:
// Gameover Scene
var gameOverScene = game.gameOverScene = Object.create(scene);
gameOverScene.node = document.getElementById('gameover-scene');
gameOverScene.setup = function() {
document.getElementById('back-to-menu-button').onclick =
function() {
game.flow.startGame();
};
};
}).call(this);
Game scene is an object that extends from the generic scene:
// game scene module
;(function(){
var game = this.spaceRunner || (this.spaceRunner = {});
var gameScene = game.gameScene = Object.create(game.scene);
gameScene.node = document.getElementById('game-scene');
gameScene.onShow = function() {};
}).call(this);
We need CSS styles for the scenes element and the in/out transiion. The CSS for scenes is
exactly the same as seen in
Project 2
,
Card Batle!
. Please refer to the task
Creaing the game
scenes
in
Project 2
,
Card Batle!
, for the CSS style.
Engage thrusters
Since it is an HTML-oriented game, we first work on the game's HTML file by performing the
following steps:
1. We construct the scenes and game objects in the HTML file:
...
<section id="game" class="row">
<div id="game-scene" class="scene">
</div>
