Space Wars on html canvas

Space Wars screenshotI recently spent a little time testing out the <canvas> element which is a nice and fairly new markup element that is included in html5. I decided to take a little Asteroids-like game that I made in a group project at the University of Oregon in Fall 2009 (we called it Space Wars) and convert it to work with the <canvas> element and Javascript.

This was very fun and surprisingly easy. A lot of the code could be copied almost exactly from the Java code and modified slightly to work with the <canvas> element. I gained the necessary background from this excellent tutorial and besides some differences between Firefox and Chrome/Opera/Safari in how to handle keyboard events there were no major obstacles along the way.

If anyone should be interested, the game can be played here:

The <canvas> element is definitely a nice addition to the toolkit for online webservices and it will be interesting to see what people might use it for in the future.