Game State Management - Building JavaScript Games for Phones, Tablets, and Desktop - page 260

The help and option menu states are set up in a fashion similar to TitleMenuState . In the class
constructor, you add your game objects to the game world, and you override the handleInput
method to switch between states. For example, both the help and option menu states contain a
Back button that returns you to the title screen:
if (this.backButton.pressed)
GameStateManager.switchTo(ID.game_state_title);
Have a look at the HelpState and OptionsMenuState classes in the PenguinPairs3 example to get an
idea of how the different states are set up and how you switch between states.
The Level Menu State
A slightly more complicated game state is the level menu. You want the player to be able to select a
level from a grid of level buttons. You want to be able to display three different states with these level
buttons, because a level can be locked, unlocked but not yet solved by the player, or solved. In order
for this to work, you require some sort of persistent storage across game plays, as discussed in the
next chapter. For each of the different states of a level button, you use a different sprite. Because
you can't yet play the game in its current version, you simply show the “locked” status for each level.
Before you can create the LevelMenuState class, you add a class called LevelButton that inherits
from GameObjectList . In the LevelButton class, you keep track of two things: whether the button is
pressed, and the level index the button refers to:
function LevelButton(levelIndex, layer, id) {
GameObjectList.call(this, layer, id);
this.pressed = false;
this.levelIndex = levelIndex;
// to do: create the button sprites
}
Because the button has three different states, you load three sprites, one for each state. If a player
has finished a level, the button should show a colored penguin. Because there are a couple of
differently colored penguins, you select a colored button by varying the sheet index depending on
the level index:
this._levelSolved = new SpriteGameObject(sprites.level_solved,
ID.layer_overlays);
this._levelUnsolved = new SpriteGameObject(sprites.level_unsolved,
ID.layer_overlays);
this._levelLocked = new SpriteGameObject(sprites.level_locked,
ID.layer_overlays_2);
this.add(this._levelSolved);
this.add(this._levelUnsolved);
this.add(this._levelLocked);
this._levelSolved.sheetIndex = levelIndex;