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 .
 
Search WWH ::




Custom Search