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