Game Development Reference
In-Depth Information
for (i = 0; i < 20; i++) {
brick = new createjs.Shape();
brick.graphics.beginFill(i == freeLife ? '#009900' : data.color);
brick.graphics.drawRect(0, 0, 76, 20);
brick.graphics.endFill();
brick.width = 76;
brick.height = 20;
brick.x = xPos;
brick.y = yPos;
brick.points = data.points;
brick.freeLife = false;
bricks.push(brick);
stage.addChild(brick);
if (i == freeLife) {
freeLifeTxt = new createjs.Text('1UP', '12px Times', '#fff');
freeLifeTxt.x = brick.x + (brick.width / 2);
freeLifeTxt.y = brick.y + 4;
freeLifeTxt.width = brick.width;
freeLifeTxt.textAlign = 'center';
brick.freeLife = freeLifeTxt;
stage.addChild(freeLifeTxt);
}
xPos += 76;
if (xPos > (brick.width * 10)) {
xPos = WALL_THICKNESS
yPos += brick.height;
}
}
level++;
if (level == levels.length) {
level--;
}
}
A few reusable variables are first declared for the loop and display objects. Next, level data is accessed by using
the
level
value, which grabs the appropriate level object from the
levels
array. This data is used to assign each brick
the appropriate properties.
The bricks will be laid out in a loop by incrementing the function's
xPos
and
yPos
values, which are set to lay the first
brick snug in the upper left corner of the left wall and ceiling. As you build these blocks, a random one is chosen to act as
a free player bonus. Each level consists of 20 bricks, so a random number between 0 and 19 is assigned to
freeLife
.
The advancement of levels is determined by the amount of times the paddle hits the puck, which is declared from
the game constant
PADDLE_HITS_FOR_NEW_LEVEL
.
The number of paddle hits is reset to zero when building this new
level. Before the upcoming brick-building loop, you call on the
shiftBricksDown
function so that that all previous
rows of bricks shift down to make room for the new level. Let's finish the new level by examining the loop.
The loop builds 20 bricks, in two rows of 10, to make up the new level. A basic shape is created and colored by
referencing the level data object. When coloring the brick, you first determine if the current iteration value matches the
randomly generated number for the bonus brick. If a match was found, the brick is colored green so it stands out as special.
Next, the bricks are positioned using the position values that are evaluated and incremented with each iteration.
Before ultimately adding them to the stage, a set of properties is given to each brick. Remember that a display object
does not inherently contain a width and height property, but they can be added dynamically by using the values that
were used to draw them. These properties will be crucial when writing the collision tests. The number of points that
will be given when busted is set as
points
, and the status of
freeLife
is declared and defaulted to
false
.