Declaring the Game Constants and Variables

Several constants and variables will be used throughout the game. As usual, these are declared at the the top of the script. Start by listing the game constants (see Listing 4-1). I prefer to lay these out first, as they are often the most tweaked during programming to adjust the look and feel of the game.

Listing 4-1. Game Constants

const WALL_THICKNESS = 20;
const PADDLE_WIDTH = 100;
const PADDLE_SPEED = 16;
const PUCK_SPEED = 5;
const PADDLE_HITS_FOR_NEW_LEVEL = 5;
const SCORE_BOARD_HEIGHT = 50;
const ARROW_KEY_LEFT = 37;
const ARROW_KEY_RIGHT = 39;
const SPACE_KEY = 32;

These constants represent the values that won’t change during gameplay, and they play a crucial part in building the game. As you get further into the game code, it becomes a lot easier to adjust these values at the top of your script, as opposed to chasing down hard-coded values in your game functions. Since this particular game doesn’t progressively adjust speed, you can add these values to the list of constants. Also included are some values that will be needed to draw the game assets; they will factor into calculating the graphics positions during gameplay. The final three are meant to help with the keyboard keyCodes (you saw this in a few examples in Chapter 3). Listing 4-2 lists the game variables.

Listing 4-2. Game Variables

var canvas, stage, paddle, puck, board, scoreTxt, livesTxt, messageTxt, messageInterval;
var leftWall, rightWall, ceiling, floor;
 
var leftKeyDown = false;
var rightKeyDown = false;
 
var bricks = [];
var paddleHits = 0;
var combo = 0;
var lives = 5;
var score = 0;
var level = 0;
 
var gameRunning = true;

The first set of variables is created for the stage and most of the visuals in the game, including messaging. Some variables are also set up that will be used to reference the bounds of the screen. The next two, leftKeyDown and rightKeyDown, are used to help with the game controls.

Next is a series of variables that are declared with initial values. These are grouped for easy reference for all values that should be reset when restarting the game.

The bricks array will start empty and eventually be used to reference all bricks created in the game. You’ll add and remove bricks to this array during gameplay. The paddleHits variable will increase in value on each hit of the paddle, and is used to determine when a new level should be added to the board. The combo value similarly gets increased during play and represents the number of bricks busted in a row before hitting the paddle. This gives the player combo bonuses. The number of remaining lives, the score, and current level are also declared with initial values.

The gameRunning variable is used for some very simple state logic. This game has a pause feature that can be triggered via the spacebar. This key is also used to replay the game after losing, so this simple Boolean value can be used to determine what state the game is in when the user hits the spacebar. When gameRunning is true, it should toggle the pause feature. When it’s false, it will simply call a function to restart the game.

Finally, the data is created to be used when creating the levels (see Listing 4-3). Each index in the levels array holds an object that determines the color of bricks and the points each one is worth when busted.

Listing 4-3. Creating the Level Data

var levels = [
   {color:'#705000', points:1},
   {color:'#743fab', points:2},
   {color:'#4f5e04', points:3},
   {color:'#1b5b97', points:4},
   {color:'#c6c43b', points:5},
   {color:'#1a6d68', points:6},
   {color:'#aa7223', points:7},
   {color:'#743fab', points:8},
   {color:'#4f5e04', points:9},
   {color:'#1b5b97', points:10},
   {color:'#c6c43b', points:11},
   {color:'#1a6d68', points:12}
];

With the game variables declared, it’s time to move on to initializing the game.

Initializing the Game

Initializing the game is usually called within some sort of init function and is often called when the document and/or game assets are completely finished loading. You’ve seen this done already in previous examples. All graphics will be created with code in this game project so you don’t need to load in any graphics or sounds. Because of this, the onload event will be used within the body of the document to call the init function. Listing 4-4 shows this function.

Listing 4-4. The init Function Is Called when the Document Has Loaded

function init() {
   canvas = document.getElementById('canvas'),
   stage = new createjs.Stage(canvas);
   newGame();
   startGame();
}

A reference to the canvas is stored and the stage object is created. This is followed by a few methods, the first being newGame, which is used to call its own series of functions used to set up the game. The final function, startGame, will kick off the game loop, which will trigger all animation and gameplay into action. Both of these functions are shown in Listing 4-5.

Listing 4-5. The newGame and startGame Functions

