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

Listing 5-28. Resetting Cards when They Don't Match and Evaluating the Game when They Do
function resetFlippedCards() {
cardsFlipped[0].mouseEnabled = cardsFlipped[1].mouseEnabled = true;
cardsFlipped[0].getChildByName('back').visible = true;
cardsFlipped[1].getChildByName('back').visible = true;
cardsFlipped = [];
}
function evalGame() {
if (matches === faces.length) {
setTimeout(function () {
alert('YOU WIN!')
}, 300)
}
else {
cardsFlipped = [];
}
}
When the two cards flipped are not the same, the resetFlippedCards function is called to put them back
in play. These cards were stored in the cardsFlipped array and are referenced here to reset each card. First, the
mouseEnabled properties are set back to true so they can be chosen again. The back bitmaps are hidden, and finally
the cardsFlipped array is emptied. At this point, the game is back in play.
When a match is made, you need to evaluate the game to see if all matches were made. The length of the faces
array is the number of matches you need, and if it is reached, an alert message is displayed. If the game should carry
on, simply leave the flipped cards alone and empty the cardsFlipped array, which will resume the game.
Finally, the typical startGame function is called to set up the Ticker to update the stage (see Listing 5-29).
Listing 5-29. The Ticker and Stage Update Function
function startGame() {
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", function(e){
stage.update();
});
}
The Complete Veggie Match Code
The complete code for Veggie Match is shown in Listing 5-30.
Listing 5-30. The Complete Code for memory.js
var stage, queue;
var faces = ['garlic', 'onion', 'pepper', 'potato', 'spinach', 'tomato'];
var cards = [];
var cardsFlipped = [];
var matches = 0;