Mixing HTML5 Video and Canvas - HTML5 Canvas - page 504

theCanvas . addEventListener ( "mouseup" , eventMouseUp , false false );

The first thing we do in the eventMouseUp() function is test to find the x and y locations of
the mouse pointer when the button was pressed. We will use those coordinates to figure out
whether the user clicked on any of the puzzle pieces.

Becausesomebrowserssupportthe event.pageX / event.pageY propertiesoftheeventobject
and others support the e.clientX / e.clientX properties, we need to support both. No matter
which one is set, we will use those properties to set our mouseX and mouseY variables to the x
and y locations of the mouse pointer:

function function eventMouseUp ( event ) {

var var mouseX ;

var

var mouseY ;
var var pieceX ;

var

var pieceY ;
var var x ;

var var y ;

iif ( event . pageX || event . pageY ) {
x = event . pageX ;
y = event . pageY ;
} else

else {
x = e . clientX + document . body . scrollLeft +
document . documentElement . scrollLeft ;
y = e . clientY + document . body . scrollTop +
document . documentElement . scrollTop ;

}

x -= theCanvas . offsetLeft ;
y -= theCanvas . offsetTop ;

mouseX = x ;
mouseY = y ;

Creating hit test point-style collision detection

Now that we know where the user clicked, we need to test whether that location “hits” any
of the puzzle pieces. If so, we set the selected property of that piece to true . What we are
goingtoperformisasimple hittestpoint -stylehitdetection.Itwilltelluswhetherthe x , y po-
sition( point )ofthemouseisinside( hits )anyoneofthepuzzlepieceswhenthemousebutton
is clicked.

First, we create a local variable named selectedList that we will use when we need to swap
the pieces in the board array. Next we will use a set of two nested for:next loops to traverse