HTML Canvas Experiment

I had a little bit of down time during a lunch break and wanted to experiment with something new. So I decided to have a go with some animation and event functions within an HTML5 canvas.

Taking inspiration from the Peter Molyduex Twitter account (https://twitter.com/PeterMolydeux) that is a brilliant micky take of the amazing game creator Peter Molyneux. This guy comes up with wildly ridiculous gaming ideas, based on the notion that Peter Molyneux is always trying to come up with new and exciting ways of pushing the gaming experience. I decided to come up with a ridiculous concept, and see if it would work.

Basically the game consists of you controlling a fly. The fly has a certain amount of energy which constantly depletes, and will fly around until it escapes out of a small open window in the room. If the fly runs out of energy before it reaches the window it will die and you will lose the game. The fly can recharge its energy by landing in the dog food bowl and eating until it has re-fuelled.

It’s just a quick little program but it demonstrates use of HTML Canvas, JavaScript and jQuery objects, animation and game techniques.

Take a look here: theflygame.mike-pink.co.uk

I think there’s a lot of potential with HTML5 and Canvas as it works on all new mobile devices, replacing the resource draining and out dated Flash technology. With a little though and clever coding all sorts of games, quizzes, and entertaining items can be created for small or large marketing campaigns.