JS Sprite Test

Update (May-09-2007 | 12:00)

I couldn't resist ;) - I made a slightly advanced version with full arrow key control. The ball now has semi transparent shadow and moves across a map generated by a simple tile engine.
Link: sprite tile

Update (May-09-2007 | 9:00)

I couldn't just leave it at that and had to add IE support ;)

Update (May-09-2007 | 8:30)

I added keyboard control to the ball in all Standards based browsers (non IE). So the ball can be controlled with the arrow keys (left and right) and will stop at the borders of it's containment. The stopping is not yet handled nicely and is a little bit jerky, but I will eventually get it right.

Coded up in about 10 minutes, this is just a test to check the performance of script based animation. The sprite consists only of one continuos image strip which is animated using a Javascript Interval.

So why is this any different than an animated gif?
Well, first of all this image is a PNG – but it could be a JPG or any other format also. Further this could be used to make extremely efficient rollovers because there is no need to load two separate images. And finally, it was just plain fun to make it :)

If you like it or have questions, drop me a line at: