Want to receive updates when plugins like Aladdin jQuery animation are added to the site?

Subscribe to our FREE newsletter to get exclusive content not available to the public. You will also get notified when next jQuery tutorial is published

Name:

Email:

Your email address will be kept confidential and will not be shared with anyone else.
gSprite v1

Plugin Source: jquery.gsprite-1.js (4.50kb)


animation_delay
Description

Javascript and DHTML animation is surprisingly easy to build. setInterval function was used for animation. The init function of this plug in takes a graphic containing animation frames. Other parameters should be modified internally in the js file. The gif sprite transparency feature is very effective at creating game-like sprites. The character sprite is always playing the running animation whether the keys are pressed or not.

Controls

Only works in Firefox - The keyboard controls were implemented by intercepting the window.keydown events. Use Left and Right arrow keys to move the character. The controls code could easily be ported to other browsers.

Left arrow - run left

Right arrow - run right

Z - jump

Sprite animation

The frames are stored in Aladdin64.gif, a continuous 64x64 sprite set from the Aladdin game (SNES version). Only the background sprite image position is changed to simulate animation. All animation frames are described by a single .gif file - Aladdin64.gif.

Designed for Firefox

Due to the lack of time on my part, this plugin will work best in Firefox browser. It shouldn't be difficult to make it properly work in other browsers such as Chrome, where the Aladdin sprite animation is a little faster than what was planned for it originally, or Internet Explorer.

Ideas for future

Add Abu and make him follow Aladdin. Add controls for throwing apples and sitting down.