Sliding Tile Puzzle displayed using SVG. If you are using Firefox 1.5 or Opera 9, just press on a tile to move it into the empty square. If you are using Microsoft Internet Explorer 6.0 (MSIE6) with the Adobe SVG Viewer 3.03 (ASV3), you may have to open the SVG file in another page or window first (see Programming Notes).
Press the 3x3 or 4x4 button to generate a different sized puzzle. Press the Shuffle button to move tiles at random. Press the Random button to randomize tile positions for the current puzzle.
Puzzle Notes
The slight highlight on the top left corner of each tile is done using a linearGradient. 6 May 2006: Toned down the garish tile colours.
6 May 2006. After feedback from Encelic, implemented randomization function which ensures that the puzzle is solvable. A sliding tile puzzle is solvable (or valid) if the total number of inversions is even. Starting from the top-left hand corner, moving left to right, top to bottom, the number of inversions of a tile is the number of times that tile's value is bigger than another tile's value. Repeat this process for all tiles to get the total number of inversions.
Programming Notes
MSIE6 + ASV3 does not process mouse events (such as onclick) for individual SVG elements (such as rect) if the SVG code is in the XHTML code (see Inline SVG by Schepers) and for some computers (my notebook, for example) if the SVG image is presented in an object element. This problem does not happen if you are using the Firefox or Opera browsers.
MSIE6's setTimeout() function doesn't seem to allow a function reference as its first argument.
I spent more time making this demonstration work in MSIE6 + ASV3 than in the initial programming. MSIE6 lack of support for modern standards is a pain in the neck.
