Build a tile based game

• Download source files - 7.14 Kb
• Download demo project - 6.65 Kb

This is "The Time Waster", a game I originally saw on the Mac that up till now has been missing a .NET port of the game. I believe this is the only game Mac's were designed to play, so really a PC should have no problem with cycles to spare :-)

Step 1

Modifying your form's startup

First thing is, we need to change the way your form starts so we can control the loading procedure. This is fairly simple to accomplish. What you need to do is create a Shared Sub Main in your main program and set that as the startup. Don't forget to name your form frmSlider.

Shared Sub Main() 
    Application.Run(New frmSlider()) 
    Application.Exit() 
End Sub

This will start up the form named frmClock. Then when it's done, exit the application. Now we need to modify the new procedure for the form and insert a me.show command and an initGame command.

Public Sub New()
    MyBase.New()
    InitializeComponent()
    initGame()
End Sub

All that's left to do now is change the project's startup properties to make it use our Shared sub Main and not the standard startup procedure. Go to Solution Explorer and right click on your project's properties and change the Startup Object.

Step 2

Creating the class

Public Class cPieces
    ' Cell this number is in

    Public position As Integer = 0
    
    ' What number is this

    Public number As Integer

    ' Image for the tile

    Private image As New Bitmap(32, 32, Imaging.PixelFormat.Format32bppRgb)

    ' The X and Y of where its located

    Private chords As New Point

    ' This sub takes a cell location (0-24) and determins the chords

    ' and sets the position

    '

    Public Sub setLocation(ByVal loc As Integer)
        Dim row = Int(loc / 5)
        Dim col = loc - (row * 5)
        row = row * 32
        col = col * 32

        chords = New Point(col, row)
        position = loc
    End Sub


    ' This creates the tile and sets its number

    '

    Public Sub New(ByVal thisnumber As Integer)
        Dim g As Graphics = Graphics.FromImage(image)
        Dim f As New Font("Impact", 15, FontStyle.Regular)
        Dim sze As SizeF = g.MeasureString(thisnumber, f)

        g.FillRectangle(Brushes.White, 0, 0, image.Width, image.Height)
        g.DrawRectangle(Pens.Black, 0, 0, image.Width, image.Height)

        g.DrawString(thisnumber, f, Brushes.Black, _
                     (image.Width - sze.Width) / 2, _
                     (image.Height - sze.Height) / 2)

        number = thisnumber
        f.Dispose()
        g.Dispose()
    End Sub

    ' This draws the tile

    '

    Public Sub draw(ByVal g As Graphics)
        If Not number = 24 Then
            g.DrawImage(image, chords)
        End If
    End Sub
End Class

There really shouldn't be anything you haven't seen in here before, it's a standard class that stores the information for each tile and creates a bitmap.

Step 3

Controls

Go to your form, add a PictureBox control. Set the PictureBox to the name game with a background color of black and set it as docked with the entire form.

Step 4

Part of the code

You always have to start out initializing your variables. See the var pieces(24), that's an array of 24 items just like the game board has 24 tiles. A habit I got into a while back always has me set a debug flag. This way in your code you can say if debug then console.writeline("x = 56"), then when you are ready to distribute your code you can just turn the var to False and poof...all the debug stuff goes away.

    Public debug = True
    Public pieces(24) As cPieces
    Public moves As Integer = 0
    Public start As Date

Next the initialization sub.

    ' Initalize pieces and draw the board

    '

    Private Sub initgame()
        Dim counter As Integer
        Dim nextRnd As Integer
        Dim rndPos(24) As Boolean
        Dim randomNum As New Random

        Me.ClientSize = New Size(32 * 5, 32 * 5)

        moves = 0

        start = Now

        For counter = 0 To 24
            rndPos(counter) = False
        Next

        For counter = 0 To 24
            Do
                nextRnd = randomNum.Next(0, 25)
            Loop Until rndPos(nextRnd) = False

            pieces(counter) = New cPieces(counter)
            pieces(counter).setLocation(nextRnd)
            rndPos(nextRnd) = True
        Next

        game.Invalidate()
    End Sub

Pretty straight forward, it initializes your values as well as determines random locations for the tiles. This part:

          Do
                nextRnd = randomNum.Next(0, 25)
          Loop Until rndPos(nextRnd) = False

Generates a random number then checks to see that it hasn't used that number before. Very handy. Then the final command is game.invalidate(). This tells the Paint event to fire and redraw the box.

Now the game_paint Sub.

    ' Redraw the cells

    '

    Private Sub game_Paint(ByVal sender As Object, _
           ByVal e As System.Windows.Forms.PaintEventArgs) Handles game.Paint
        Dim counter As Integer

        For counter = 0 To 24
            pieces(counter).draw(e.Graphics)
        Next
    End Sub

Again very straight forward, asks each tile to redraw itself. Why not run your game now and marvel at the output?

Step 5

More interesting game

