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

Its section value does a few things. In traditional Yahtzee, the categories are split up into two sections, upper
score and lower score. The upper section (in this case, section one ) consists of the categories, ones through sixes .
The rest falls into section two. This section property tells you which section to append the given score to. It's also
used for positioning, since the score buttons will be displayed in two columns, one on each side of the stage.
The buttons are positioned using the typical, incremented xPos and yPos values. Their frame rate is also explicitly
set to control the speed in which their revealing animations are played.
A few event listeners are set next. By default, the animation will loop forever, but it needs to stop on its last frame.
You can prevent an animation from looping by using the animation object's next property in the sprite sheet data.
This property can be set using Zoe when building your sprite sheets. However, sometimes it's easier to simply listen
for it to end and force it to stop in code, like so:
btn.on('animationend', function (e) {
this.stop();
});
The next listener is for the click , and will fire the onScoreCardBtnClick handler function, which will be covered in
the section “Scoring on Categories.” Finally, each button is added to the container. Some positioning calculations are
then executed, which also determines if a new row should be started.
Along with some messaging, there is one more button to be added, the Fakezee score button (See Listing 7-15).
Listing 7-15. The buildScoreCard Function Continued: the Fakezee Category Button and Score Messaging
...
// fakezee button
btn = new createjs.Sprite(spritesheet, 'fakezee');
btn.paused = true;
btn.name = btn.key = 'fakezee';
btn.section = 2;
btn.regX = btn.getBounds().width / 2;
btn.regY = btn.getBounds().height / 2;
btn.x = scoreCard.getBounds().width / 2;
btn.y = 75;
// btn.alpha = 0;
btn.on('click', onScoreCardBtnClick);
scoreCard.addChild(btn);
//score message
scoreMsg = new createjs.Sprite(spritesheet, 'totalScoreLabel');
scoreMsg.name = 'scoreMsg';
scoreMsg.regX = scoreMsg.getBounds().width / 2;
scoreMsg.x = scoreCard.getBounds().width / 2;
scoreMsg.y = scoreMsgYPos;
// scoreMsg.alpha = 0;
scoreCard.addChild(scoreMsg);
// score
scoreTxt = new createjs.Text('0', '50px Calibri', '#FFF');
scoreTxt.name = 'scoreTxt';
scoreTxt.textAlign = 'center';
scoreTxt.x = scoreCard.getBounds().width / 2;
scoreTxt.y = scoreMsg.y + 30;
// scoreTxt.alpha = 0;
scoreCard.addChild(scoreTxt);
stage.addChild(scoreCard);
}