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

function init() {
stage = new createjs.Stage("canvas");
buildShapes();
setBlocks();
startGame();
}

First, some variables are declared to hold values that you'll need throughout your game code. The first is the stage
reference and the second two are arrays that will hold the blocks you drag, as well as the slots that you drop them on.
Lastly, a score variable is declared to hold the game score.
The init function is called when your body loads and kicks off your game. The Stage object is created and set to
the stage variable.
Next is a series of functions that set up and start the game, the first being a function (see Listing 3-5) used to
create all of the shape objects that you will be using in the game.

Listing 3-5. colorDrop.js - buildShapes Function

function buildShapes() {
var colors = ['blue', 'red', 'green', 'yellow'];
var i, shape, slot;
for (i = 0; i < colors.length; i++) {
//slots
slot = new createjs.Shape();
slot.graphics.beginStroke(colors[i]);
slot.graphics.beginFill('#FFF');
slot.graphics.drawRect(0, 0, 100, 100);
slot.regX = slot.regY = 50;
slot.key = i;
slot.y = 80;
slot.x = (i * 130) + 100;
stage.addChild(slot);
slots.push(slot);
//shapes
shape = new createjs.Shape();
shape.graphics.beginFill(colors[i]);
shape.graphics.drawRect(0, 0, 100, 100);
shape.regX = shape.regY = 50;
shape.key = i;
shapes.push(shape);
}
}

The buildShapes function creates all of the visual assets needed for the game. You start by creating an array that
holds the colors used for building the blocks. A series of reusable variables are also declared for loop iterations, as well
as the display objects that you'll create throughout the function.

■ it's good practice to declare reusable variables to prevent unnecessarily creating new ones each time you
simply need a temporary holder to represent an object. it's also a good idea to declare all local variables at the top of your
function for easy reference.

Note