Dragging and dropping dragons in HTML5

After going a little too far avoiding HTML5, I decided to take advantage of some HTML5 features, and I built Dragon Drop. It utilizes animations with the canvas element, browser support for the audio element, and of course native support for drag-and-drop!

Some useful URLs that I found were:

• Breakout Canvas Tutorial - builds a game starting from the basics and allows you to run the code at each step.
• HTML5 Drag and Drop Demo - a simple demo.
• HTML5 Audio Cross Browser support - an ajaxian summary of this audio element post.
• Audacity - I used this to record the sound effects (with some help from my lovely fiance—Lauren), and it was useful for removing laptop fan noise from the recordings. Also the music was written using GarageBand.
• Low Res Paint - how I drew the dragons and the huts!

The canvas element was the most fun to work with, unfortunately the drag and drop and the Audio element both felt a little hacky—the prior because the events felt bloated and the latter because the different file support was annoying. Regardless, having fun dropping dragons!

Play Dragon Drop »