How to Make a Slide Puzzle from a WinForms Data Grid

We've used ComponentOne FlexGrid for data presentation and manipulation in business, but you can also use it to create a game. This blog walks through the steps to create a slide puzzle with our WinForms data grid.

You might have heard of Slide Puzzle, in which a player has to slide the puzzle pieces so that, when they're in the correct order, the image will be fully visible.

As with any application, the two most important considerations are user experience and business logic.

1. How will the players interact with the game?

2. How does the grid change and move as they interact?

User experience: How the players interact with the game

All but one cell in the FlexGrid will include an image of a puzzle piece. The last cell is left empty so the player has room to rearrange the other pieces. A move is only valid if its adjacent cell is empty.

When a player arranges the existing pieces in their correct places, the last piece automatically completes the picture:

Now, let’s look at how make it work.

Logic and Implementation: How the grid changes as the user interacts

To show puzzle pieces in grid cells, we store these pieces in a list, and then randomly set each piece in grid cells, using SetCellImage method.

gridPuzzle.SetCellImage(row, col, listPieces[piece]);
gridPuzzle.SetUserData(row, col, listPieces[piece].Tag);

As you see, SetUserData method has also been used. It helps us to see the current position of the image piece.

Next, we need to let the user move pieces to another cell if the adjacent cell is empty. All these moves have been handled in MouseClick event of FlexGrid.

private void gridPuzzle_MouseClick(object sender, MouseEventArgs e)
{
    //User is trying to move pieces
    HitTestInfo hti = gridPuzzle.HitTest(e.Location);
    int row = hti.Row;
    int col = hti.Column;
    gridPuzzle.BeginUpdate();
    if (gridPuzzle.GetCellImage(row, col) != null)
    {
        //Conditions that decide the move to above/below/left/right

        //Check if all the pieces are in correct position
        if(row == 1 && col == 2)
        {
             //Check result, and if it’s a win condition then complete the puzzle by adding last piece.
        }
    }
    gridPuzzle.EndUpdate();
}

How do we decide if the player has won the game? We check user data of each cell. If all the pieces are in their correct cells, the user wins:

bool? win = null;
for(int col = 0; col < 3; col++)
{
    if (win == null)
    {
         for (int row = 0; row < 3; row++)
         {
              if (row == 1 && col == 2)
              {
                   //All the pieces are in their correct places
                   win = true;
                   break;
              }
              else if (Convert.ToInt32(gridPuzzle.GetUserData(row, col)) != Convert.ToInt32(row.ToString() + col.ToString()))
              {
                   //At least one piece is not in its correct place
                   win = false;
                   break;
              }
         }

     else
          break;

Our slide puzzle is ready! Have fun! And if you too have created a game with any of our C1 controls, feel free to share with us.

Download the slide puzzle sample (zip)