O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

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 the game panel

The next thing we will create is the game panel. We already have the piano keyboard, which will be part of it. We also need an area above it to show the notes dropping down, and a place to show the results when the game has finished. Let's add these to our HTML file inside the game element and above the keyboard:

<div id="game">
    <div id="notes-panel">
        <div class="title">PIANO HERO</div>
    </div>

The <div id="notes-panel"> element will be used to hold the elements that represent the notes to play. It is empty for now. The note elements will be added dynamically to this element while the game is playing. It has a <div> element with the title in it that will show up behind the notes.

 <div id="results-panel"> ...

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