Time for action – creating the controller

At this point there's not much left in our main application object, PianoHeroApp. We moved all of the code to load the audio to the SplashPanel object, and all of the code to make the keyboard work to the GamePanel object.

The PianoHeroApp object will now only act as a state controller to hide and show the correct panels. First we need to add some variables to hold references to the panels:

function PianoHeroApp()
{
    var version = "7.1",
        audioManager = new AudioManager("audio"),
        splashPanel = new SplashPanel(audioManager),
        gamePanel = new GamePanel(audioManager),
        curPanel = undefined;

We define variables to hold the audio manager, the splash panel, and the game panel objects. We also have a curPanel variable, which will be set to the current panel that is showing. To start with we will set it to undefined.

Next, we will create a private showPanel() method that will hide the currently...