Game Project: Fakezee - Beginning HTML5 Games with CreateJS - page 153

Figure 7-11. The dice animating in sequentially with a bounce effect
Revealing the Scorecard
The scorecard is revealed in a similar fashion as the dice tray. The scorecard container holds several animated sprites
that will play their frames to reveal themselves, each starting their animation with a slight offset from the proceeding
one. In this case, an interval is set to play each sprite (see Listing 7-19).
Listing 7-19. The scoreCard Function Plays all Category Button Sprites
function revealScoreCard() {
var btn, timer;
var len = scorecardButtons.length;
var i = 0;
timer = setInterval(function () {
btn = scoreCard.getChildAt(i);
btn.play();
i++;
if (i === len) {
clearInterval(timer);
btn = scoreCard.getChildByName('fakezee');
btn.y -= 10;
createjs.Tween.get(btn).to({alpha:1, y:btn.y + 10}, 500);
}
}, 100);
}
During each interval, the appropriate sprite animation is played by using getChildAt and the incremented
variable i . These buttons were the first things to be added to the container, so this method will work fine. The interval
should stop when the interval counter i has reached the length of the scorecardButtons array. The interval is then
cleared, and a simple fade-in-and-slide-down effect is applied to the large Fakezee button in the middle.
Revealing the Scoreboard
The scoreboard is simply revealed by fading up. The scorecard's total score sprite and its corresponding text object are
handled in this function as well (see Listing 7-20).
Listing 7-20. All Scores' Messages Are Revealed with the revealScoreBoard Function
function revealScoreboard() {
var totalScoreMsg = scoreCard.getChildByName('scoreMsg');
var totalScoreTxt = scoreCard.getChildByName('scoreTxt');
createjs.Tween.get(totalScoreTxt).to({alpha:1}, 500);