Sliding-Tile Demo Using CSS from Jamie Wong's Version of the Fifteen Puzzle

See Jamie's AI-based solution to the classic Fifteen Puzzle. The graphic appearance of this puzzle is built solely from DIVs and CSS. Another implementation of the puzzle (without automated solutions) is on the Ultimate Game Solutions website, but it is not as pretty. Neither of these two implementations actually move DIVs in their containing NodeLists. Instead, they merely change the left or top property of a DIV's style. Jamie's moving DIVs have their position property set to absolute, but Ultimate Game Solutions has their position property set to fixed. There are other implementations of the Fifteen Puzzle (with and without automatic solvers) that are built from TABLEs and CSS.

A test of Zen's direct-manipulation interface (DMI) will be whether a user can use it to move the cells to solve the puzzle. Not enough of the DMI has been coded to make this possible yet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15