HTML and CSS Reference
In-Depth Information
Play/Pause Push Button: Hit Test Point Revisited
The first thing we need to do when implementing the play/pause button is create the event
handler for the mousemove event. The function really is just the standard cross-browser code
we introduced earlier in the topic for tracking the mouse position, depending on which prop-
erties the DOM in browsers supports: pageX / pageY or e.clienX / e.clientY . This function is
called every time the mouse is moved on the canvas to update the mouseX and mouseY vari-
ables.Thosevariablesarescopedto canvasApp() sothatallfunctionsdefinedinsideofitcan
access them:
function eventMouseMove ( event ) {
var x ;
var y ;
iif ( event . pageX || event . pageY ) {
x = event . pageX ;
y = event . pageY ;
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 ;
Now we need to create the eventMouseUp() handler function. This function is called when
the user releases the mouse button after clicking. Why after , and not when the mouse is
clicked? Well, one reason is because we generally use the mousedown event for the start of a
“dragging” operation, which we will show you shortly.
The first thing we dohere, just like in CH6EX11.html inthe last chapter,is test tosee whether
timeWaited is greater than buttonWait . If so, we will accept a new mouseUp event. If not,
we skip it.
The heart of this function is a hit test point-style collision detection check for the buttons. We
discussed this in depth in Chapter 6 when we created the buttons for the video puzzle game
( CH6EX10.html ). Notice that here we are using the variables we create to represent the x and
y locations of the button ( playX , playY ) and the width and height of a button ( bW , bH ) to form
Search WWH ::

Custom Search