MMOAsteroids: every triangle for itself

It started with a post on Seb Lee-Delisle’s blog where he claimed to have built a Node.js-based real-time multiplayer version of the classic Asteroids videogame (albeit without the asteroids). That turned out to be an April Fool’s prank, but the idea was compelling enough that now there really is a real-time, multiplayer Asteroids game on the web. It’s based on Doug McInnes’ HTML5 Asteroids and uses the as-yet-unreleased Firebase API.

I’m not sure about the “massive” part of MMOAsteroid (it appears, based on posts at Hacker News, that the game randomly assigns players to different boards to avoid overwhelming the screen and making it unplayable), but otherwise it’s pretty awesome. And highly addictive.

A developer named Kevin Roast has created a slick demo of the arcade classic Asteroids using the Canvas element inside HTML5.

Use the arrow keys and the space bar to control your ship. Also highly recommended: press “R” to switch to the retro-styled graphics. The complex polygons of the modern graphics are harder to see (sorry, Kevin).

Canvas is the part of HTML5 that lets developers create 2D animations — you can draw polygons on the screen, then manipulate them with JavaScript, or the mouse and keyboard (usually both). It’s one of the technologies that intrepid web authors are using to replace Flash for simple animations and games like this one. Granted, Canvas has a long way to go before it can replicate what’s possible today in a Flash game, but we’re seeing the baby steps happen. And as browsers get faster, the baby’s stride grows.

Originally developed by Apple, Canvas is now part of the HTML5 draft specification and is supported by most major browsers. IE8 is lacking native support (it works with this add-on) but IE9 will fix that when it reaches the beta stage later this month.

Kevin’s demo has been around for a couple of months, but we’re revisiting it because the author has taken the original code and created a brand new Canvas benchmark tool to test how quickly and smoothly your browser can render HTML5 animations. Run his new test code and you’ll see a game simulation with more asteroids than your browser can handle.

Also, when playing the actual game, you can recreate this effect by pressing the “A” key as you fly around. This adds new asteroids to the playing field, so you can test your browser and your skills.

See Also:

• Play Pac-Man in HTML5
• Google Shows Off Its Bouncy Balls
• Tips and Tricks for Better HTML5 Canvas Animations
• Who Needs Flash?
• Turn Your Vector Art Into Canvas-based Animations With Opacity