Click here to Skip to main content
13,557,390 members
Click here to Skip to main content
Add your own
alternative version


42 bookmarked
Posted 28 Mar 2004

Sliding Puzzle Game

, 28 Mar 2004
Rate this:
Please Sign up or sign in to vote.
A sliding tile puzzle game.


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;
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)));

    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
    } // 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 == 

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);
                        case 3:    Functions.MoveDown(bx);


        // 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);
                        case 2:    Functions.MoveLeft(bx);


        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);
        System.Data.OleDb.OleDbDataAdapter da = 
                           new OleDbDataAdapter (sql,Conn);
        DataSet ds = new DataSet ();
        da.Fill (ds,"Bitmaps");
        DataTable dt = ds.Tables["Bitmaps"];
        DataRow dr;
            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 ();
        Conn.Close ();
    return b;

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


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


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

India India
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionCode Pin
Member 136775365-Mar-18 6:19
memberMember 136775365-Mar-18 6:19 
Questionneed help Pin
tausif ahmad16-Feb-18 17:03
membertausif ahmad16-Feb-18 17:03 
SuggestionMessage Closed Pin
13-Jun-12 2:31
memberMember 471378513-Jun-12 2:31 
QuestionAbout picture slider Pin
1r2e3s4hma5-Mar-12 3:51
member1r2e3s4hma5-Mar-12 3:51 
Questioncodes in VB6 Pin
aerolei199213-Feb-12 22:44
memberaerolei199213-Feb-12 22:44 
GeneralCode Works Well Pin
Z3R0X4-Dec-11 15:38
memberZ3R0X4-Dec-11 15:38 
GeneralRe: Code Works Well Pin
dondeso29-Jan-12 7:22
memberdondeso29-Jan-12 7:22 
GeneralMy vote of 4 Pin
francis selvam5-Oct-11 23:25
memberfrancis selvam5-Oct-11 23:25 
Questionmeyaw Pin
A15093-Jul-11 18:11
memberA15093-Jul-11 18:11 
Generalhello Pin
nebula5-May-11 9:50
membernebula5-May-11 9:50 
Generalhelp me pls. . Pin
jobelle1918-Feb-11 22:14
memberjobelle1918-Feb-11 22:14 
Generalhelp Pin
Anastasija Jovanoska15-Apr-10 6:12
memberAnastasija Jovanoska15-Apr-10 6:12 
QuestionCould I have a copy? Pin
Alwayss8-Mar-10 15:04
memberAlwayss8-Mar-10 15:04 
QuestionCan i get this in C please? Pin
jamorg013-Oct-09 7:26
memberjamorg013-Oct-09 7:26 
GeneralSUPER IN NEED of HELP in Puzzle.... c# Pin
Refie14-Jul-09 17:20
memberRefie14-Jul-09 17:20 
GeneralAStar 8 Puzzle heuristic Pin
Ozan BABACA9-Apr-09 6:07
memberOzan BABACA9-Apr-09 6:07 
GeneralRe: AStar 8 Puzzle heuristic Pin
DavidNohejl23-Apr-09 8:41
memberDavidNohejl23-Apr-09 8:41 
GeneralHelp Me ! Pin
hamed32219-Jan-09 5:09
memberhamed32219-Jan-09 5:09 
aybars212-Nov-08 11:44
memberaybars212-Nov-08 11:44 
Generalhie Pin
vinpaul27-Oct-08 6:16
membervinpaul27-Oct-08 6:16 
Generalneed code also Pin
boyhanquoc16-Oct-08 5:44
memberboyhanquoc16-Oct-08 5:44 
Generalhello Pin
sexyhoney31-Mar-08 2:17
membersexyhoney31-Mar-08 2:17 
GeneralLogical Errors Pin
tareqGamal16-Feb-08 16:02
membertareqGamal16-Feb-08 16:02 
GeneralRe: Logical Errors Pin
sexyhoney31-Mar-08 2:19
membersexyhoney31-Mar-08 2:19 
Questionplease! Can you help me? Pin
loan12-Dec-07 21:39
memberloan12-Dec-07 21:39 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02-2016 | 2.8.180515.1 | Last Updated 29 Mar 2004
Article Copyright 2004 by gr8tushar
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid