I was tinkering a bit while watching the tube tonight and I thought it might be fun to make a simple JavaScript tile puzzle. Might look terrible in other browsers.

First step was to write a little ruby script (using the GD Graphics Library) to read in a file and cut it up into individual tiles. (Photoshop is for wussies)

if __file__ = $0
  #pass the image name, tile size through the command line
  t = Tile_Cropper.new ARGV[0], ARGV[1].to_i
  t.crop_tiles
end

Then I used a slightly modified method I read about in Ben Nadel’s blog to scramble the tiles.

A little bit of CSS magic:

#puzzle {
	width:      500px;
	margin:     0px;
	padding:    0px;
}
.piece {
	list-style: none;
	display:    inline;
	margin:     0px;
	padding:    0px;
}
img {
	border:     1px solid gray;
}

And finally I used scriptaculous and prototype for the obnoxious drag-and-drop sorting. Not that I’m complaining. the Sortable methods weren’t intended to be used for something like this.

function init() {
	Sortable.create('puzzle');
}

Complete the puzzle to find out what I was watching!. Here, I’ll give you a hint. It’s Dexter.

Download the code.