function newGame() {
   buildWalls();
   buildMessageBoard();
   buildPaddle();
   buildPuck();
   setControls();
   newLevel();
   newLevel();
}
function startGame() {
   createjs.Ticker.setFPS(60);
   createjs.Ticker.addEventListener("tick", function (e) {
      if (!e.paused) {
         stage.update();
      }
   });
}

You’ll be taking a close look at each function fired from the newGame function shortly, but first let’s get a broad overview of what is accomplished when they are executed. The first four functions draw the essential game elements in the game. The controls are then set up, and finally a few levels are added to the board.

After the new game is initialized, it’s started by setting up Ticker to update the stage at a frame rate of 60 frames per second. You’ll be adding much more to this game loop after the setup of the game, so you’ll be revisiting this function later. I prefer to keep this function at the bottom of my script, closer to the run game functions we will build later, but feel free to leave it where it is for now.

Let’s break down these initializing functions now. The first four are used for building and drawing the game elements.

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;
   stage.addChild(board);
   livesTxt = new createjs.Text('lives: ' + lives, '20px Times', '#fff'),
   livesTxt.y = board.y + 10;
   livesTxt.x = WALL_THICKNESS;
   stage.addChild(livesTxt);
   scoreTxt = new createjs.Text('score: ' + score, '20px Times', '#fff'),
   scoreTxt.textAlign = "right";
   scoreTxt.y = board.y + 10;
   scoreTxt.x = canvas.width - WALL_THICKNESS;
   stage.addChild(scoreTxt);
   messageTxt = new createjs.Text('press spacebar to pause', '18px Times',
      '#fff'),
   messageTxt.textAlign = 'center';
   messageTxt.y = board.y + 10;
   messageTxt.x = canvas.width / 2;
   stage.addChild(messageTxt);
}

Similarly to the walls, the message board is drawn at the very bottom edge of the stage. The text objects are then drawn above this shape and positioned at the edges and center of the board. The score and lives text values will be updated during the game loop, but are initially set to help with positioning and styling. Figure 4-2 demonstrates the walls and game message board.

Creating the Paddle and Puck

Directly above the message board will be the floor for the paddle and represent the bottom bounds of the board where the puck can pass through. Let’s draw those game elements next (see Listing 4-8).

Listing 4-8. Drawing and Adding the Paddle and Puck

function buildPaddle() {
   paddle = new createjs.Shape();
   paddle.width = PADDLE_WIDTH;
   paddle.height = 20;
   paddle.graphics.beginFill('#3e6dc0').drawRect(0, 0, paddle.width, paddle.height);
   paddle.nextX = 0;
   paddle.x = 20;
   paddle.y = canvas.height - paddle.height - SCORE_BOARD_HEIGHT;
   stage.addChild(paddle);
}
function buildPuck() {
   puck = new createjs.Shape();
   puck.graphics.beginFill('#FFFFFF').drawRect(0, 0, 10, 10);
   puck.width = 10;
   puck.height = 10;
   puck.x = canvas.width - 100;
   puck.y = 160;
   puck.velX = PUCK_SPEED;
   puck.velY = PUCK_SPEED;
   puck.isAlive = true;
   stage.addChildAt(puck, 0);
}

The game paddle is drawn and positioned appropriately by using the board’s height and y position, as well as its own height. The puck is then drawn in the following function and positioned near the center of the stage. You then assign it some properties to determine its velocity, and if it is currently in play. Its velocity determines how fast it should travel and in what direction it should move. By assigning both velX and velY to positive values, it will begin to travel right and down by an increase of the PUCK_SPEED value on every game tick. Lastly, the addChildAt method is used to add it to the bottom layer of the stage. This is to ensure that the puck will travel under the scoreboard when it flies out of bounds beneath the floor.

Adding Levels

One more function remains in the initialization process. The newLevel function (see Listing 4-10) creates two new rows of bricks, which make up a level. The game begins with two sets of bricks, so this function is initially called twice and essentially starts the player on level 2.

Listing 4-10. Adding a New Level of Bricks to the Game

