HTML5 Experiment 1 – Burst the Balloon

HTML5 seems to be the buzz word now. People around me are excited about HTML5 or already working on something with HTML5.

Curious to know what the hell is this HTML5, I started reading something from https://developer.mozilla.org/en/HTML/HTML5. Well, truth be told, I finished the overview in say 15 minutes and didn’t know what exactly to do after that. I was in no mood to implement any of the HTML5 features in interviewstreet now (Btw, if you don’t know, interviewstreet.com is my company where we simplify the hiring process by assessing the candidates using automated tests.)

Then for the next 15 minutes, I started playing around with some of the demos at http://html5demos.com/. They are cool, but nothing new or mind blowing. We’ve already seen these stuff in flash and javascript using libraries like jquery, prototype etc. So, now the browser gives native support to these features. What’s the big deal?

I guess unless I create something using HTML5, I’m never gonna realize it’s true potential. I started with the canvas tag.

So, after loads of google search, copy pasted code and a few cups of coffee, here is my first HTML5 game. 🙂 This is the screenshot of the game.

You can play the game at http://sp2hari.com/html5/burst_the_balloon.html.

TODO:
1. Some sort of levels in the game, where you are taken to the next level once you shoot all the balloons.
2. Display score, time taken and other details.
3. Two player game, where two players can shoot arrows from both the directions and one who gets the highest score wins.
4. A special balloon which gives you more score if you shoot it.
5. Better animation for arrow and balloon. Right now, the balloon looks like an egg.

Anyone interested in playing/learning with HTML5 can take up this code and implement something from the above TODO list. Do mail be back at sp2hari AT gmail DOT com if you implement anything or even if you have anything to say about this game 🙂