Tuesday, September 23rd, 2008

Invaders from Mars: Building a JavaScript Game

Category: Games, JavaScript

As a follow-up to our recent posting of a JavaScript Pac-Man clone, we bring you a JavaScript Space Invaders clone: Invaders from Mars. Only this time, in addition to a link to the game itself, we’ve got a link to the author’s blog (one Mark Wilcox) in which he goes into detail on the various design issues he faced whilst creating his game and discusses the lower-level framework he created to drive his game.

Invaders from Mars does it old-school, as did the Pac-Man clone: divs and images, baby. Performance is pretty good, but I can’t wait to see people realize that if they go with <canvas>, they can really do some interesting stuff. What do you think on the Canvas vs. DOM rendering model for games, etc.?

Posted by Ben Galbraith at 7:00 am

3.4 rating from 28 votes


Comments feed TrackBack URI

Friday already?

Comment by henrah — September 23, 2008

An event model is pretty easy to implement in the canvas. It surprises me that not many people have followed this route.

Comment by TNO — September 23, 2008

There’s an implementation of the original space invaders arcade machine, implemented using canvas, here:


It needs a recent browser and a fast js engine though. I think with cavas and fast JS engines you’ll see more of this type of game in JS instead of flash/applets. That invaders from mars is very smooth!

Comment by jbooth — September 23, 2008

I really dig the idea of canvas. A couple of months ago, I was trying to do a few things to learn a bit of Prototype and play with the canvas, and I wound up making Conway’s Game of Life using Canvas, all in JS.


The better the JS engine, the better it can run. I have it intentionally clocked down for now so it doesn’t kill most browsers (I can make it absolutely choke FF2).

Lately I’ve gotten a bit more excited about jQuery than Prototype, though, and so I’m thinking I might revisit it sometime soon and use jQuery instead of Prototype, and implement some user controls with jQuery UI, like some sliders and such so users can adjust the size of the grids, click cells on/off, etc.

Comment by brianarn — September 23, 2008

Certainly canvas is the way to go in the long run. Right now there are still lots of people running browsers that don’t support it.

The big problem with doing JavaScript games is sound. You have to add in a module from either Flash or Java for that, which sucks.

Comment by jefposkanzer — September 23, 2008

Why the low rating? This is one of the nicest games posted to Ajaxian yet!

Comment by GMFlash — September 23, 2008

This is pretty well-done. Firefox 3 renders slowly when compared to Safari, but it’s still quite playable. It’s possible (though I didn’t dig through the code) that a lot of DOM property access, reading offsetWidth/height etc. could be quite expensive and slowing down the game.

Comment by Schill — September 23, 2008

While canvas is certainly great, it’s not always the best route to take. It really depends on what you’re trying to do. Nice game!

Comment by jseidelin — September 23, 2008

@Jefposkanzer: what you call a problem, I call a benefit. First thing I do in every game I play is mute the sound.

Comment by Joeri — September 24, 2008

@jefposkanzer: You don’t require Flash or Java for sound. Many browsers have built in support from sound. Opera with support for the Audio object, IE with the bgsound attribute, Safari and Firefox depend on the OS have version embeddable sound support.
What you need is a nice easy way to automatically detect what’s available and use it for playing sounds.
I wrote up a little JS library to do this: http://www.telparia.com/browsersoundtest/
It will of course, fall back to Flash as a last resort if available.

Comment by Sembiance — September 26, 2008

Leave a comment

You must be logged in to post a comment.