Let's set up the interface first of all.
We will need:
• 2 buttons
• 3 labels
• 16 picture boxes
Here's my interface:
Note: I have the property FormBorderStyle set to FixedToolWindow
Button1 is 'New Game' – Set its name to newgame
Button2 is 'Done' – Set its name to done
Label1 is “Wins: 0 {Line Break} Losses: 0” - set its name to score
Label2 is “Time Left: 0” - set its name to time
Label3 is “Start A New Game” - set its name to status
The picture boxes go in order like this
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
I suggest that you arrange them the same way. Feel free to move any control around to make the interface look better. I could have done better.
Let's start coding!
So first, we'll start with the variables we need. I used this code to declare all of them.
#Region "Customizable Variables"
Dim GridOn As Color = Color.LightBlue
Dim GridOff As Color = Color.DarkBlue
Dim MaxTime As Integer = 3
#End Region
#Region "Other Variables"
Dim TimeLeft As Integer
Dim Wins As Integer = 0 'How many wins the player has this session
Dim Losses As Integer = 0 'How many losses the player has this session
Dim AllowEdit As Boolean = False
Dim GridRandom As New Random
Dim StatusText(5) As String
Dim RandHolder As Integer
#End Region
So, basically, all you need to be concerned with is the variables declared under the region “Customizable Variables.” GridOn is the color to use when the user clicks the square once. GridOff is the default color. MaxTime is how long the player has to memorize the arrangement of the grids before having to recite them (in seconds).Feel free to change these however you feel.
The other variables are things that store the player's amount of wins, losses, time left, if the user can change the colors of the grids, etc.
Next, let's add the form1_load code.
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'Start customizable strings'
StatusText(0) = "Start A New Game" 'What text is displayed upon startup
StatusText(1) = "Start! You have " & MaxTime & " total seconds to memorize the pattern below!" 'Text displayed to tell user x amt of time
StatusText(2) = "Time is up! Reconfigure the original grid." 'Text when the timer runs up, user must enter pattern
StatusText(3) = "Contragulations. You have won!" 'Displayed when the user wins the round
StatusText(4) = "Sorry. You have lost." 'Displayed when the user loses the round.
'End customizable strings'
status.Text = StatusText(0)
For Each pic As Control In Me.Controls 'For every picture in form1's controls...
If TypeOf pic Is PictureBox Then 'Then, only picks the pictureboxes, not the buttons, labels, etc.
AddHandler pic.Click, AddressOf PictureBoxClick 'For each picturebox (grid), add an event handler (PictureBoxClick) to avoid
End If 'typing 16 of them ourselves
Next
End Sub
So, the code is commented for your understanding. Basically, there are presets for the status text to tell the player what to do. We use the AddHandler to add an event to the picture boxes. After all, there are 16 of them, and we don't want to type all of them! The AddressOf will tell what Sub code to add. This will actually give code to the event. Here's the PictureBoxClick sub which we need to add next.
Private Sub PictureBoxClick(ByVal sender As System.Object, ByVal e As System.EventArgs)
If AllowEdit = True Then
Dim ctrl As PictureBox = DirectCast(sender, Control)
If ctrl.BackColor = GridOn Then
ctrl.BackColor = GridOff 'Set the backcolor to either GridOn or GridOff
Else : ctrl.BackColor = GridOn
End If
Else
'Do not allow the user to change the colors
End If
End Sub
If AllowEdit is true, then the user can click the grids to toggle the color of them. We use ctrl to refer to the clicked picture box. So if the color is GridOn, set it to GridOff, and vice versa. Yet, if AllowEdit is false, then the player is in the memorization process or hasn't started a game yet. Now that we have the grids set up, we need to work on the winning and losing situations, as well as counting how much time is left and randomizing the game board.
Here's the code which will be used for Button1, or 'New Game':
Private Sub newgame_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles newgame.Click
TimeLeft = MaxTime
time.Text = "Time Left: " & MaxTime 'Display the time left
status.Text = StatusText(1) 'Show the 'Memorize this board' text
newgame.Enabled = False 'Disable the button so it can't be pressed again, for now
For Each pic As Control In Me.Controls 'Randomize the grid arrangement
If TypeOf pic Is PictureBox Then 'If the control is a picturebox...
RandHolder = GridRandom.Next(0, 2) 'Generates a random number, either 0 or 1, NOT 2! The last number must be 1 higher than
If RandHolder = 1 Then 'how high you want. If the random number is 1, then the grid is "On," otherwise it's "Off"
pic.BackColor = GridOn
Else
pic.BackColor = GridOff
End If
End If
Next
For Each picture As Control In Me.Controls 'This section stores the color
If TypeOf picture Is PictureBox Then 'of the original grids in tag.
If picture.BackColor = GridOff Then : picture.Tag = 0 'Tag of 0 is equal to GridOff
Else : picture.Tag = 1 'Tag of 1 is equal to GridOn
End If
End If
Next
Timer1.Start() 'Start the game timer to start counting down!
End Sub
Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
If TimeLeft > 0 Then 'If the time hasn't yet run out...
TimeLeft -= 1 'Remove one second from the clock
time.Text = "Time Left: " & TimeLeft 'Display the time left
Else
AllowEdit = True 'The memorization is over, and the user must reconfigure the grid
status.Text = StatusText(2) 'Tell the user the 'reconfigure' dialog
For Each grid As Control In Me.Controls
If TypeOf grid Is PictureBox Then
grid.BackColor = GridOff 'Reset all the grids, of course, so the user has to enter it
End If
Next
done.Enabled = True 'Enable the 'Done' button when the user is finished
Timer1.Stop() 'Stop the timer
End If
End Sub
Private Sub done_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles done.Click
'Check answers
Dim correct As Integer = 0 'We'll declare this to count how many grids the user got correct
For Each grid As Control In Me.Controls
If TypeOf grid Is PictureBox Then
If grid.Tag = 1 And grid.BackColor = GridOn Or grid.Tag = 0 And grid.BackColor = GridOff Then 'The tag is used to store the correct answer: 0=off, 1=on, check those answers
correct += 1 'If it matches up, add one to the correct counter.
Else
'The grid must not be correct
'Do not add to the correct count
End If
End If
Next
If correct = 16 Then 'If the user got all 16 correct...
Wins += 1 'Add a win to the player's score
Else 'Otherwise
Losses += 1 'Add a loss to the player's score
End If
score.Text = "Wins: " & Wins & vbNewLine & "Losses: " & Losses 'Refresh the score to the user
newgame.Enabled = True 'Enable the 'New Game' button so the user can play another round
done.Enabled = False 'Disable this button, since it's only used to check answers
For Each pic As Control In Me.Controls
If TypeOf pic Is PictureBox Then
pic.BackColor = GridOff 'Reset the picture boxes
pic.Tag = ""
End If
Next
AllowEdit = False 'Disable the ability for the player to toggle the grids
End Sub
Now, make sure you test the outcome by debugging. You'll want to make sure you didn't miss any code. I've added a lot of comments to the code to explain everything. It's always a good idea to explain code using comments so you can quickly see its function without having to interpret it. I hope you've learned something, and remember that this is a basic tutorial intended for those new coders out there who want to make a quick, time-wasting game. Have fun with your new game!
Remember, you have customizable variables. Change the colors around, and make it easier or harder by changing the time allowed to memorize. Test those skills with one second!
Some suggestions to go further with this game:
- Add three or more colors!
- Change the interface of the form, perhaps use a color scheme for your game
- Rather than using dull text, add some 16x16 icons of a clock to represent time, and maybe a plus and minus for wins / losses.
- Rather than using dull text, add some 16x16 icons of a clock to represent time, and maybe a plus and minus for wins / losses.
- Make the picture boxes smaller, or maybe even add more.
- Add a new form for 'New Game'. Have 3 difficulty settings: easy, medium, and hard. These difficulties may add more grids (ex. 5X5, 6x6, etc.), have more colors, or less time.
- Instead of using solid colors, use background images with cool patterns/textures on them.
Last but not least, I've taken a screenshot of the final project! Here is the game-play.
MultiQuote
| 