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 mini piano musical game

Carry out the following steps:

  1. We want to show an indication when pressing the keyboard. Open the index.html file and add the following highlighted HTML:
    <div id="game-scene" class="scene">
       <!-- existing code goes here -->
       <div id="hit-line-1" class="hit-line hide"></div>
       <div id="hit-line-2" class="hit-line hide"></div>
       <div id="hit-line-3" class="hit-line hide"></div>
    </div>
  2. Then, we may want to inform visitors that they can play the game by pressing the J, K, and L keys. Modify the footer content as follows:
    <footer>
       <p>This is an example of making audio game in HTML5. Press J, K, L to play.
       </p>
    </footer>
  3. Now, we will move on to the stylesheet. Open the css/audiogame.css file and put the following ...

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