A couple months ago there seemed to be a handful of blogs posting about new HTML5 canvas games that they were creating, most spawning off of Flappy Birds’ popularity. The premise being that they wanted to challenge themselves to recreate a simple game using the modern web client stack (HTML5, CSS3, and JavaScript) instead of a specific mobile platform, such as iOS or Android. Having developed arcade style Flash game in the past, and being a web developer, I thought it was finally time that I put together my first HTML5 canvas game. As with many of my personal projects I refused to use any SDKs or libraries, but instead develop the entire project from the ground up.
After many hours of work, spread across a couple weeks, and completely rewriting the codebase a couple times I ended up with a simple game called Hangry Shark. The gameplay focuses on a shark looking for a meal that, with nothing else around except clownfish, must avoid touching the jelly fish. Being purely a personal project I decided to only develop and test the game on webkit powered web browsers. Initially the game was developed using DOM elements for all game sprites and user interface elements, which has its benefits, but due to significant performance limitations the codebase was rewritten to allow all game sprites to be drawn via HTML5 canvas. Doing so allowed the game to run smoothly on desktop devices at high resolutions and mobile devices, including mobile devices several years old such as the iPhone 4s. Using techniques such as only one update loop for all game logic and drawing, as well as requestAnimationFrame for the timing of the loop which also ensures the graphics adapter is used for drawing rather than the CPU, helped to increase performance.
Ultimately it was a fun project, I learned a lot, and I hope to use it as a starting point for future projects. You can check out the game below, or click on the link to open it in a new window. Keep in mind, the game is technically a web-app that supports click and touch events, and uses iOS web-app constructs so it can be added to the home screen to behave as if it were a native app. Give it a try and let me know what you think!
Leave a Reply