Visual Basic 2010 (Windows) Guide
Flood Fill Game

Introduction

The Flood fill game is a simple game where the user tries to colour a grid of squares following some simple rules. You can test out a version of the game online at http://floodit.appspot.com/. Make sure you are happy with the basic premise of the game before proceeding. In this page, the term Mass refers to the cells that form the growing block of cells of the same colour.

Step 1 - Set Up The Form

Visual Basic Screenshot

The large Picturebox needs to be 500x500 pixels in size.

Step 2 - Global Variables

You will need some global variables to make the program work. The colours in the array match the colours you should have made for the picture boxes on the form.

' array of colours to use in the game
Dim Colors() As Color = {Color.DarkBlue, Color.LightBlue, Color.Yellow, Color.Green, Color.Pink, Color.Red}
' store number 0 - 5 to represent colour of each cell - matches subscript of Colors() array
Dim gridColour(24, 24) As Integer
' store whether or not the cell is part of the coloured mass
Dim inMass(24, 24) As Boolean
' random number generator
Dim randGen As Random = New Random()

Step 3 - Procedure To Set Up The Game

' Set up the game field
Sub SetUpBoard()
   ' explore all cells
   For i As Integer = 0 To 24
      For j As Integer = 0 To 24
         ' set the cell to NOT be part of the mass
         inMass(i, j) = False
         ' generate a random colour for the cell
         gridColour(i, j) = randGen.Next(6)
      Next
   Next
   ' make the topmost & leftmost cell part of the mass
   inMass(0, 0) = True
End Sub

Step 4 - Procedure To Work Which Cells Are In The Mass

' Sub to determine whether adjacent cells are in the mass
Sub ResolveMass()
   ' flag set to true when cells are added to the mass
   Dim changes As Boolean
   Do
      ' set flag to false, indicating no changes yet
      changes = False
      ' explore all cells
      For i As Integer = 0 To 24
         For j As Integer = 0 To 24
         ' if the current cell is part of the mass, explore adjacent cells
         ' must check that the cell has a neighbour before trying to change anything
         ' flag set to true if changes are made
         If inMass(i, j) Then
            'explore adjacent left
            If i > 0 Then
               If inMass(i - 1, j) = False And gridColour(i - 1, j) = gridColour(i, j) Then
                  inMass(i - 1, j) = True
                  changes = True
               End If
            End If
            'explore adjacent right
            If i < 24 Then
               If inMass(i + 1, j) = False And gridColour(i + 1, j) = gridColour(i, j) Then
                  inMass(i + 1, j) = True
                  changes = True
               End If
            End If
            'explore adjacent up
            If j > 0 Then
               If inMass(i, j - 1) = False And gridColour(i, j - 1) = gridColour(i, j) Then
                  inMass(i, j - 1) = True
                  changes = True
               End If
            End If
            'explore adjacent down
            If j < 24 Then
               If inMass(i, j + 1) = False And gridColour(i, j + 1) = gridColour(i, j) Then
                  inMass(i, j + 1) = True
                  changes = True
               End If
            End If
         End If
         Next
      Next
      ' the process stops when all cells in the mass are explored and no neighbouring cells
      ' need to be added to the mass.
   Loop Until changes = False
End Sub

Step 5 - Function To Count Cells In The Mass

' Sub to count the number of cells in the coloured mass
Private Function CountMass() As Integer
   ' total declared and set to 0
   Dim total As Integer = 0
   ' explore all cells in the grid with nested loops
   For i As Integer = 0 To 24
      For j As Integer = 0 To 24
         ' increment the total if the cell is part of the mass
         If inMass(i, j) Then total += 1
      Next
   Next
   ' return the count of cells in the mass
   Return total
End Function

Step 6 - Drawing The Game Field

Select the picture box and go to the properties window. Click the lightning and look for the Paint event. Double click on it to create the headings for the event handler.

' Event handler for when the picGame picture box is painted
Private Sub picGame_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles picGame.Paint
   ' reference to a drawing context
   Dim g As Graphics = e.Graphics
   ' clear the drawing surface and paint it white
   g.Clear(Color.White)
   ' declare a brush for painting
   Dim tempBrush As SolidBrush
   ' nested loops to explore whole grid of cells
   For x As Integer = 0 To 24
      For y As Integer = 0 To 24
         ' make the brush have the colour of the cell
         tempBrush = New SolidBrush(Colors(gridColour(x, y)))
         ' fill a rectangle for the position of that cell
         g.FillRectangle(tempBrush, New Rectangle(x * 20, y * 20, x * 20 + 20, y * 20 + 20))
      Next
   Next
   ' call the sub that works out if adjacent cells should form part of the colured mass
   ResolveMass()
   ' display the number of cells in the coloured mass
   lblMass.Text = "Mass: " + Str(CountMass())
End Sub

Step 7 - Colour Cells Procedure

' Assign a given colour to all of the cells in the mass
Private Sub ColourCells(ByVal col As Integer)
   ' explore all cells
   For i As Integer = 0 To 24
      For j As Integer = 0 To 24
         ' assign the given colour to cells in the mass
         If inMass(i, j) Then
            gridColour(i, j) = col
         End If
      Next
   Next
   ' redraw the game field to show the colour & resolve the new mass
   picGame.Refresh()
End Sub

Step 8 - Making It So The User Can Choose A Colour

' Work out which of the colour choice pictureboxes was clicked
Private Sub Colour_Choice_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles PictureBox5.Click, PictureBox4.Click, PictureBox3.Click, PictureBox2.Click, PictureBox1.Click, PictureBox0.Click
   ' this assignment causes an implicit conversion of sender from object to picturebox
   Dim pbox As PictureBox = sender
   ' get the name of the picturebox
   Dim s As String = pbox.Name
   ' read the last character - this is an integer matching the subscript of the colour in the array
   Dim i As Integer = CInt(s.Substring(s.Length - 1, 1))
   ' call the procedure which assigns this colour to all cells in the mass
   ColourCells(i)
End Sub

Step 9 - Getting Things Moving

Double click on some empty space on the form to bring up the code window with an event handler for when the form loads. Add the code you see below,

' Set up the game field when the form is loaded
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
   SetUpBoard()
End Sub

Now get the New Game button working. Double click it and amend the code as follows,

' Reset the game field when the New Game button is pressed
Private Sub New_game_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnNewGame.Click
   SetUpBoard()
   ' cause the picture box to be redrawn with the new colours
   picGame.Refresh()
End Sub

Step 10 - Finish

At the moment, there is no code to keep track of how many colour changes are made. A global variable can be set to 0 when a new game starts and increased by 1 each time one of the colours is selected.

More importantly, there is no code to respond to the user managing to colour in the whole game field. Each time the label is updated with the number of cells in the mass, you can check whether that figure is equal to the total number of cells that can be coloured. When it reaches that number, the game is won and no more moves should be counted.