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.?
Related Content:
Friday already?
An event model is pretty easy to implement in the canvas. It surprises me that not many people have followed this route.
There’s an implementation of the original space invaders arcade machine, implemented using canvas, here:
http://www.bluishcoder.co.nz/js8080/
http://www.bluishcoder.co.nz/2008/09/javascript-space-invaders-emulator.html
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!
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.
http://www.randomthink.net/canvas/life.html
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.
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.
Why the low rating? This is one of the nicest games posted to Ajaxian yet!
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.
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!
@Jefposkanzer: what you call a problem, I call a benefit. First thing I do in every game I play is mute the sound.
@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.