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">
        <h1>Score: <span class="score"></span></h1>
        <p>
            You got <span class="correct"></span>
            out of <span class="count"></span> notes correct.
        </p>
        <p>
            Note accuracy: <span class="note-accuracy"></span>%<br/>
            Timing accuracy: <span class="timing-accuracy"></span>%
        </p>
    </div>

The <div id="results-panel"> element will be shown when the game is completed. We add the <span> placeholders to show a score, the total number of notes along with the number of correct ones, and some accuracy statistics.

    <div class="keyboard">
        <div class="keys">
            <!-- Code not shown... -->
        </div>
        <div class="controls">
            <button id="stop-button">Stop</button>
            <button id="restart-button">Restart</button>
            <button id="quit-button">Quit</button><br/>
            <label for="sustain">Sustain: </label>
            <input type="checkbox" id="sustain" checked /><br />
            <label for="volume">Volume: </label>
            <input type="range" id="volume" min="1" max="100"
                value="100" step="1" />
        </div>
    </div>
</div>

We also added some buttons to the <div class="controls"> element below the keyboard. The Stop button will stop the game, Restart will start the current song over from the beginning, and Quit will take the player back to the splash panel.

Now let's create a GamePanel object in a file named gamePanel.js to contain all of the code needed to implement the game. The constructor will take a reference to the audioManager object:

function GamePanel(audioManager)
{
    var $panel = $("#game"),
        $notesPanel = $("#notes-panel"),
        $resultsPanel = $("#results-panel"),
        practiceMode = false,
        noteCount = 0,
        notesCorrect = 0,
        score = 0,
        keyCodesToNotes = {},
        sustain = true,
        volume = 1.0;

Here we define a few variables to keep track of the game state. The practiceMode variable determines if we are playing the game or practicing. noteCount, notesCorrect and score are used to keep track of how the player is doing.

We move all of the code to support the keyboard from the PianoHeroApp object to the GamePanel object. This includes the keyCodesToNotes, sustain, and volume variables. We also move the initKeyboard() , keyDown(), keyUp(), pressPianoKey(), releasePianoKey(), getPianoKeyElement() , and isInputTypeSupported() methods. Finally, we move the onKeyDown() and onKeyUp() event handlers.

Now let's add some public methods for the application to interact with the game panel. Like the splash panel, we need methods to show and hide it:

this.show = function()
{
    $panel.fadeIn(startGame);
    return this;
};
this.hide = function()
{
    $panel.hide();
    return this;
};

The show() public method fades the game panel in. We pass in a reference to the startGame() method, which we will write in the next section, to be called when the fade in has completed.