File Under: HTML5, Web Standards

Play Asteroids in HTML5

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: