Capturing User Input - Beginning HTML5 Games with CreateJS - page 48

xPos += 24;
cnt++;
if (cnt == 13) {
yPos += 30;
xPos = 20;
}
}
}
function drawMessages() {
var txt = new createjs.Text("WORD GAME", "26px Arial");
txt.color = "#99000";
txt.x = txt.y = 10;
stage.addChild(txt);
livesTxt = new createjs.Text("LIVES: " + lives, "16px Arial");
livesTxt.textAlign = 'right';
livesTxt.y = 16;
livesTxt.x = stage.canvas.width - 10;
stage.addChild(livesTxt);
}
The drawBoard function is used to build the empty letter slots by using the answer variable. A loop runs through
each letter in the answer and builds simple box shapes in the process. Some positioning is determined in each iteration,
and you use the ampersand character to know when to start a new line for the slots. A letter value stores what letter it
represents, and a name is given to each slot so you can easily reference it when checking for matches later.
Next, the drawLetters function is used to build the letter buttons for guessing letters in the puzzle. It draws and
positions boxes similar to your previous function, while also creating text labels as you loop through the abc variable.
The abc variable is a string that simply has every letter in the alphabet. Since you are assigning the click events to each
button, a reference to these corresponding text objects are assigned to them. You do this so you can use them later in
the handler function to evaluate the puzzle.
Finally, drawMessages adds simple text objects to the stage. One displays the title of the game, and another
displays the number of lives the player has during gameplay.
Figure 3-8 shows the results on the stage after you call the drawing functions.