Your game is not very interesting now, try as you might clicking on tiles seems to do nothing! Well, perhaps we should take care of that.

    ' Converts mouse clicks into tile cells

    '

    Private Sub game_MouseUp(ByVal sender As Object, ByVal e As _
                  System.Windows.Forms.MouseEventArgs) Handles game.MouseUp

        Dim posX As Integer = Int((e.X * 1.06) / 32)
        Dim posy As Integer = Int((e.Y * 1.06) / 32)

        If debug Then
            Console.WriteLine("Mouse: " & posX & ", " & posy)
        End If

        moveTiles(posX, posy)
    End Sub

This is a standard mouse event tied to the game PictureBox. It sends its messages to a Sub called moveTiles with the current tile selected. So, I guess we need a movetiles Sub eh?

    ' Can we move one or more tiles, lets see

    '

    Sub moveTiles(ByVal thisCellX As Integer, ByVal thisCelly As Integer)
        Dim counter As Integer
        Dim thisCell = (thisCelly * 5) + thisCellX
        Dim blankCellY = Int(pieces(24).position / 5)
        Dim blankCellX = pieces(24).position - (blankCellY * 5)
        Dim blankCell = pieces(24).position


        If debug Then
            Console.WriteLine("")
            Console.WriteLine("Blank Cell X: " & blankCellX & ", Y: " & _
                               blankCellY)
            Console.WriteLine(" This Cell X: " & thisCellX & ", Y: " & _
                                thisCelly)
        End If

        If blankCellY = thisCelly Then ' Move horizontally


            moves += 1

            If blankCell > thisCell Then         ' Move to right

                For counter = blankCell - 1 To thisCell Step -1
                    swaptiles(counter, counter + 1)
                Next
            End If

            If blankCell < thisCell Then       ' Move to Left

                For counter = blankCell + 1 To thisCell
                    swaptiles(counter, counter - 1)
                Next
            End If

        ElseIf blankCellX = thisCellX Then        ' Move Vertically


            moves += 1

            If blankCell > thisCell Then            ' Move Down

                For counter = blankCell To thisCell + 5 Step -5
                    swaptiles(counter, counter - 5)
                Next
            End If

            If blankCell < thisCell Then             ' Move Up

                For counter = blankCell To thisCell - 5 Step 5
                    swaptiles(counter, counter + 5)
                Next
            End If

        End If

        Dim Winner As Boolean = True
        For counter = 1 To 24
            If pieces(counter).position <> counter Then Winner = False
        Next

        If Winner Then
            MsgBox("You have won in " & moves & " moves and wasted " & _
                   DateDiff(DateInterval.Minute, start, Now) & _
                   " minutes, don't you feel productive.", &
                   MsgBoxStyle.Exclamation, "Time Waster")
        End If
    End Sub

I'm not going to explain this, it's just basic math. If the cell and the blank are in the same row then yadda yadda yadda. However, at the end of the Sub, I have a winners message that's triggered only if all the cells are in alignment. But wait! There is a mention of swaptiles here, so we need to address that as well.

    ' This function takes a cell position from the board and figures out

    ' what tile occupies that space

    '

    Private Function findtile(ByVal findme As Integer)
        Dim Counter As Integer

        Dim tiles(24)


        ' Create an array of tiles but based on position not value

        '

        For Counter = 0 To 24
            tiles(pieces(Counter).position) = Counter
        Next

        Return tiles(findme)
    End Function


    ' Swaps the cells on the board

    '

    Private Sub swaptiles(ByVal source As Integer, _
                          ByVal destination As Integer)

        ' Figures out what tile is at the cell

        '

        Dim sTileNumber = findtile(source)
        Dim dTileNumber = findtile(destination)


        ' Changes them

        '

        pieces(sTileNumber).setLocation(destination)
        pieces(dTileNumber).setLocation(source)

        If debug Then Console.WriteLine("Swapping: Number: " & _
            findtile(source) & " (Position: " & source & ") and Number: " & _
            findtile(destination) & " (Position: " & destination & ")")

        game.Invalidate()
    End Sub

Ok, I lied, you need two more Subs (but they are used together). swaptiles sends information on the cell you are clicking on but it doesn't know what occupies that cell. For instance, say you clicked on cell 11 and wanted to move it to cell 10, you can't merely say cell10=cell11. You need to know what those cells represent so you can change the values accordingly. This is where findcell comes in. findcell takes all the cells on the board and creates an array with the cells ordered as they appear on the playing board, then returns the number of the cell in the position you are clicking. (Phew...that was a mouthful.)

Step 6

Creating a better interface

Go to your form and drag out that good ol' menubar control and create three menu entries. Call the root menu "Game Controls" with "New" and "Exit" as its menu choices. Double click on "New" and set it to regenerate the board. Double click on "Exit" and tell it me.close.

    ' Menu Commands

    '

    Private Sub MenuItem2_Click(ByVal sender As System.Object, _
                        ByVal e As System.EventArgs) Handles MenuItem2.Click
        initgame()
    End Sub


    Private Sub MenuItem3_Click(ByVal sender As System.Object, _
                        ByVal e As System.EventArgs) Handles MenuItem3.Click
        Me.Close()
    End Sub

Well, that's it. You should have a fully working tile game.