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