HTML and CSS Reference
In-Depth Information
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 scene is an object that extends from the generic scene:
// game scene module
var game = this.spaceRunner || (this.spaceRunner = {});
var gameScene = game.gameScene = Object.create(game.scene);
gameScene.node = document.getElementById('game-scene');
gameScene.onShow = function() {};
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">
Search WWH ::

Custom Search