HTML and CSS Reference
In-Depth Information
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 eventMouseUp ( event ) {
var mouseX ;
var mouseY ;
var pieceX ;
var pieceY ;
var x ;
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
Search WWH ::

Custom Search