Space Invaders


A while ago I started experimenting with Dmitry’s handy Raphaël SVG/VML library for doing some charting.

The charting work has not yet seen the light-of-day but during some spare moments I had a look at implementing an old arcade game using Raphaël. A very rough, incomplete and buggy approximation of the original Space Invaders.

Given that this is an “alpha release” of something on my blog and also that I don’t really like IE, despite Raphaël supporting IE I never tested this game in IE and hence, in that browser you probably can’t currently get beyond the intro screen because I didn’t wire up the keyboard controls. I may get it to “work” in that browser if somebody eventually guilts me into it. I probably should get it working in IE because, well, otherwise I’m partly wasting the benefits of Raphaël over pure SVG? Anyway…

It does work in Firefox, Chrome and Opera… possiby Safari, though again… untested so far.

I used Raphaël for the graphics, SoundManager2 for the sounds and implememented the top scores over on AppJet which unfortunately seems to be having occasional problems so I might have to move that to an install of couchdb I have.

Some observations

  1. JavaScript in the browser is probably fast enough right now for games of this type though you would have to do some optimisation. Apart from some time shift corrections my game code got no speed optimisations. That said, setTimeout and setInterval seem fairly inadequate and difficult to work with. I didn’t use a global/world clock but that is probably going to be necessary for decent synchronisation.

  2. I didn’t spend much time on polishing the game and it shows.To make a highly playable game a huge amount time is going to be tweaking the UI, playability, difficulty progression and generally getting it polished. If web developers consider the amount of effort put into the final polishing stages for a website and multiply it by… ten… they might get an idea of how much time would go into polishing something as interactive as a game like Space Invaders.

  3. I used a boatload of closures and prototypal inheritence via object cloning and didn’t care about doing any memory cleanup. I don’t typically use Chrome but V8 really handled that unoptimised code really well. I would expect Tracemonkey to be as good whereas the release of FF3 I’m using seems to struggle a little.

  4. Raphaël worked nicely but in order to get the two animation states for the invaders I ended up doing them as sprites and constantly changing the sprite source for all the invaders. Without spending more than thirty seconds looking at Raphaël’s internals I suspect my code would perform better to do them as actual SVG and just change the path for each state instead of constantly adding and removing sprites.

  5. I don’t really think it matter but the code for this Space Invaders version is not MVC. All the objects are responsible for calling the draw and sound API’s directly based on their own state. I used what is probably more of a morphic style which seemed much more natural for what I was writing.

For the game, no guarantees given as to whether or not it will crash any browser at any time. There’s a bunch of timeouts still running when you die so try to not leave your browser sitting on the high score page for any length of time just yet.

Anyway, here it is: Space Invaders.

Be warned that it has sound, the sound is a bit crap… and you can’t (yet) disable it. Also, I’m well aware that the second level is basically impossible at the moment. I’ll look at some improvements in the coming days and weeks.

If anybody wants to see the game code, without having to view source the game itself you can see that over here.



CoffeeScript in Action


CoffeeScript in Action book cover

I'm the author. Get it from Manning.