Wednesday, December 29, 2010

Entanglement on html5rocks.com

Curious about how we made the hexagonal tiles for Entanglement? I go into all the technical details in our case study on html5rocks.com:
This past spring (2010) I took interest in the rapidly increasing support for HTML5 and related technologies. At the time, a friend and I had been challenging each other in two-week game development competitions to hone our programming and development skills as well as bring to life the game ideas we were constantly tossing at each other. So, I naturally began incorporating HTML5 elements into my competition entries to gain a better understanding for how they worked and be able to do things that were nearly impossible using earlier HTML specs.
Of the many new features in HTML5, the increasing support for the canvas tag offered me an exciting opportunity to implement interactive art using JavaScript, which led me to try implementing a puzzle game now called Entanglement. I had already created a prototype using the back of Settlers of Catan tiles, so using this as a blueprint of sorts, there are three essential parts to fashioning the hexagonal tile on the HTML5 canvas for web play: drawing the hexagon, drawing the paths, and rotating the tile. The following goes into detail outlining how I accomplished each of these in their current form. 
And then I dive into all the HTML5 goodness. Click through to read the rest of the article if you enjoy programming or seeing how one part of Entanglement is put together.