Nine Pieces Puzzle

Some time ago I decided to try to transfer a simple puzzle game to the computer platform. The puzzle has nine pieces. The pieces has form of a square and are equal in size. The pieces must be placed in a 3 by 3 grid and the challenge of the puzzle is to place all pieces so that the edges match. Each edge is decorated with half an image. There are 4 different images cut in half so that a top half matches a bottom half. See figure 1 for an example of the puzzle.

This post is the first in a series describing the process of writing the Nine Pieces Puzzle game. Hopefully you will find the game challenging and the story of its making interesting. You can download the game here.

My son and I was trying to solve the puzzle when it occurred to me that I could write some code to verify that the puzzle could be solved at all. Then I suggested that we should try to port the game to the Windows Mobile phone I got. He agreed and started to analyze the pieces. I instructed him to write the first letter of the most dominant color of the image (B, G, O, S) as well as which half (1 = Top, 2 = Bottom). When he was done he had produced the following list of piece definitions:

• S2G2B1G2
• S1O2B2O1
• S2B1G1S1
• G1O2O2B2
• S1O1G2G1
• S2B1B2O2
• G1B1S2O1
• S2B1O1O1
• G1S1G2B2

The piece definition holds the names (LETTER + TOP/BOTTOM) of the four edges (changed name to Side in the Model): North, East, South, West.

My first concern was to prototype the piece layout and rotation, so I created some simple images and cut them in half.

Each piece started out as a Canvas with 4 images laid out on top of each other and applying rotations (layout transforms). By placing them in a Grid with 3 columns and 3 rows I had quickly achieved my goal from a visual perspective. The XAML of a piece was defined thus:

<Canvas Width="128" Height="128">
    <Image x:Name="N" Source="B1.png" RenderTransformOrigin="0.5,0.5">
        <Image.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleX="0.25" ScaleY="0.25" />
                <SkewTransform/>
                <RotateTransform Angle="0"/>
                <TranslateTransform/>
            </TransformGroup>
        </Image.RenderTransform>
    </Image>
    <Image x:Name="E" Source="B1.png" RenderTransformOrigin="0.5,0.5">
        <Image.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleX="0.25" ScaleY="0.25" />
                <SkewTransform/>
                <RotateTransform Angle="90" CenterX="64" CenterY="64" />
                <TranslateTransform/>
            </TransformGroup>
        </Image.RenderTransform>
    </Image>
    <Image x:Name="S" Source="B1.png">
        <Image.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleX="0.25" ScaleY="0.25" />
                <SkewTransform/>
                <RotateTransform Angle="180" CenterX="64" CenterY="64" />
                <TranslateTransform/>
            </TransformGroup>
        </Image.RenderTransform>
    </Image>
    <Image x:Name="W" Source="B1.png">
        <Image.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleX="0.25" ScaleY="0.25" />
                <SkewTransform/>
                <RotateTransform Angle="270" CenterX="64" CenterY="64" />
                <TranslateTransform/>
            </TransformGroup>
        </Image.RenderTransform>
    </Image>
</Canvas>

The next step was to create the basic model. See my next post (not written yet).

More to come…