Game Development Reference
In-Depth Information
When the player rolls the dice, they are allowed to hold dice before making another roll. To hold this value, you
assign the sprite the custom property, hold , and default it to false. This will be used to determine if you should spin
the die when making a roll. This property will be toggled using the function holdDie when the player clicks the die.
This function will be written in the “Holding Dice” section later in this chapter.
the on method is used in this project as a shortcut to addEventListener . this method is jam-packed with
useful parameters, including scope control. Since you are still working in the global space, only the event type and
listener are needed when using this method. however, its power will be reviewed in-depth in the upcoming chapters and
used almost exclusively when adding event listeners.
Note
Finally, the xPos value is increased and the die is added to the tray container. There's one more thing needed for
the dice tray, the Roll button, which triggers the roll of the dice (see Listing 7-12).
Listing 7-12. The buildDiceTray Function Continued: Creating the Roll Button That Will Roll the Dice
...
//roll button
rollBtn = new createjs.Container();
rollBtn.name = 'rollBtn';
//rollBtn.visible = false;
rollBtn.x = xPos;
rollBtn.y = yPos;
rollBG = new createjs.Sprite(spritesheet, 'rollButton');
rollBtn.addChild(rollBG);
//roll text
rollsTxt = new createjs.Text(rollsLeft, '27px Calibri', '#FFF');
rollsTxt.name = 'rollsTxt';
rollsTxt.textAlign = 'center';
rollsTxt.textBaseline = 'middle';
rollsTxt.x = rollBtn.getBounds().width / 2;
rollsTxt.y = rollBtn.getBounds().height / 2;
//add roll button
rollBtn.regX = rollBtn.getBounds().width / 2;
rollBtn.regY = rollBtn.getBounds().height / 2;
rollBtn.addChild(rollsTxt);
rollBtn.on('click', rollDice);
diceTray.addChild(rollBtn);
stage.addChild(diceTray);
}
The Roll button is a container, and it is set to the game variable rollBtn . It's named and positioned using the
values from the previous loop so it falls in line with the five dice.
This container will hold two display objects: a graphic for its background, and a text object to display the number
of rolls left in the player's current turn. The background is a sprite and it is added to the container. Next, a text object is
created to display the current value of rollsLeft , which was initially declared as 3. The text is given a name and some
styles, and is then positioned using the bounds of the background sprite. The rollButton container's registration
points are set to the center before adding the text object as its second child.
An event listener is set to the Roll button and assigned the handler rollDice , which will be covered in the
“Rolling the Dice” section. Finally, the button is added to the diceTray container. Figure 7-6 shows the complete dice
tray added to the game.
 
 
Search WWH ::




Custom Search