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

You also have to display an extra pair at top left on the screen, but you deal with that in the next
section. Finally, in all other cases, the penguin stops moving:
else
this.stopMoving();
Maintaining the Number of Pairs
In order to maintain the number of pairs and draw it nicely on the screen, you add another class
called PairList to the game. The PairList class inherits from the SpriteGameObject class. It consists
of a frame, on top of which is drawn a number of sprites indicating the number of required pairs.
Because you want to indicate the color of the pair that was made, you store these pairs in an array
as integer values. This array is a member variable of the PairList class:
this._pairs = [];
You put integer values in this array because you can define per pair which color it is and how many
pairs you need in total. In the member variable pairSprite , you store the sprite representing a pair
and set the pair list as the parent of that sprite:
this._pairSprite = new SpriteGameObject(sprites.penguin_pairs);
this._pairSprite.parent = this;
The image for that sprite is a sprite strip, and the colored pairs are ordered in the same way as the
penguins (see Figure 22-4 ). The rightmost image in the strip (sheet index 7) is the image you display
if a pair still needs to be made. So if the _pairs array contains the values {0, 0, 2, 7, 7} , that
means the player has already made two pairs of blue penguins and one pair of green penguins, and
the player needs to make two more pairs to finish the level.
Figure 22-4. Sprite containing all the possible pair images
You pass along a parameter, nrPairs , to the constructor of the PairList class so you know how large
the array should be. You then fill the array so that each element is set to the empty slot (sheet index 7):
for (var i = 0; i < nrPairs; i++)
this._pairs.push(7);