Software: SVG Sliding Tile Puzzle

I wanted to create a simple interactive SVG demonstration, so I wrote this sliding tile puzzle (see http://kamhungsoh.com/000e.xhtml).

The initial coding was straightforward and quick. Only when I wanted to make the demonstration work in MSIE6 and ASV3 did I run into trouble. The first problem was that ASV3 did not process events for SVG elements if the SVG code was inline XHTML, so onclick didn't work. The workaround was to put all the SVG code in a separate .svg file and get the user to open that file. The second problem was that MSIE6 (or ASV3) did not accept a function reference as the first argument to the setTimeout() function, unlike Firefox and Opera. That stumped me for about half an hour until I found an example that used a string as the first argument.

1 May 2006: Tested the program on another Windows XP computer using MSIE6 + ASV3, and it works without needing to open another window. It must be some setting on my notebook.

2 May 2006: In a Gamedev.net thread, Enselic points out that the shuffle doesn't usually move the "1" and could be replaced by a randomizer that ensures that the initial configuration is solvable. I found some maths required to determine if a sliding tile puzzle can be solved in Kevin Gong's Analysis of the Sixteen Puzzle.

Software: SVG Conway's Game of Life

Between driving 2 * 650 km, amusing the kids and visiting my in-laws over the Easter break, I managed to put together an SVG version of John Conway's Game of Life. The interesting bits are:

• Using SVG lines to create a raster by twiddling the lines' stroke-dasharray attribute.
• Making the demonstration work for Firefox and Opera 9 was straightfoward, but I had no idea how to make it work for MSIE + ASV because MSIE does not support the DOM function createElementNS().
• The demonstration ran like a dog until I spent some time optimzing the Javascript code. It's still not blazing fast but I can't think of any more tricks.

I picked up the stroke-dasharray tip from Kevin Lindsey and Martin Honnen showed me how to use ASV's SVGDocument properly. See the Yahoo! svg-developers mailing list for the discussion.

Software: Javascript SVG Analogue Clocks

After a weekend's break due to real life intrusions, I finished a demonstration of SVG-drawn analogue clocks animated by Javascript. It's the simplest thing I could imagine that could not be easily done using just XHTML + Javascript because it involves rotating the hands of a clock. Along the way, I found some unexpected gotchas involving CSS and SVG (see my programming notes below the clocks).