In only 15 lines of code we'll create a sprite that looks around when you click on it:
Please note that it does NOT use Canvas, so HTML5 is NOT required. At the same time it's a very flexible solution that can be implemented in games or pretty much any website.
This code executes very quickly and is compatible with virtually any browser [exept the text-based ones :)], including mobile devices (iOS, Android, Blackberry).
It's actually a great alternative to Flash and Java - you can still move sprites all around the window and respond to events (mouse, keyboard, timer), but with much better browser compatibility!
Let's get to work!
Step 1 - empty HTML page
If you paste this text into a notepad, save it with the extension .htm and open it with a web browser, you'll only get an empty window for now:
Step 2 - Div - a generic HTML object
Now we add a simple empty Div element (which will become our actual sprite) to the Body and set its height (equal to the sprite image height - 200 pixels in our example) and background image: (the code added in this step is highlighted in blue)