HTML and CSS Reference
In-Depth Information
bulbColors
An array of color values we will use when placing bulbs on the canvas
bulbs
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
var
BULB_START_X
=
40
;
var
var
BULB_START_Y
=
50
;
var
var
BULB_Y_SPACING
=
10
;
var
var
BULB_WIDTH
=
25
;
var
var
BULB_HEIGHT
=
25
;
Next we create an array to hold to hold the factory bulbs:
var
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
var
clickWait
=
5
;
var
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
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:
