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.

9 comments:

  1. Entanglement on HTML5 does rock. Thanks for building such an enjoyable game. I look forward to learning more about the technology behind it.

    ReplyDelete
  2. It rocked when it worked. About a week ago it stopped working on my laptop. now it draws the background and the menu but won't draw the tiles at all. Center of the screen is empty and swap tile is empty. I can click on the board and see scores appear so it seems the game is running, just not drawing the tiles.

    Please help me fix it, I want to play it more.

    I want to second the suggestion that you publish the top 10 or top 100 boards. I'd like to see how people get massively high scores like that.

    ReplyDelete
  3. Hi Steve Hiner,

    Could you post what browser version you're using? Also, there have been a few reports about certain browser extensions preventing the game board from appearing if you want to try temporarily disabling a few to see if it makes a difference.

    Thanks!

    ReplyDelete
  4. Entanglement rocks! The only thing missing is an "Undo Last Click" option...

    ReplyDelete
  5. Your latest version of Entanglement is very pretty, but it runs as slow as molasses for both myself and my friend. What's up with that?

    ReplyDelete
  6. @ekestler - Thanks! We'll consider it. :-)

    @notmyra - Could you pass along your browser and version? We'll look into it; thanks!

    ReplyDelete
  7. We both use firefox 3.6.13.

    Thank you!

    ReplyDelete
  8. The patterns emerging look just like DNA, why don't you do a 3D version? :) Beautiful!

    ReplyDelete
  9. awesome game! really really well done.

    ReplyDelete

Please keep the conversation healthy and wholesome.