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

var yPos = 90;
for (i = 0; i < answer.length; i++) {
char = answer[i];
if (char != ' ' && char != '&') {
lettersNeeded++;
box = new createjs.Shape();
box.graphics.beginStroke("#000");
box.graphics.drawRect(0, 0, 20, 24);
box.regX = 10;
box.regY = 12;
box.x = xPos;
box.y = yPos;
box.name = 'box_' + i;
box.key = char;
stage.addChild(box);
}
xPos += 26;
if (char == '&') {
yPos += 40;
xPos = 20;
}
}
}
function drawLetters() {
var i, char, txt, btn;
var cnt = 0;
var xPos = 20;
var yPos = 200;
for (i = 0; i < abc.length; i++) {
char = abc[i];
btn = new createjs.Shape();
btn.graphics.beginFill("#000");
btn.graphics.beginStroke("#000");
btn.graphics.drawRect(0, 0, 20, 24);
btn.regX = 10;
btn.regY = 12;
btn.x = xPos;
btn.y = yPos;
stage.addChild(btn);
//create text
txt = new createjs.Text(char);
txt.color = "#FFF";
txt.textAlign = 'center';
txt.textBaseline = 'middle';
txt.x = xPos;
txt.y = yPos;
stage.addChild(txt);
btn.txt = txt;
btn.addEventListener('click', onLetterClick);
//adjust positions