O'Reilly logo

HTML5 Game Development by Example : Beginner's Guide - Second Edition by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required