Moving Sprite Demo

This is an experiment with Javascript using animation strips to create a moving sprite. The arrow keys control the direction he moves. You must have a later version of Internet Explorer and have Javascript enabled.

The strips are displayed inside a positioned 64*64 DIV window so that only one frame is visible at a time. The DIV is dynamically inserted into the document, making it unnecessary to provide the element code in the page. A timer event is used to move this avatar window around the screen and to move the strip inside the avatar window so that different frames are displayed in sequence.

An older method used animated gifs that changed frames at the same rate as the avatar was moved. But lack of precise synchrony caused the motion to be jerky.

There is an inherent extensibility to the strip method. For one thing, you can enter an animation loop at any point in the cycle, allowing for smoother transitions between moves, and for taking an action after a certain frame number is reached.

Let's go out and play