Pairing the Penguins - Building JavaScript Games for Phones, Tablets, and Desktop - page 282

Chapter 22
Pairing the Penguins
In this chapter, you program the main gameplay for the Penguin Pairs game. You learn how to move
penguins around on the board and what to do when a penguin collides with another game object
such as a shark or another penguin.
Selecting Penguins
Before you can move penguins around, you need to be able to select a penguin. When you click an
animal such as a penguin or a seal, four arrows should appear that allow you to control the direction
in which the animal should move. To display these arrows and handle the input, you'll can add a
class called AnimalSelector . Because the animal selector contains four arrows, it inherits from the
GameObjectList class. You also want to add a nice visual effect so that when the player moves the
mouse over one of the arrows, it becomes darker. You can achieve this effect by adding a class Arrow
that contains two sprites: one for the regular arrow and one for the arrow image when you hover over it.
The Arrow class should also be able to show an arrow in any of the four possible directions.
The Arrow Class
You could have a single arrow image and rotate it depending on the desired direction, but this
example keeps things simple by using an image that contains the arrow pointing in all four directions
(see Figure 22-1 ). Therefore, when you load the sprite, the sheet index indicates which arrow to
show. For the hover status, you load another sprite containing the same arrow images, in the same
order, but darker.
Figure 22-1. The sprite containing the four arrows, each pointing in a different direction
293