Building a CSS Quest Game - HTML5 Game Development - page 9

The following figure shows three scenes of what we will create in this task:
Engage thrusters
We code the management part of the scene via the following steps:
1. The scenes are DOM elements, so we will have the following HTML elements
defined inside the tag with the game ID:
<div id="game-scene" class="scene out">
<a href="#" id="gameover-btn">Game Over</a>
<a href="#" id="finish-btn">Finish</a>
</div>
<div id="start-scene" class="scene">
<a href="#" id="start-btn" class="button">
Start Game</a>
</div>
<div id="summary-scene" class="scene out">
<a href="#" id="next-level-button"
class="button">Next</a>
</div>
<div id="gameover-scene" class="scene out">
<a href="#" id="back-to-menu-button"
class="button">Back to menu</a>
</div>
2. Now, we need to import our newly created scenes.js file into the HTML file,
before the game.js file:
<script src='js/scenes.js'></script>
<script src='js/game.js'></script>
</body>