A Simple Sliding Puzzle

• Download source code - 61.6 KB

Introduction

This article explains how to make a simple jigsaw puzzle, and make a handsome monkey laugh. :-)

Background

This is pretty simple, and works mainly on location mathematics and the Bitmap object's Clone method. I did a cooler version of this, but lost it to Shift + Del :-O ...oooooooooooh! When I have a less busy head, I will do it again. But, you could have this to play with. It's not bad.

Using the Code

The most important part of this application is the gettokenpictures() method. Here, a Bitmap object's Clone function is used to slash the main image into 60x60 parts, having set the size of the image to 300x300 (which gives us 25 parts of 5x5).

Actually, set the image size by stretching it against the main picture box.

mainpic.Size = new Size(300, 300);

private void gettokenpictures()
{
    mainpic = new PictureBox();
    mainpic.Size = new Size(300, 300);
    mainpic.Location = new Point(0, 0);
    // Image.FromFile("main.jpg");
    mainpic.Image = JigsawCS.Properties.Resources.Main;
    mainpic.SizeMode = PictureBoxSizeMode.StretchImage;
    int top = 0;
    int left = 0;
    int k = 0;
    Bitmap bmp = new Bitmap(mainpic.Image);
    for (int i = 0; i < 5; i++)
    {
        for (int j = 0; j < 5; j++)
        {
            PictureBox tokenpic = (PictureBox)tokens[k];
            if (k == 24)
                tokenpic.Image =JigsawCS.Properties.Resources.blank;
                // Image.FromFile("blank.jpg");
            else
                tokenpic.Image = bmp.Clone(new Rectangle(left, top, 60, 60), 
                                 System.Drawing.Imaging.PixelFormat.DontCare);
            left += 60;
            k++;
        }
        left = 0;
        top += 60;
    }
}

So the line:

tokenpic.Image = bmp.Clone(new Rectangle(left, top, 60, 60), 
                 System.Drawing.Imaging.PixelFormat.DontCare);

creates an image from a rectangular part of the main image, and assigns it to a token, which is a picture box. A simple loop is used to manipulate the offsets (left and top).

You could add your own image(s) by uploading them into the application's resources, or keeping it/them in a location of your choice.

The line:

mainpic.Image = JigsawCS.Properties.Resources.Main;

in the above code sets the image, which you can do at runtime or before. So you could have:

mainpic.Image = JigsawCS.Properties.Resources.[You imagefile's name];

or:

mainpic.Image =  Image.FromFile([You imagefile's name]);

Enjoy! :-)

History

• 30^th October, 2008: Initial version
• 6^th March, 2023: Update