HTML5: a practice run
Petteri Hietavirta our Java Specialist discusses the benefits of HTML5 and shares his personal experience
HTML5 is now one of the most common terms in web development but what does it bring? It consists of several new technologies like audio and video tags, offline storage and canvas elements. Although the specification has not yet been finalised, most modern browsers support many of its features.
Some major players like Apple have publicly declared it to be the technology for advanced interactive content and they are promoting HTML5 with their showcases. (http://www.apple.com/html5/). There is ongoing debate whether it is too early to call HTML5 as a Flash killer but in any case the feature gap is shrinking between these two.
Like Flash, HTML5 can be used to develop animations and interactive content. The Canvas element can be used for games, data visualisations and image manipulation. It is natively supported by Chrome, Firefox, Safari and Internet Explorer 9. For older IE browsers there is a workaround which does not involve any plug-ins, however, this slightly affects rendering performance.
For the sake of practice and personal interest I decided to put together a simple game using HTML5 Canvas for the visuals and JavaScript for the game itself. I had some previous experience writing simple JavaScript snippets for form validation but building a complete game was a learning process for me. I decided to make the game as simple as possible so that I could finish it before my interest faded away.
After browsing through a couple Canvas tutorials I decided that my game was going to be something similar to the old Asteroids game. I wrote some code to display my spaceship and then added keyboard control, some physics and collision detection. To make my game a little bit more social I built it as a Facebook application with a scoreboard. During the process I also picked a descriptive name for it – Momentum Racer.
The HTML5 canvas was pretty straightforward to use but I spent a good amount of time modifying the game play itself. Although my intention was just to test the technology, I tried to make it fun too. This started to make things a bit difficult as it was pretty easy to make the game too hard. After all, I played it way too many times while I tested my changes and new features.
Despite the reputation JavaScript has, it isn't that bad. Being a Java developer it took a moment to learn JavaScript's prototypal nature and to avoid potential pitfalls in the language. Having a good book to hand helped to develop a good JavaScript coding style - I can recommend Crockford's “The good parts of JavaScript”.
The most rewarding thing in this kind of web development is that you have instant feedback on your changes. Do you want to modify something? Just change the code and hit the refresh button on the browser. There is also a very active developer community around HTML5 and almost every week someone comes up with something awesome. It has been very interesting experience so far and I am looking forward to HTML5 becoming mainstream soon.
Links
- The game itself - www.momentumracer.com
- An audio waveform visualiser - www.momentumracer.com/electriccanvas
0 comments (show comments)