Page 1 of 1

A Basic Grid Game Create a simple game of memorization! Rate Topic: -----

#1 chiefofgxbxl  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 6
  • View blog
  • Posts: 43
  • Joined: 24-June 09

Posted 03 December 2010 - 06:29 PM

*
POPULAR

In this tutorial, we will be making a simple grid game. Its a good time waster and tests your memorization a bit. This tutorial is intended for beginning VB.Net programmers who want to practice coding and make a game. There is a set of grids, 4 in width and height. So total there are 16 squares. When you start the game, you have a few seconds (customizable) to memorize the arrangement of the grids. By the arrangement, I mean each grid is one of two colors (customizable). After the time is up, all the grids are set to the 'off' color. The player must click on the grids to toggle them and put them in their correct color assignments as they were seen before. Once the player feels satisfied with their selection, they click the 'Done' button to check if they were correct. If all the grids are correct, they get a win, and they lose if one or more grids are incorrect.

Let's set up the interface first of all.
We will need:
• 2 buttons
• 3 labels
• 16 picture boxes

Here's my interface:
Posted Image
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! :smartass:

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

Is This A Good Question/Topic? 5
  • +

Replies To: A Basic Grid Game

#2 Lolzmao  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 33
  • Joined: 02-August 11

Posted 02 August 2011 - 08:37 AM

Works like a charm.

Thank you very much for sharing!
Was This Post Helpful? 0
  • +
  • -

#3 Chasyla  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 24-November 11

Posted 24 November 2011 - 10:05 PM

how can i download this subject?
Was This Post Helpful? 0
  • +
  • -

#4 DimitriV  Icon User is offline

  • They don't think it be like it is, but it do
  • member icon

Reputation: 584
  • View blog
  • Posts: 2,738
  • Joined: 24-July 11

Posted 24 November 2011 - 10:47 PM

Hi. You can copy the code from the SyntaxHighlighter boxes with the little button that appears either when you click the code boxes or move your mouse over them. It's the second button from the
LEFT

Remember that.
Was This Post Helpful? 0
  • +
  • -

#5 appe  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 20-February 13

Posted 20 February 2013 - 11:51 AM

when i try to run it shows error in "PictureBoxClick"..
any one can help me pls..
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1