Using and Managing Bitmap Images - Beginning HTML5 Games with CreateJS - page 98

card2 = card.clone(true);
card.key = card2.key = faces[i];
cards.push(card, card2);
card.shadow = card2.shadow = new createjs.Shadow("#333", 3, 3, 5);
}
}
This card-creating function consists of a single loop, which will build each container. The container is
immediately created, which will hold all assets that make up the card. The base of each container will be the shell
graphic. The registration point is set to be centered by using the width and height of the shell image, which is then
added to the container.
Next, the food graphic is determined by using the loop count and the faces array. This bitmap is then horizontally
centered, given a y value of 70, and then added to the container. The cards will also contain a text object to display the
name of the food. This text value is also determined by the faces array and is assigned to a new text object, which is
positioned and finally added to the card container. Figure 5-14 shows an example of a complete card container.
Figure 5-14. A card container using text and bitmap objects
The top-most graphic in each card is the back graphic, which will be shown or hidden to indicate the current
state of the card. This bitmap will start out visible, and will be turned invisible to reveal the cards properties when it's
selected during gameplay.
Two cards of each food item are needed, so this is a perfect opportunity to utilize the clone method on the card
container. Be sure to pass true into the constructor so it is recursively cloned, which will duplicate all children in the
container. A key value is assigned to each card, which will be used to determine if the selected cards are matching.
You can simply use the unique face value for this property. Finally, a drop shadow is assigned to the card.
Shuffling the Cards
Before adding the cards to the stage, the cards need to be shuffled. The shuffleCards function will do this next
(see Listing 5-26).