SRL Archive - Web Development

SVG/JS Games


Craig`

2010-01-23 11:45:53

If you know me, you'll know that I enjoy working with web technologies, especially extensible ones, thus I found an interest in SVG (scalable vector graphics.)

From the W3C spec:

SVG is a language for describing two-dimensional graphics in XML [XML10]. SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. The feature set includes nested transformations, clipping paths, alpha masks, filter effects and template objects.


So I had some fun with making bizzare shapes etc, then thought: "wouldn't it be cool to make a simple game in SVG? as I mean, I don't have an iterest in flash and all I need is a text-editor to code some markup, not a whole-blown application like flash needs."

so I opened my beloved BlueFish editor, and began coding some markup and ECMAscript.

At first it was just a square that when clicked had it's x/y coords incremented by ten; then I changed the code so that the x/y coords changed by a value of 15px when the arrow keys were pressed.

Then it evolved into.. I don't know what it's called, a pointless "maze" game? anyways, you can currently find it here: http://awesomefist.com/craig/SVG/basic/index.svg

oh and just before you try to open it in IE, it doesn't natively work, to get it to work you'll need to install adobe's SVG plugin, but meh IE..

oh and another "problem" (for some, but really most people have JS enabled..) it doesn't work without JS, all elements are dynamically added, however this isn't all gloom, as you can easily just change the map array to form a new maze, a new location for "treasure", a new player spawn location etc.

oh and for those who don't know, ActionScript is a scripting language based on ECMAScript, so if you don't have JS enabled I doubt either my, or other's flash games will work (top of my head, no cite etc)..

so yeah, just showing that there is an alternative to flash games, and it's really quite fun, and not hard :)

oh and finally, here's an epic example of what my friend made in SVG, using DTD XHTML 1.1 + MathML + SVG: http://www.totlandweb.info/reiko/

EDIT: it appears reiko doesn't work like it should for me, vista firefox (works fine on my ubuntu chrome/firefox)
EDIT^2: it seems I haven't uploaded the lastest code, and as I mentioned I'm not on my ubu machine, so I don't have access to the latest files, I'll upload them later (some fixes, e.g. "treasure" doesn't spawn where player spawns, and player is added via map array, thus easily changable)
EDIT^3: awesome, my one-hundredth post!

~ Craig` :)

Frement

2010-01-23 11:51:35

Nice, finally i can play forever!

E: Make it so that when you hit the "wall" you get Game Over!