HTML, XHTML and CSS All-In-One For Dummies by Andy Harris

Author:Andy Harris
Language: eng
Format: epub
Publisher: For Dummies
Published: 2010-10-11T16:00:00+00:00

//describe position

var output = document.getElementById(”output”);

output.innerHTML = ”x: ” + x + ”, y: ” + y;

} // end MoveSprite

The function works essentially by determining how much the sprite should be moved in x and y and then manipulating the left and top properties of its style. Here’s what happens:

1. Accept dx and dy as parameters.

The function expects two parameters: dx stands for delta-x, and dy is delta-y. (You can read them difference in x and difference in y if you prefer, but I like sounding like a NASA scientist.) These parameters tell how much the sprite should move in each dimension.

function moveSprite(dx, dy){

You may wonder why I’m working with dx and dy when this object moves only horizontally. See, I’m thinking ahead. I’m going to reuse this function in the next few programs, which I discuss in the upcoming sections. Even though I don’t need to move vertically yet, I will as I continue programming, so I built the capability in.

2. Get a reference to the surface.

Use the normal document.getElementById trick to extract the sprite from the page. Be sure the sprite you’re animating has absolute position with top and left properties defined in a local style.

var surface = document.getElementById(“surface”);

3. Extract the sprite’s x and y parameters.

The horizontal position is stored in the left property. CSS styles are stored as strings and include a measurement. For example, the original left value of the sprite is 100px. For the program, you need only the numeric part. The parseInt() function pulls out only the numeric part of the left property and turns it into an integer, which is then stored in x. Do the same thing to get the y value.

x = parseInt(sprite.style.left);

y = parseInt(sprite.style.top);

4. Increment x and y.

Now that you have the x and y properties stored as integer variables, you can do math on them. It isn’t complicated math. Just add dx to x and dy to y. This syntax allows you to move the object as many pixels as the user wants in both x and y axes.

x += dx;

y += dy;

5. Check boundaries.

If you have young children, you know this rule: Once you have something that can move, it will get out of bounds. If you let your sprite move, it will leave the space you’ve designated. Checking the boundaries isn’t difficult, but it’s another task, so I’m just calling a function here. I describe checkBounds() in the next section, but basically it just checks to see whether the sprite is leaving the surface and adjusts its position to stay in bounds.

checkBounds();

6. Move the ball.

Changing the x and y properties doesn’t really move the sprite. To do that, you need to convert the integers back into the CSS format. If x is 120, you need to set left to 120px. Just concatenate “px” to the end of each variable.

// move ball to new position

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

sprite.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.