Game States - Building JavaScript Games for Phones, Tablets, and Desktop - page 219

a few instructions to the handleInput method to distinguish between two states: the state in which
you show the title screen and the state in which you're playing the game:
var titleScreen = this.root.find(ID.title);
if (titleScreen.visible) {
if (Mouse.left.pressed || Touch.isPressing)
titleScreen.visible = false;
return;
}
GameObjectList.prototype.handleInput.call(this, delta);
Looking at the if instructions, you can see that if the title screen is visible, you react only when the player
presses the left mouse button or touches the screen. In that case, you set the title screen's visibility flag
to false so it isn't drawn anymore. After this, you return from the method, so whenever the title screen is
visible, the only thing the game reacts to is player pressing the left mouse button or touching the screen.
If the title screen isn't visible, you call the handleInput method on all the game objects in the game world:
in other words, the game reacts to the player as it should when the player is playing the game.
You follow very much the same procedure for the update method, where you update the game world
only if the title isn't visible:
var titleScreen = this.root.find(ID.title);
if (titleScreen.visible)
return;
GameObjectList.prototype.update.call(this, delta);
When a player starts the game, they now see a title screen before the game starts (see Figure 16-1 ).
You aren't done yet. In the next section, you add a simple button GUI element that shows a help frame.
Figure 16-1. The Jewel Jam title screen