• Choose a category
• All
• Classic-Fiction

e = window.event;

} // end IE catch

//get width and height

height = parseInt(sprite.style.height);

width = parseInt(sprite.style.width);

//move center of sprite to mouse

x = e.pageX - (width/2);

y = e.pageY - (height/2);

sprite.style.left = x + “px“;

sprite.style.top = y + “px”;

} // end function

Move the mouse and the ball will follow

The HTML page is simple. This time I’m letting the mouse take up the entire page. No borders are necessary because the sprite isn’t able to leave the page. (If the mouse leaves the page, it no longer sends event messages.)

Just create a sprite with an image as normal and be sure to call init() when the body loads.

Initializing the code

The initialization is also pretty straightforward:

1. Create a global variable for the sprite.

Define the sprite variable outside any functions so that it is available to all of them.

var sprite;

2. Build the sprite in init().

The init() function is a great place to create the sprite.

function init(){

sprite = document.getElementById(“sprite”);

document.onmousemove = mouseListener;

3. Set up an event handler in init() for mouse motion.

This time, you’re trapping for mouse events, so call this one mouseListener.

document.onmousemove = mouseListener;

Building the mouse listener

The mouse listener works much like a keyboard listener. It examines the event object to determine the mouse’s current position and then uses that value to place the sprite:

1. Get the event object.

Use the cross-platform technique to get the event object.

function mouseListener(e){

if (!e){

e = window.event;

} // end IE catch

2. Determine the sprite’s width and height.

The top and left properties point to the sprite’s top-left corner. Placing the mouse in the center of the sprite looks more natural. To calculate the center, you need the height and width. Don’t forget to add these values to the local style for the sprite.

//get width and height

height = parseInt(sprite.style.height);

width = parseInt(sprite.style.width);

3. Use e.pageX and e.pageY to get the mouse position.

These properties return the current position of the mouse.

4. Determine x and y under the mouse cursor.

Subtract half of the sprite’s width from the mouse’s x (e.pageX) so that the sprite’s horizontal position is centered on the mouse. Repeat with the y position.

//move center of sprite to mouse

x = e.pageX - (width/2);

y = e.pageY - (height/2);

5. Move the mouse to the new x and y coordinates.

Use the conversion techniques to move the sprite to the new position.

sprite.style.left = x + “px”;

sprite.style.top = y + “px”;

Another fun effect is to have the sprite influenced by the mouse. Don’t make it follow the mouse directly, but check to see where the mouse is in relationship with the sprite. Have the sprite move up if the mouse is above the sprite, for example.

Creating Automatic Motion

You can make a sprite move automatically by attaching a special timer to the object. Figure 7-5 shows the ball moving autonomously across the page.

Figure 7-5: This sprite is moving on its own. (I added the arrow to show motion.)

Timer.html is surprisingly simple because it borrows almost everything from other code.

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

type = ”text/css”

href = ”keyboard.css” />