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

The Animal Selector
The animal selector uses the Arrow class to display four arrows when the player clicks an animal
(see Figure 22-2 ). These four arrows are stored as member variables in the AnimalSelector class.
Because the selector controls a particular animal, you also have to keep track of which one it
controls. Therefore, you also add a member variable selectedAnimal , which contains a reference to
the target animal. In the constructor method, you create the four Arrow objects and position them
appropriately as follows:
function AnimalSelector(layer, id) {
GameObjectList.call(this, layer, id);
this._arrowright = new Arrow(0);
this._arrowright.position = new Vector2(this._arrowright.width, 0);
this.add(this._arrowright);
this._arrowup = new Arrow(1);
this._arrowup.position = new Vector2(0, -this._arrowright.height);
this.add(this._arrowup);
this._arrowleft = new Arrow(2);
this._arrowleft.position = new Vector2(-this._arrowright.width, 0);
this.add(this._arrowleft);
this._arrowdown = new Arrow(3);
this._arrowdown.position = new Vector2(0, this._arrowright.height);
this.add(this._arrowdown);
this.selectedAnimal = null;
this.visible = false;
}
Figure 22-2. When the player clicks a penguin, four arrows are shown so the player can choose the direction in which the
penguin should move