Book Image

HTML5 Game Development by Example: Beginner's Guide

By : Seng Hin Mak
Book Image

HTML5 Game Development by Example: Beginner's Guide

By: Seng Hin Mak

Overview of this book

Table of Contents (18 chapters)
HTML5 Game Development by Example Beginner's Guide Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
9
Building a Physics Car Game with Box2D and Canvas
Index

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 code at the end of the file:

    #hit-line-1 {
      left: 35px;
      top: 335px;
    }
    
    #hit-line-2 {
      left: 135px; /* 320/2-50/2 */
      top:  335px;
    }
    
    #hit-line...