Card Battle! - HTML5 Game Development - page 48

gameScene.node = document.getElementById('game-scene');
gameScene.onShow = function() {
setTimeout(game.flow.gameOver, 3000);
}
})();
That's all the code that we need to complete the objecive of creaing the game scenes.
Objective complete - mini debriefing
We have set up the HTML structure and game scenes as explained in the following secions.
HTML structure for scenes
The #game element is the key element. Inside the game, we have scenes that contain game
objects. We have three scenes in this game. The major scene is game-scene which contains
most of the card-batle objects. The following is the structure of the HTML nodes in our game:
#game
#start-scene
//Start button
#game-scene
//Game elements to be added later
#gameover-scene
//Startover button
HTML structure for game objects
In a Document Object Model ( DOM )-based HTML game, we define game objects by using
DOM elements.
Logic modules
There are several core modules in our game, such as game low, scene, game scene, batle
animaion, and health point. In this task, we deine the game low module and the structure
of the scenes module. In the future tasks, we are going to refine each module to make them
work together.
Game flow
The game flow logic is heavily inspired from the CSS matching game in Project 1 , Building
a CSS Quest Game . But in this game, we simplified the flow to have only three states: start
over, start game, and game over. When each flow is toggled, the corresponding scene is
displayed and all other scenes are hidden.