JavaScript/jQuery and CSS compatibility is finally at a decent state amongst major browsers (IE and ACID3 notwithstanding). At least, similar/the same DOM manipulation behavior can be reproduced across those browsers. Not only that, but the JavaScript rendering speed of engines other than Trident (IE’s) is quite fast. With these developments, it is actually possible to create playable games (really, check those links out!).

The Demo

In about 4 hours I’ve created a demo RPG here using jQuery, JavaScript, CSS, and the Javascript jQuery Hotkeys Plugin. I’m surprised no one has created a complete, working one yet, as tile-based RPGs are much easier to make than action games with collision detection.

If anyone is interested, I might continue building this, adding in turn-based menu battles (oh boy!), a shop system, and AJAX saving and loading with an HTML5 backend. Leave a comment!

Outro

Not that I’m against Flash (looking at you, Apple), but JavaScript is much easier to learn and there is much potential in using it for things other than special effects and Web Applications. We’ve already recreated all the basic elements used in the Nintendo games of yore using CSS and jQuery; e.g., sprite animation (with many techniques) and parallax scrolling. Combined with the super fance sliding, fading, easing, and opacity animations we are already afforded, the browser is a feature rich playground for game developers. Hopefully we’ll see more techniques emerge, and with them more games. I am looking forward to jQuery being the new QBASIC.

References

1. jQuery Browser Compatibility
2. Acid Browser Tests
3. gameQuery
4. jQuery Video Game Remake: T&C Surf
5. Javascript jQuery Hotkeys Plugin
6. JQuery Sprite Animation Plugin
7. jParallax
8. Scrolling Parallax jQuery Plugin