Click here to Skip to main content
Click here to Skip to main content
Go to top

Sliding Puzzle Game

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

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

License

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

Share

About the Author

gr8tushar
Architect
India India
No Biography provided

Comments and Discussions

 
SuggestionWPF version of Fifteen Puzzle Game PinmemberMember 471378513-Jun-12 2:31 
QuestionAbout picture slider Pinmember1r2e3s4hma5-Mar-12 3:51 
Questioncodes in VB6 Pinmemberaerolei199213-Feb-12 22:44 
GeneralCode Works Well PinmemberZ3R0X4-Dec-11 15:38 
GeneralRe: Code Works Well Pinmemberdondeso29-Jan-12 7:22 
GeneralMy vote of 4 Pinmemberfrancis selvam5-Oct-11 23:25 
Questionmeyaw PinmemberA15093-Jul-11 18:11 
Generalhello Pinmembernebula5-May-11 9:50 
Generalhelp me pls. . Pinmemberjobelle1918-Feb-11 22:14 
Generalhelp PinmemberAnastasija Jovanoska15-Apr-10 6:12 
QuestionCould I have a copy? PinmemberAlwayss8-Mar-10 15:04 
QuestionCan i get this in C please? Pinmemberjamorg013-Oct-09 7:26 
GeneralSUPER IN NEED of HELP in Puzzle.... c# PinmemberRefie14-Jul-09 17:20 
GeneralAStar 8 Puzzle heuristic PinmemberOzan BABACA9-Apr-09 6:07 
GeneralRe: AStar 8 Puzzle heuristic PinmemberDavidNohejl23-Apr-09 8:41 
GeneralHelp Me ! Pinmemberhamed32219-Jan-09 5:09 
QuestionHelllp! Pinmemberroblewis714-Dec-08 11:48 
GeneralAYBARS YOKAŞ-SLIDING PUZZLE GAME Pinmemberaybars212-Nov-08 11:44 
Generalhie Pinmembervinpaul27-Oct-08 6:16 
Generalneed code also Pinmemberboyhanquoc16-Oct-08 5:44 
Generalhello Pinmembersexyhoney31-Mar-08 2:17 
GeneralLogical Errors PinmembertareqGamal16-Feb-08 16:02 
GeneralRe: Logical Errors Pinmembersexyhoney31-Mar-08 2:19 
Questionplease! Can you help me? Pinmemberloan12-Dec-07 21:39 
Generalinstead of set bitmap Pinmemberjlechem8-Dec-07 13:37 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140916.1 | Last Updated 29 Mar 2004
Article Copyright 2004 by gr8tushar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid