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:
davidlebech.com/spacewars/

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.

2 comments

  1. Its amazing David :)

    You’ve always been an inspiration.. Keep up the good work!

    I want to learn HTML5 some day soon myself..

    1. Thanks Kals, you are too kind :-)

      If you are specifically looking for exploring the canvas element, I would definitely recommend reading through the tutorial I mention. There are some nice examples and links to cool demos in the end.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.