01 Nov 08 JavaScript Tile Puzzle

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.

<cffunction name="ShuffleArray" output="no">
	<cfargument name="tiles" required="yes"/>
	<cfset var random = StructNew()/>
	<cfset var i = ""/>
	<cfloop from="0" to="#arguments.tiles - 1#" index="i">
		<cfset random[i] = RandRange( 1111, 9999 ) />
	</cfloop>
	<cfreturn ArrayToList(StructSort(random, "numeric"))>
</cffunction>

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.

Tags: coldfusion, css, gd2, javascript, prototype, ruby, scriptaculous