Further Explorations - HTML5 Canvas - page 921

bulbs = new new Array ();

clickBulbs = new

new Array ();
backGround = new

new Image ();
backGround . src = "background.gif" ;

The factory bulbs are the ones we click on the canvas to create the bulbs that are dragged and
dropped. To create them, we loop through all the colors in the bulbColors array, creating a
new Ornament instance for each color. We then set the type property to factory , place it on
the canvas using our placement variables ( x , y ), and then add it to the clickBulbs array and
add it to the instance of displayList :

for for ( var var i = 0 ; i < bulbColors . length ; i ++ ) {

var var tempBulb = new new Ornament ( bulbColors [ i ], BULB_WIDTH ,

BULB_HEIGHT , context );
tempBulb . addEventListener (
tempBulb . EVENT_CLICKED ,
onBulbClicked );
tempBulb . x = BULB_START_X ;
tempBulb . y = BULB_START_Y +
i * BULB_Y_SPACING + i * BULB_HEIGHT ;
tempBulb . type = "factory" ;
clickBulbs . push ( tempBulb );
displayList . addChild ( tempBulb );

}

Next we create our game loop. We create a setTimeout loop that calls draw() every 20 mil-
liseconds. This is also where we update clickWaitedFrames to test whether we will accept
another mouse click:

function function gameLoop () {

window . setTimeout ( gameLoop , 20 );
clickWaitedFrames ++ ;
draw ();

}

Our draw() function is slimmed down considerably from others we have created previously
in this topic. First, it draws a background image, and then it calls displayList.draw() to
draw all objects in displayList . For this simple display list to work, you need to add ob-
jects to the list in the opposite order that you want them layered because the later ones will be
drawn on top of the earlier ones:

function function draw () {

context . drawImage ( backGround , 0 , 0 );
displayList . draw ();

}