A DOM-Based Sliding Puzzle: The Architecture

A DOM-Based Sliding Puzzle (2)

The Puzzle's Architecture

The architecture of the puzzle is based on the DIV container (see sketch below). This container includes 11 HTML tags, numbered 0 to 10. The tag types are also shown in the sketch below. Every one of the nine playing positions is an IMG tag. To force the wrapping around of the images, we use the BR tag to break the current line and begin a new line. This is the reason why we put the two BR tags on the right hand side of the DIV container below.