Impossible Hangman

Bildschirmfoto 2013-05-14 um 20.59.25I tried, again, to participate in Olimex’s weekly programming challenge, I failed, again. I missed the deadline. My weekends are simply to packed. On the other hand, I intentionally allowed me the time to tune the solution into something presentable. For the impatient, look here. The sources are over at GitHub.

At first I thought about taking the very basic route. No libraries or frameworks, just plain and simple HTML, CSS and CoffeeScript. But the first task: “putting the necessary boilerplate into the HTML file” made me hesitate. I quickly backed up to the, by now familiar path Meteor provides.

I always wanted to experiment a little bit with HTML5 canvas, and this challenge gave me the opportunity. While researching, I stumbled over fabric.js. Unfortunately, the integration wasn’t as straight forward as I had hoped and as I looked into the documentation, I couldn’t find a really strong reason to use the library.  The task of drawing a hangman looked really simple. Plain canvas was supposed to be easy enough and straight forward. For the curious, the ‘hangHim()‘ function does the drawing.

I don’t mind to bother you with the whole journey. Some aspects I found out, will be covered in separate posts, because I didn’t need them in the final solution. Some overly complicated things are just brainchildren of my own stupidity. I should talk about the main glitch I programmed. Well, the challenge was to make an impossible hangman game, by switching the searched-for word, in case the player would actually find a letter of it. That’s mean, heh?

My crank mind settled early on the idea of making inverse indexes: for each letter of the alphabet create an array of words, that doesn’t include the letter. This way, I convinced myself, I could later intersect those word arrays easily and at low cost. I thought to be really clever. To make it worse, I decided to use Meteor Collections for the static set(s) of words. With the full dictionary – the one linked from the challenge (around 130.000 terms) – that resulted in around 16MB of data to be transferred to the client. A nightmare for any webapp.

As I realized, that it’s not enough to consider the existence of letters – in case a letter is found, the position of the letter is also important – I kicked those inverted lists out and switched to good ol’ regular expressions. Later I dismissed Meteor Collections completely and decided to put the words straight into an array. I used JavaScript here, to circumvent the lengthy compilation. This resulted in comparatively lightning fast load times. Now only around 1MB have to be transferred, once. The browser can cache the words array easily.

I guess, despite the missing comments, the code speaks for itself. If you have any questions feel free to ask.

One thought on “Impossible Hangman

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s