function newLevel() {
   var i, brick, freeLifeTxt;
   var data = levels[level];
   var xPos = WALL_THICKNESS;
   var yPos = WALL_THICKNESS;
   var freeLife = Math.round(Math.random() * 20);
   paddleHits = 0;
   shiftBricksDown();
   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.

A few more things are needed to complete the function. Earlier, a random number was set to determine if the current iteration should draw a bonus brick. Along with coloring the brick green, a simple text object will be added to help indicate what the prize will be when busting it. A white text object with the value of ‘1UP’ is centered above the brick. A reference to this text object is assigned to the brick so it can be properly disposed of when the brick is hit. The text object is then added to the stage.

The last piece of code in this loop is a simple conditional to check if a new row should start in the two-row level. And finally, to end the function, the level is increased. There are only so many levels in the levels array, so you continue to use the last data object for the remainder of the game by decreasing the level by one. Figure 4-4 shows the first two levels of bricks added to the game.

Shifting the Bricks

Shifting all existing bricks makes room for the next level. This is done before adding the new level, and is shown in Listing 4-11.

Listing 4-11. The shiftBricksDown Function Moves all Bricks Down when Adding a New Level

function shiftBricksDown() {
   var i, brick;
   var shiftHeight = 80;
   var len = bricks.length;
   for (i = 0; i < len; i++) {
      brick = bricks[i];
      brick.y += shiftHeight;
      if (brick.freeLife) {
         brick.freeLife.y += shiftHeight;
      }
   }
}

Immediately before creating the new rows of bricks, the function shiftBricksDown is called to clear the way for the new level. In this function, you loop through all of the current bricks, which are stored in the bricks array. Each brick is shifted down 80 pixels, along with any free life text object that it may be tied to. Figure 4-5 shows a new row of bricks added to the game after reaching a new level.

With the initialization process complete, and the game graphics drawn to the stage, it’s time to start setting the game in motion. Let’s take a look at setting up the game loop.

Setting Up the Game Loop

Understanding the process of a game loop is an important concept for any game developer. A game with constant motion has a constant heartbeat, and its speed is determined by its frame rate. I briefly touched on this process in Chapter 2; it’s now time to see this cycle in full action.

To set up the game loop, return to the startGame function. If you haven’t already, move this function to the end of the script where you will set up the game loop. Add the function called runGame just before the stage is updated. Listing 4-12 shows this update and the runGame function.

Listing 4-12. Revisiting the startGame Function and Running the Game

function startGame() {
   createjs.Ticker.setFPS(60);
   createjs.Ticker.addEventListener("tick", function (e) {
      if (!e.paused) {
         runGame();
         stage.update();
      }
   });
}
function runGame() {
   update();
   render();
   evalPuck();
   evalGame();
}

As you can see, the runGame function is called on every tick of the game. This function executes the update/render cycle. It also runs a few functions that determine end level and/or end game scenarios.

Updating Game Elements in the Game Loop

The update cycle will evaluate the next position of the puck and paddle, and how they will affect the game in regards of collisions and bounds. Let’s take a quick look at update before analyzing each of the functions it calls (see Listing 4-13).

Listing 4-13. The Update Cycle

function update() {
   updatePaddle();
   updatePuck();
   checkPaddle();
   checkBricks();
}

The update function calls a series of functions used to evaluate and update display objects in motion. A series of functions is also called to check if a brick is about to be busted, or if the puck is about to hit the paddle. You want to do this before ultimately updating the stage. Let’s go over each of these functions in detail, starting with updatePaddle (see Listing 4-14)

Listing 4-14. Updating the Paddle

function updatePaddle() {
   var nextX = paddle.x;
   if (leftKeyDown) {
      nextX = paddle.x - PADDLE_SPEED;
      if (nextX < leftWall) {
         nextX = leftWall;
      }
   }
   else if (rightKeyDown) {
      nextX = paddle.x + PADDLE_SPEED;
      if (nextX > rightWall - paddle.width) {
         nextX = rightWall - paddle.width;
      }
   }
   paddle.nextX = nextX;
}

This should look familiar to you from Chapter 3. Depending on which arrow key is currently pressed down,  the next position of the paddle is assigned to it, and determines where it should be drawn during the next render cycle. A quick check against the left and right walls assures that you can’t extend past them when controlling it. The next update function will move the puck. Listing 4-15 shows the updatePuck function.

Listing 4-15. Updating the Puck

function updatePuck() {
   var nextX = puck.x + puck.velX;
   var nextY = puck.y + puck.velY;
   if (nextX < leftWall) {
      nextX = leftWall;
      puck.velX *= -1;
   }
   else if (nextX > (rightWall - puck.width)) {
      nextX = rightWall - puck.width;
      puck.velX *= -1;
   }
   if (nextY < (ceiling)) {
      nextY = ceiling;
      puck.velY *= -1;
   }
   puck.nextX = nextX;
   puck.nextY = nextY;
}

Using the puck’s x and y velocity, a few temporary values are set up to determine its next location by adding to its current point values. Similar to the paddle, collisions against the walls and ceiling are considered, and values are adjusted appropriately to prevent the puck from moving out of bounds. In the case of the puck, and its constant motion, a collision with a wall should reverse its x velocity, and its y velocity is reversed when hitting the ceiling. Lastly, the puck is assigned its next x and y positions for the next render cycle.

Checking for Collisions

With the paddle controls set, and the puck in motion, some evaluations need to be made on what is about to happen with these new positions, and what they might collide with. The next function in Listing 4-16 determines if the puck is about to collide with the paddle.

Listing 4-16. Checking the Puck for a Collision with the Paddle

function checkPaddle () {
   if (puck.velY > 0 && puck.isAlive && puck.nextY > (paddle.y –
         paddle.height) && puck.nextX >= paddle.x && puck.nextX <=
         (paddle.x + paddle.width)) {
      puck.nextY = paddle.y - puck.height;
      combo = 0;
      paddleHits++;
      puck.velY *= -1;
   }
   }

The puck’s collision with the paddle is handled in the same way as the ceiling in that its y velocity is reversed when hitting. Only the paddle is a moving target, so the collision detection is a bit more complicated. You need to detect the x and y position of both the paddle and the puck to determine if they are about to intersect. This detection really only needs to run when the puck is moving downwards, so first check its velY value. The puck also has an isAlive property that is set to false when it’s beneath and beyond the reach of the paddle. This prevents you from running its brick and paddle collision calculations during the time it travels beyond and below the stage.

Continue with the conditional by comparing the position and size values of both the puck and the paddle to see if the rectangles intersect. If all conditions are met, then you know that the puck must be covering the paddle and a collision is successfully detected. Updating the puck’s nextY property to sit snuggly on top of the paddle, similar to the walls and ceiling, gives it a much more natural look when bouncing up and away.

A few of the game variables need to be updated when the paddle hits the puck. The combo variable is used to count consecutive brick hits before reaching the paddle again. This is used for the combo bonuses that are awarded to the player. When the puck hits the paddle, this value is reset back to zero to restart the consecutive brick count. The paddleHits variable is used to count the number of times the puck hit the paddle. This count is how you determine if you should add a new level of bricks to the board. Finally, the y velocity is reversed, which will set the puck flying back up towards the bricks. Figure 4-6 demonstrates the puck ricocheting off of the paddle.

The next function (see Listing 4-17) handles the coolest part of the game, the brick busting! This function is one of the most complex functions yet and consists of one giant loop. This loop checks all bricks in the game for a puck collision, and a few conditionals are then written to factor in the bonus features.

Listing 4-17. Checking the Puck for Brick Collisions

function checkBricks() {
   if(!puck.isAlive){
      return;
   }
   var i, brick;
   for (i = 0; i < bricks.length; i++) {
      brick = bricks[i];
      if (puck.nextY >= brick.y && puck.nextY <= (brick.y + brick.height)
            && puck.nextX >= brick.x && puck.nextX <= (brick.x +
            brick.width)) {
         score += brick.points;
         combo++;
         if (brick.freeLife) {
            lives++;
            createjs.Tween.get(brick.freeLife)
               .to({alpha:0, y:brick.freeLife.y - 100}, 1000)
               .call(function () {
                  stage.removeChild(this);
               });
         }
         if (combo > 4) {
            score += (combo * 10);
            var comboTxt = new createjs.Text('COMBO X' + (combo * 10),
               '14px Times', '#FF0000'),
            comboTxt.x = brick.x;
            comboTxt.y = brick.y;
            comboTxt.regX = brick.width / 2;
            comboTxt.regY = brick.height / 2;
            comboTxt.alpha = 0;
            stage.addChild(comboTxt);
            createjs.Tween.get(comboTxt)
               .to({alpha:1, scaleX:2, scaleY:2, y:comboTxt.y - 60}, 1000)
               .call(function () {
                  stage.removeChild(this);
               });
         }
         stage.removeChild(brick);
         bricks.splice(i, 1);
         puck.velY *= -1;
         break;
      }
   }
}

The loop is set to cycle through the bricks array, which holds every brick visible on the stage. The same collision detection that was used on the paddle is used on each brick. If a hit is found, several things are then considered.

First, the score is increased by the number of points that were assigned to the brick during the building of its level, and the combo count is incremented by one. If the brick was a bonus brick, the player is awarded a new life. When this brick was created, it was assigned a reference to the ‘1UP’ text object so it could be removed later. Before doing this, it is given a classic up-and-fade animation, and is ultimately removed from the stage when the tween is complete.

The combo bonuses are next determined by checking if the combo count is over four. For every one of these hits, the current score is increased by the value of the combo count times 10. To add dramatic effect for these combo points, a text object is created on the fly, added to the stage above the brick, and then animated up while growing in size. Adding a short delay prevents too much overlapping of text as the bonus messages populate the screen. When the animation is complete, the text object is removed from the stage. Figure 4-7 shows the visuals during a combo streak.

This loop is still not quite complete. The brick needs to be removed from the stage so it will disappear when it is next updated. Setting these busted bricks to null helps keep the game clean, and invokes garbage collection on objects no longer in use. It’s also important to splice this object out of the bricks array so it’s no longer factored in this loop during the next update cycle.

At last, the puck’s y velocity is reversed and the loop is broken. You only need to detect one brick collision per update cycle, so breaking the loop prevents unnecessary code execution.

Ending the Game

You are now officially finished with the game loop functions. During this cycle, the game was constantly checking to see if the game should be over, and if so, to call on gameOver. Listing 4-20 shows this as one of the final three functions in the game, all of them handling the end-game scenario.

Listing 4-20. The gameOver Function

function gameOver() {
   createjs.Ticker.setPaused(true);
   gameRunning = false;
   messageTxt.text = "press spacebar to play";
   puck.visible = false;
   paddle.visible = false;
   stage.update();
   messageInterval = setInterval(function () {
      messageTxt.visible = messageTxt.visible ? false : true;
      stage.update();
   }, 1000);
}

The game should immediately be paused in the gameOver function to prevent the game loop from carrying on, and gameRunning is set to false. Then, the paddle and puck are hidden and the message below is changed to instruct the player how to restart the game. After this, the stage needs to be manually updated since the update/render cycle has been paused. To draw attention to this new message, a simple interval is set up to blink these instructions on and off, and is set to the messageInterval game variable. This is done so it can be referenced and stopped when the game is restarted.

Resetting the Game

As simple as the game state logic is in this game, it’s enough to determine if the game is in motion or if it’s waiting to be restarted. Because the gameRunning variable is now set to false, the hit of the spacebar will no longer simply pause the game, but will run a function to completely reset all game values and start it over (see Listing 4-21).

Listing 4-21. Resetting the Game Variables and Starting the Game Over

function resetGame() {
   clearInterval(messageInterval);
   level = 0;
   score = 0;
   lives = 5;
   paddleHits = 0;
   puck.y = 160;
   puck.velY = PUCK_SPEED;
   puck.visible = true;
   paddle.visible = true;
   messageTxt.visible = true;
   gameRunning = true;
   messageTxt.text = "press spacebar to pause";
   stage.update();
   removeBricks();
   newLevel();
   newLevel();
   createjs.Ticker.setPaused(false);
}
function removeBricks() {
   var i, brick;
   for (i = 0; i < bricks.length; i++) {
      brick = bricks[i];
      if (brick.freeLife) {
         stage.removeChild(brick.freeLife);
      }
      stage.removeChild(brick);
   }
   bricks = [];
}

To reset the game, several of the key game variables are reset to the values they were assigned at the beginning of the game. All remaining bricks, and their corresponding ‘1UP’ text objects are removed from the stage. Finally, two new levels are added to the game and the game loop is resumed by unpausing the Ticker.

The Progressive Break-it game is now finished. The complete game code is available in the breakit.js file that you can find with the other source code for this book. You can download it from the Source Code/Downloads tab on the book’s Apress product page (www.apress.com/9781430263401).