• Choose a category
• All
• Classic-Fiction

By Root 1641 0

function to initialize key variables in your programs. You also can use this function to set up more advanced event handlers, as you see in the animation sections of this chapter.

Moving the sprite

Of course, the most interesting function in the program is the one that moves sprites around the screen. Take a look at the following code, which I break down for you:

function moveSprite(dx, dy){

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

x = parseInt(sprite.style.left);

y = parseInt(sprite.style.top);

x += dx;

y += dy;

checkBounds();

// move ball to new position

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

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

//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.style.top = y + “px”;

7. Print the position.

For debugging purposes, I like to know exactly where the x and y positions are, so I just made a string and printed it to an output panel.

//describe position

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

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

Checking the boundaries

You can respond in a number of ways when an object leaves the playing area. I’m going with wrapping, one of the simplest techniques. If something leaves