Sliding Puzzle Game

• Download demo project - 965 Kb
• Download source - 9.74 Kb

Introduction

In this article, you can learn how to edit images without using Windows API or other functions. You will also learn how to dynamically move and edit the controls.

While making this program, I needed some functions which could crop, resize, clip the image. But .NET framework doesn't provide us with any of such tools. So I wrote all the functions on my own because I did not wanted to use any of the APIs.

Objective and How to play the Game

This game has three modes:

1. Number Mode (I haven't programmed it yet, but it's very easy to do).
2. Picture Mode.
3. Number and Picture Mode.

In this game, there are 15 tiles or buttons which you have to arrange numerically, or if you are playing in the picture mode then you have to arrange the titles in order to get the image as shown on the right side.

In this game, there is one empty tile where other tiles can come. Only the adjoining tiles can take its place. Whenever you click a tile (button), it shifts towards the empty block if there is a way. Like this way, you have to arrange the tiles so as to make the image as shown in the figure on the right side.

Using the code

First of all, I created a Panel. I added 15 buttons to it. I stored all the buttons in an ArrayList alAllButtons. Each button's size is 80x80 pixel.

Now I load the default image and store it in a variable MainBitmap.

Now I have to make 15 pieces of this image and that to be of size 80x80 pixels. Here is the code to do that:

// Make a Temp ArrayList which will store the small Images.

ArrayList ilTemp = new ArrayList ();
int h,v;
h=v=0;
for(int k = 0; k <15; k++)
{
    // Create a new Bitmap of 80x80 pixels.

    Bitmap b = new Bitmap(x,y);

    //Copy each pixel from the Main bitmap 

    //and paste is on the New one, just created

    for(int i =0; i< x; i++)
                    for(int j = 0; j< y; j++)
                        b.SetPixel (i,j,ToBeCropped.GetPixel ((i+h),(j+v)));
    ilTemp.Add(b);

    h+=80;
    if (h == 320)
    {h=0; v+=80;}

}
return ilTemp; // Return the ArrayList.

Now add Images to the Buttons. This is achieved with the help of the following code:

public void AddImagesToButtons()
{
    ilSmallImages = ReturnCroppedList(MainBitmap,80,80);
    button1.Image  = (Image)ilSmallImages[0];
    button2.Image = (Image)ilSmallImages[1];
    button3.Image = (Image)ilSmallImages[2];
    button4.Image = (Image)ilSmallImages[3];
    button5.Image = (Image)ilSmallImages[4];
    button6.Image = (Image)ilSmallImages[5];
    button7.Image = (Image)ilSmallImages[6];
    button8.Image = (Image)ilSmallImages[7];
    button9.Image = (Image)ilSmallImages[8];
    button10.Image = (Image)ilSmallImages[9];
    button11.Image = (Image)ilSmallImages[10];
    button12.Image = (Image)ilSmallImages[11];
    button13.Image = (Image)ilSmallImages[12];
    button14.Image = (Image)ilSmallImages[13];
    button15.Image = (Image)ilSmallImages[14];

}

Now I have to jumble all the buttons so that they all mix up and the user can play the game.

//This function Randomizes the Buttons

private void Randomize ()
{
    Random r = new Random ();
    Button tempBtn = new Button();
    for (int i =0; i < 100; i++)
    {
        // Choose a Random Button from all the buttons present

        tempBtn = (Button) alAllButtons[r.Next(alAllButtons.Count )];

        // Move it

        MoveButton(tempBtn);                
    } // Repeat this loop 100 times.


}

Now, whenever a button is clicked, it has to be moved to the empty point. A button is only moved when it is either horizontally or vertically inline with the empty point. This is checked with the help of the following code:

EmptyPoint.X == ClickedButton.Location.X || EmptyPoint.Y == 
                                               ClickedButton.Location.Y

If this condition is satisfied then the button(s) is moved accordingly:

