• Choose a category
• All
• Classic-Fiction

sprite = document.getElementById(”sprite”);

setInterval(“moveSprite(5, 3)”, 100);

} // end init

Timer-based movement

x = 100, y = 100

The HTML and CSS are exactly the same as the button.html code. Most of the JavaScript comes from movement.js. The only thing that’s really new is a tiny but critical change in the init() method.

Creating a setInterval() call

JavaScript contains a very useful function called setInterval. This thing takes two parameters:

♦ A function call. Create a string containing a function call including any of its parameters.

♦ A time interval in milliseconds. You can specify an interval in 1000ths of a second. If the interval is 500, the given function is called twice per second, 50 milliseconds is 20 times per second, and so on.

You can set the interval at whatever speed you want, but that doesn’t guarantee things will work that fast. If you put complex code in a function and tell the browser to execute it 1,000 times a second, it probably won’t be able to keep up (especially if the user has a slower machine than you do).

The browser will call the specified function at the specified interval. Put any code that you want repeated inside the given function.

Don’t put anything in an interval function that doesn’t have to go there. Because this code happens several times per second, it’s called a critical path, and any wasteful processing here can severely slow down the entire program. Try to make the code in an interval function as clean as possible. (That’s why I created the sprite as a global variable. I didn’t want to re-create the sprite 20 times per second, making my program impossible for slower browsers to handle.)

Automatically moving objects are a great place to play with other kinds of boundary detection. If you want to see how to make something bounce when it hits the edge, look at bounce.html and bounce.js on the CD-ROM.

Building Image-Swapping Animation

The other kind of animation you can do involves rapidly changing an image. Look at Figure 7-6 to see one frame of an animated figure.

Figure 7-6: This sprite is kicking!

Animation is never that easy to show in a still screen shot, so Figure 7-7 shows the sequence of images used to build the kicking sprite.

Figure 7-7:

I used this series of images to build the animation.

You can use any series of images you want. I got these images from a site called Reiner’s Tilesets (http://reinerstileset.4players.de/englisch.htm). It includes a huge number of sprites, each with several animations. These animations are called Freya.

(I include all the Freya images in a Zip file on the Web site and CD-ROM if you want to try this yourself.)

This page might lag when you try to run it from a server because the animation starts immediately and the images may take some time to download. I’m going to live with this for now to keep the example simple. Look at the upcoming “Preloading Your Images” section to see how to prevent this problem.

Preparing the images

You can build your own images, or you can get them from a site like Reiner’s. In any case, here are a few things to keep in mind when building image animations:

♦ Keep them small. Larger images take a long time to download and don’t swap as smoothly as small ones. My images are 128 by 128 pixels, which is a good size.

♦ Consider adding transparency. The images from Reiner have a brown background. I changed the background to transparent using my favorite graphics editor (Gimp).

♦ Change the file format. The images came in .bmp format, which is inefficient and doesn’t support transparency. I saved them as .gif images to make them smaller and enable the background transparency.

♦ Consider changing the names. I renamed the images