Canvas Quest

I finally finished my first true game “CanvasQuest”.

In a way, I’ve been working on this game for years — playing with different technologies when they come out like Konfabulator and Adobe AIR. I settled on HTML5 and canvas fairly recently though, and I happened to be looking at a little demo I created years ago called CanvasQuest – it was a little test demo of a Roguelike game using canvas, and it was fun to make (doesnt work in Chrome, sorry – but read on!). About a month ago I had the inspiration to rebuild it from scratch, using today’s technology and base it on YUI. I was able to really simplify the code in many ways with YUI 3, and really only scratched the surface of what I could do with it. I also incorporated what I’ve learned about CSS3 transitions, animations, etc as well as LocalStorage, tabs, and other YUI bits and bobs.

The real success here though was my (newfound) ability to really focus on what the core features should be, and what the “next” thing every day that I should work on would be. Often I would only have 20 mins between watching kids, or I would be so tired from the day that I could barely keep my eyes open long enough to write a line or two of code. I learned how to code in a “snacking” sort of framework, where I would have some idea each day what I wanted to get done, break it down into pieces that were self-contained, and could be done in 10-20 minute stints of coding. For instance, I needed to add a “store” panel. In one stint I would go into the HTML and add the tags. In another stint I’d go into the javascript and wire up the click events. Every time I would add something new, it would always follow some simple rules. It would be self-contained, not break anything, and build on the game to progress it forward. I have my 4 year old son, Blaze, to thank for this approach in many ways, because about 20-30 mins would be about all he’d give me in terms of time before he’d want me to play with him, or take care of some minor catastrophe :)

It was really an amazing experience. Every time I’d have 20-30 mins I’d pop up my Aptana Editor, sync with the repository, and code some other new feature or fix a nagging bug. I’ve never had quite the same feeling – akin to having an itch you cannot scratch unless you wrote some HTML or build up a javascript function. I’ve worked on many projects before, but everything seemed to just come together with this. I had recently written a number of articles on my blog about interesting CSS effects, and one about creating a custom api with YQL. I found that virtually everything I’d been toying around with I could bring to bear on this game. I also realized fairly late in the development that I needed a level editor desperately. Building even just one level was a painstaking process that virtually halted my progress on the game. In a flash of insight, I realized I could not only work on a level editor, but incorporate it into the game and even add a new level of meaning to the game’s name “CanvasQuest”. Since, in the end, you get a “magic canvas” — but this canvas is an HTML5 one that you can build worlds of your own with.

Anyway, all in all I feel like I’ve finally created a ‘game‘ – albeit one that is not balanced or makes much sense, but one that you can finish and build on yourself. I’m already planning my next game, which will take two very different activities and create something new and I hope fun.

I’ll post a link here after the Mozilla Game ON Compo runs.

  • richtaur

    Congratulations! You should be proud — it’s a great feeling finishing a game!

  • Wilf

    Nice work. Developing your own game and bringing your own ideas to fruition is an awesome feeling.
    I look forward to seeing your future work as well.