Game Development Reference
In-Depth Information
Figure 5-2.
Screenshot of the Balloon1 program
You can see in Figure
5-2
that the balloon doesn't appear centered under the very tip of the pointer.
There's a reason for that, and the next section tackles the issue in detail. For now, just remember that
the sprite is treated as a rectangle. The upper-left corner is aligned with the pointer tip. The balloon
appears misaligned because the balloon is round and doesn't extend to the corners of the rectangle.
Instead of
pageX
and
pageY
, you can also use
clientX
and
clientY
, which also give the mouse
position. However,
clientX
and
clientY
don't take scrolling into account. Suppose you calculate the
mouse position as follows:
Game.balloonPosition = { x : evt.clientX, y : evt.clientY };
Figure
5-3
shows what can now go wrong. Due to scrolling, the
clientY
value is smaller than 480,
even though the mouse is located at the bottom of the background image. As a result, the balloon is
no longer drawn at the mouse position. Therefore, I suggest always using
pageX
and
pageY
, and not
clientX
and
clientY
. In some cases, though, it may be useful to not take scrolling into account—for
example, if you're developing one of those annoying ads that keeps appearing in the middle of the
browser view even if the user tries to scroll past it.
Search WWH ::
Custom Search