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

In the Button class, you use these methods to determine whether the button is down and/or
pressed. Here is the handleInput method of Button :
Button.prototype.handleInput = function (delta) {
var boundingBox = this.boundingBox;
this.pressed = this.visible && (Touch.containsTouchPress(boundingBox) ||
Mouse.containsMousePress(boundingBox));
this.down = this.visible && (Touch.containsTouch(boundingBox) ||
Mouse.containsMouseDown(boundingBox));
};
Now that you have a button class, you can add a help button to the game world
(see the JewelJamGameWorld class):
this.helpButton = new Button(sprites.button_help, ID.layer_overlays);
this.helpButton.position = new Vector2(1268, 20);
this.add(this.helpButton);
Because you want to display a help frame when the player presses the help button, you also add a
help frame to the game world. You set its visibility flag to false so it isn't yet visible:
var helpFrame = new SpriteGameObject(sprites.frame_help, ID.layer_overlays,
ID.help_frame);
helpFrame.position = new Vector2(636, 120);
helpFrame.visible = false;
this.add(helpFrame);
Now you have to make sure that when the player presses the help button, the help frame visibility
is toggled. You can do this using the following if instruction in the handleInput method of the
JewelJamGameWorld class:
var helpFrame = this.root.find(ID.help_frame);
if (this.helpButton.pressed) {
helpFrame.visible = !helpFrame.visible;
}
Notice that the instruction in the if body is a toggle. It's basically a shorter way of writing.
if (helpFrame.visible)
helpFrame.visible = false;
else
helpFrame.visible = true;
When the help frame is visible, you want to be able to remove it by pressing the left mouse button or
by touching the screen. So, the final if instruction is slightly more complicated:
var helpFrame = this.root.find(ID.help_frame);
if (this.helpButton.pressed ||
(helpFrame.visible && (Mouse.left.pressed || Touch.isPressing))) {
helpFrame.visible = !helpFrame.visible;
}