Game Project: Progressive Break-it - Beginning HTML5 Games with CreateJS - page 58

Creating the Walls
These first sets of graphics drawn to the board are the walls that make up the bounds of the game (see Listing 4-6). You
want a wall drawn on the left, top, and right sides of the stage for the puck to bounce off of. The bottom is left alone so
the puck can pass through if the player fails to hit it with the paddle.
Listing 4-6. The buildWalls Function Creates the Bounds of Your Game
function buildWalls() {
var wall = new createjs.Shape();
wall.graphics.beginFill('#333');
wall.graphics.drawRect(0, 0, WALL_THICKNESS, canvas.height);
stage.addChild(wall);
wall = new createjs.Shape();
wall.graphics.beginFill('#333');
wall.graphics.drawRect(0, 0, WALL_THICKNESS, canvas.height);
wall.x = canvas.width - WALL_THICKNESS;
stage.addChild(wall);
wall = new createjs.Shape();
wall.graphics.beginFill('#333');
wall.graphics.drawRect(0, 0, canvas.width, WALL_THICKNESS);
stage.addChild(wall);
leftWall = WALL_THICKNESS;
rightWall = canvas.width - WALL_THICKNESS;
ceiling = WALL_THICKNESS;
}
A reusable wall variable is first created to build all of the shapes for the walls. The WALL_THICKNESS constant is
used, along with the stage size to build the shapes and position them around the screen. The game variables leftWall
and rightWall , which were previously declared for the bounds, are then given their values using some of the same
values that were used to build the walls. Since the edges of the stage are not the actual walls of the playing field, you
can't simply reference the size of the stage to determine the bounds of the stage like in previous examples. These
properties also prevent you from having to continuously calculate these areas on every game tick.
Creating the Message Board
An area for text will be needed to display various game messaging. This message board will be placed on the bottom
of the screen, right under the floor where the paddle will rest. The buildMessageBoard sets this up and is shown in
Listing 4-7.
Listing 4-7. The buildMessageBoard Function Sets Up all Game Messaging
function buildMessageBoard() {
board = new createjs.Shape();
board.graphics.beginFill('#333');
board.graphics.drawRect(0, 0, canvas.width, SCORE_BOARD_HEIGHT);
board.y = canvas.height - SCORE_BOARD_HEIGHT;