HTML5 Helicopter
5th August 2010
Instructions
The map scrolls from the right to left, your job is to not crash into the walls and avoid the obstacles for as long as possible. Hold the ENTER key or the Left Mouse Button to activate thrusters, this will make yur helicopter rise, when you release the helicopter will fall. Have fun!
About
After having some fun writing pacman in HTML5 I decided to write another classic game, this time Helicopter.
Again this a work in progress, this is still pretty rough around the edges, but its fun to play so I published it as soon as possible. Code can be found on Github.
TODO
- Improve the graphics
- Add / Improve Audio
- Tweak gameplay and details
Things to consider
- Modenizr – If you write your own checks for browser capabilities, you will get them wrong, just use Modernizr.
- Flash Of Unstyled Text – @font-face is still somewhat problematic, Firefox will display the font using a fallback until the font has loaded, Webkit will not show anything until the font has loaded, if you write text to canvas using @font-face on Webkit before the font has loaded, Webkit will not show anything.
I have used Googles WebFont Loader which has an api that provides callbacks for when a font has loaded, this isnt foolproof yet though as it can still attempt to write text before it has loaded, I have also put in a shim for each font loaded <span style="font-family:myfont;"></span> which helps.
Comment on Hacker News