HTML and CSS Reference
In-Depth Information
An array of color values we will use when placing bulbs on the canvas
An array to hold the bulbs that we are manipulating on the canvas
Now we define some variable that we will use to place objects on the canvas. These variables
will be used to place the factory bulbs. Factory bulbs are the ones the user clicks on to create
new bulbs to drag and drop. Now they could be defined as const , but we elected to use var .
This is because Internet Explorer does not support the JavaScript const keyword.
var BULB_START_X = 40 ;
var BULB_START_Y = 50 ;
var BULB_Y_SPACING = 10 ;
var BULB_WIDTH = 25 ;
var BULB_HEIGHT = 25 ;
Next we create an array to hold to hold the factory bulbs:
var clickBulbs ;
The following two variables are used to limit the number of clicks the application responds
to. clickWait is the number of calls to gameLoop() to wait until we allow the user to click
again.Thevalueof clickWaitedFrames issetto 0 whentheuserclicksabulb,sotheprocess
can restart. If you don't have some kind of limit to the number of mouse clicks you listen for,
you can get into a situation where objects never get dragged and dropped, because as soon as
you click, the event fires multiple times.
var clickWait = 5 ;
var clickWaitedFrames = 5 ;
Next we create an instance of DisplayList passing a reference to the Canvas context. This
will hold all the Ornament objects we display on the canvas.
var displayList = new
new DisplayList ( theCanvas );
We also need to create listeners for mousemove and mouseup , so we use the events to click
and/or drag bulbs on the screen:
theCanvas . addEventListener ( "mouseup" , onMouseUp , false
false );
theCanvas . addEventListener ( "mousemove" , onMouseMove , false
false );
Next we initialize the arrays for bulbs and clickBulbs and load the background image:
Search WWH ::

Custom Search