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

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