Finishing the Penguin Pairs Game - Building JavaScript Games for Phones, Tablets, and Desktop - page 300

Figure 23-1. An overview of the module and folder structure of the powerupjs module
Finishing the User Interface
In this section, you finish the user interface. First you see how to add a hint mechanism to the game.
Then you see how to reset and move on to the next level. You complete the game by adding
sound effects.
Showing Hints
Now that you've reorganized your code, there are a couple more features to add to the Penguin
Pairs game. As a first step, you want to be able to show a hint when the user clicks a button. The
hint consists of an orange arrow that is visible for a second. When you load the level, you read
the hint position and direction from the levelData variable and create a SpriteGameObject instance
to load the arrow, select the correct sheet index, and position it appropriately before you add it to
the game world:
var hint = new powerupjs.SpriteGameObject(sprites.arrow_hint, ID.layer_objects_2);
hint.sheetIndex = levelData.hint_arrow_direction;
hint.position = new powerupjs.Vector2(levelData.hint_arrow_x * 73,
levelData.hint_arrow_y * 72);
playingField.add(hint);