private void MoveButton(Button ClickedButton )
{
    // Proceed with the function only if the button is either horizontally or

    // vertically inline with the Empty Point 

    if(EmptyPoint.X == ClickedButton.Location.X 
        || EmptyPoint.Y == ClickedButton.Location.Y)
    {
        // After the button will be moved the new Empty Point is gonna change

        // So store the current position of the Button in a tempPoint

        Point tempEmptyPoint = new Point ();
        tempEmptyPoint = ClickedButton.Location;

        // Find out in which direction we have to move the Button

        int d = Direction (ClickedButton.Location ,EmptyPoint);

        // Follow this procedure if we have to move the button Up or Down

        // i.e. the button is vertically inline with the Empty Point

        if(EmptyPoint.X == ClickedButton.Location.X )
        {
            // There could be some other buttons that are in b/w the clicked

            // button and the EmptyPoint. So we'll have to shift all the buttons

            foreach(Button bx in panel1.Controls )
            {
                if (((bx.Location.Y >= ClickedButton.Location.Y) 
                    && (bx.Location.Y < EmptyPoint.Y ) 
                    &&(bx.Location.X    == EmptyPoint.X )) 
                    || ((bx.Location.Y <= ClickedButton.Location.Y) 
                    && (bx.Location.Y > EmptyPoint.Y ) 
                    &&(bx.Location.X == EmptyPoint.X )))
                {
                    switch (d)
                    {
                        case 1:    Functions.MoveUp(bx);
                            break;
                        case 3:    Functions.MoveDown(bx);
                            break;
                    }
                }

            }
        }

        // Follow this procedure if we have to move the button Left or Right

        // i.e. the Clicked button is horizontally inline with the Empty Space

        if(EmptyPoint.Y == ClickedButton.Location.Y )
        {
            // There could be some other buttons that are in b/w the clicked

            // button and the EmptyPoint. So we'll have to shift all the buttons

            foreach(Button bx in panel1.Controls )
            {
                if (((bx.Location.X >= ClickedButton.Location.X) 
                    && (bx.Location.X < EmptyPoint.X ) 
                    && (bx.Location.Y == EmptyPoint.Y  )) || 
                    ((bx.Location.X    <= ClickedButton.Location.X) 
                    && (bx.Location.X >EmptyPoint.X ) 
                    && (bx.Location.Y == EmptyPoint.Y )))
                {
                    switch (d)
                    {
                        case 0 : Functions.MoveRight(bx);
                            break;
                        case 2:    Functions.MoveLeft(bx);
                            break;
                                    
                    }

                }
            }
        }

        EmptyPoint = tempEmptyPoint;    
    }
}

A ChangeImage function loads a random image from the database:

    Bitmap b = new Bitmap (320,320);
    Random r = new Random ();
    string sql = "Select * from Bitmaps";
    string strConn = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + 
                                  Application.StartupPath +"\\game.mdb";
    OleDbConnection Conn = new OleDbConnection (strConn);
    try 
    {
        Conn.Open();
        System.Data.OleDb.OleDbDataAdapter da = 
                           new OleDbDataAdapter (sql,Conn);
        DataSet ds = new DataSet ();
        da.Fill (ds,"Bitmaps");
        DataTable dt = ds.Tables["Bitmaps"];
        DataRow dr;
        do
        {
            dr= dt.Rows [r.Next (dt.Rows.Count )];
            b=(Bitmap) Bitmap.FromFile (Application.StartupPath 
                          + "\\Images\\"+dr["Picture"].ToString ());
                    
        }while(dr["Type"].ToString () != c.ToString ());
            
    }
    catch (Exception ex)
    {
        MessageBox.Show (ex.Message.ToString ());
        Conn.Close ();
    }
    finally
    {
        Conn.Close ();
    }
    return b;
}

The rest of the code is self explanatory. For any help or information, please feel free to contact me.

History

First version: 18 March 2004 (On my birthday).