HTML5 Game Development by Example(Second Edition)

Time for action – creating a basic background for the music game

First, we will draw a few paths in the Canvas as the background of the music playback.

1. We will continue working with our example and draw the background. Open the index.html file in a text editor and add the following highlighted code that defines the game scene with two Canvases set up:

   <div id="game">
     <div id="menu-scene" class="scene">
       <a href="#game"><span>Play</span></a>
     </div>
   
     <div id="game-scene" class="scene">
       <canvas id="game-canvas" width="320" height="440">
         This is an interactive audio game with some music notes moving from top to bottom.
       </canvas>
     </div>
   </div>

2. We added a game scene in the HTML file. We want to put it on top of the menu scene, so we style the game scene ...