Tile Puzzle

Image Courtesy:  Thought Collage

My 8 year old son found an old sliding tile puzzle and liked it a lot. This gave me the idea of having the soft copy of it. We searched and found so many of them on Internet. But nothing beats the joy of using your own creation and we (my son too) decided to implement one more for ourselves.

If you are not interested in the story and just want to play or look at the code, jump to the results.

Choice of Technology:

Guess what technology we choose for this?

We decided to keep it very simple. Another requirement was to use the same app on laptop as well as on phone.

Very quickly, the skeleton in HTML was ready. 

For implementing the functionality, I took two liberties. One was using jQuery instead of native Javascript and the other was using Coffeescript (and compiling into Javascript) instead of writing directly into Javascript.

Initial Cut:

My son got exited as I shown him the blank boxes :) but start getting bored when I was writing logic for getting the shuffled list of numbers. He started working with me as soon as I shown him the boxes filled with numbers. And he spotted a bug .... simple sequence number gotcha .... two squares were empty instead of one.

Enhancement Phase 1:

After I gave him initial cut to play, he came up with two enhancement requests:

1. The hand pointer should show up only on movable tiles (actually it was a bug)
2. Moving only one tile per click is cumbersome. Allow moving any number of tiles (max 3 is  possible) in one click.

Enhancement Phase 2:

Now as number puzzle started working fine he felt adding picture as it happens on the back of number puzzle. 

On the following morning, when I was talking about it to a programmer friend, he thought I did something very complex and technically challenging :) and fired so many questions:

You must have used a image processing library for creating small tiles out of a big picture. 

And when the puzzle completes, you must be rejoining the tiles to match it with the original picture. 

Does Javascript has support for Image processing as well?

What language you used at backend for this? What kind of APIs have you created? 

Image Courtesy: Satellite Signals

He felt some disappointment when I told that I did not do any fancy stuff and my puzzle went colorful with picture tiles just working with CSS. I used the image in background for each tile and used different background positions so that the correct portion of image is visible.

Enhancement Phase 3:
Kids (especially the movers one) get bored very quickly. This time he wanted to use his own picture instead of what I provided. So I just added a text box so that user can provide an image on the fly.
After completing one game he came back saying I should add the same code that runs in page load on the button click as well because the game is not restarting when he changes the image.

The Result:
As result of the exercise, I earned a lot of happiness and joy (and understanding of some logic) from my son, a puzzle hosted and is available to everyone to play, a code repository at Github, and this blog post :)