Further Explorations - HTML5 Canvas - page 922

The onBulbClicked() functionistheheartofthe DragAndDrop class.Thisfunctiondoessev-
eral things:

1. Itteststoseewhetheraclickisvalidbychecking clickWaitedFrames against click-
Wait .

2. If a click is valid, it tests to see whether we have clicked on a factory bulb (so that
we can make a new one) or whether it is a draggable bulb instance and sets click-
WaitedFrames to 0 so that the app will wait a few frames until another click is valid.

3. We find the instance of Ornament that was clicked on by using the event.target
property. It will be a reference to the object that dispatched the event.
4. If it is a factory bulb and if we are not currently dragging any bulbs, we create a new
instance of Ornament and start dragging it. We set its type to copy , which means it is
draggable.

5. If it is a draggable instance of Ornament , we check to see whether we are currently
dragging it. If so, we drop it by setting the dragging property to false . If not and if
we are not dragging another bulb, we start dragging the new one by setting its drag-
ging property to true .

The following code matches the previous description:

function function onBulbClicked ( event ) {

iif ( clickWaitedFrames >= clickWait ) {
clickWaitedFrames = 0 ;
var

var clickedBulb = event . target ;
iif ( clickedBulb . type == "factory" && ! currentlyDragging ()) {
var new Ornament ( clickedBulb . bulbColor , BULB_WIDTH ,

BULB_HEIGHT , context );
tempBulb . addEventListener ( tempBulb . EVENT_CLICKED , onBulbClicked );
tempBulb . y = clickedBulb . y + 10 ;
tempBulb . x = clickedBulb . x + 10 ;
tempBulb . type = "copy" ;
tempBulb . dragging = true

var tempBulb = new

true ;
bulbs . push ( tempBulb );
displayList . addChild ( tempBulb );

} else else {

iif ( clickedBulb . dragging ) {
clickedBulb . dragging = false

false ;

} else else {

iif ( ! currentlyDragging ()) {
clickedBulb . dragging = true true ;