Step 6: Add a Timer

Article
02/04/2013

Next, you add a timer to the matching game.

To add a timer

Go to the Toolbox in Windows Forms Designer. Double-click Timer (in the Components category) and add a timer to the form, with its icon appearing in a gray box below the form, as shown in the following picture.

Timer
Click the timer1 icon to select the timer. Set the Interval property to 750, but leave the Enabled property set to False. The Interval property tells the timer how long to wait between ticks, so this tells the timer to wait three quarters of a second (750 milliseconds) before it fires its first Tick event. You don't want the timer to start when the program starts. Instead, you use the Start() method to start the timer when the player clicks the second label.
Double-click the Timer control icon in Windows Forms Designer to add the Tick event handler, as shown in the following code.
```
''' <summary>
''' This timer is started when the player clicks 
''' two icons that don't match,
''' so it counts three quarters of a second 
''' and then turns itself off and hides both icons
''' </summary>
''' <remarks></remarks>
Private Sub Timer1_Tick() Handles Timer1.Tick

    ' Stop the timer
    Timer1.Stop()

    ' Hide both icons
    firstClicked.ForeColor = firstClicked.BackColor
    secondClicked.ForeColor = secondClicked.BackColor

    ' Reset firstClicked and secondClicked 
    ' so the next time a label is
    ' clicked, the program knows it's the first click
    firstClicked = Nothing
    secondClicked = Nothing

End Sub
```
```
/// <summary>
/// This timer is started when the player clicks 
/// two icons that don't match,
/// so it counts three quarters of a second 
/// and then turns itself off and hides both icons
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void timer1_Tick(object sender, EventArgs e)
{
    // Stop the timer
    timer1.Stop();

    // Hide both icons
    firstClicked.ForeColor = firstClicked.BackColor;
    secondClicked.ForeColor = secondClicked.BackColor;

    // Reset firstClicked and secondClicked 
    // so the next time a label is
    // clicked, the program knows it's the first click
    firstClicked = null;
    secondClicked = null;
}
```
The Tick event handler does three things: First, it stops the timer by calling the Stop() method. Then it uses the two reference variables, firstClicked and secondClicked, to take the two labels that the player clicked and make their icons invisible again. Finally, it resets the firstClicked and secondClicked reference variables to null in Visual C# and Nothing in Visual Basic. That's important because that's how the program resets itself. Now it's not keeping track of any Label controls, and it's ready for the player's first click again.

Note

A Timer object has a Start() method that starts the timer, and a Stop() method that stops it. When you set the timer's Enabled property to True in the Properties window, it starts ticking as soon as the program begins. But when you leave it set to False, it doesn't start ticking until its Start() method is called.

Note

Normally, a timer fires off its Tick event again and again, using the Interval property to determine how many milliseconds to wait between ticks. You may have noticed how the timer's Stop() method is called inside the Tick event. That puts the timer into one shot mode, so that when the Start() method is called, it waits for its interval and fires off a single Tick event.

To see the new timer in action, go to the code editor and add the following code to the top and bottom of the label_Click() event handler method. (You're adding an if statement to the top, and three statements to the bottom; the rest of the method stays the same.)

''' <summary>
''' Every label's Click event is handled by this event handler
''' </summary>
''' <param name="sender">The label that was clicked</param>
''' <param name="e"></param>
''' <remarks></remarks>
Private Sub label_Click(ByVal sender As System.Object, 
                        ByVal e As System.EventArgs) Handles Label9.Click, 
    Label8.Click, Label7.Click, Label6.Click, Label5.Click, Label4.Click,  
    Label3.Click, Label2.Click, Label16.Click, Label15.Click, Label14.Click, 
    Label13.Click, Label12.Click, Label11.Click, Label10.Click, Label1.Click

    ' The timer is only on after two non-matching 
    ' icons have been shown to the player, 
    ' so ignore any clicks if the timer is running
    If Timer1.Enabled Then Exit Sub

    Dim clickedLabel = TryCast(sender, Label)

    If clickedLabel IsNot Nothing Then
        ' If the clicked label is black, the player clicked
        ' an icon that's already been revealed --
        ' ignore the click
        If clickedLabel.ForeColor = Color.Black Then Exit Sub

        ' If firstClicked is Nothing, this is the first icon 
        ' in the pair that the player clicked, 
        ' so set firstClicked to the label that the player 
        ' clicked, change its color to black, and return
        If firstClicked Is Nothing Then
            firstClicked = clickedLabel
            firstClicked.ForeColor = Color.Black
            Exit Sub
        End If

        ' If the player gets this far, the timer isn't 
        ' running and firstClicked isn't Nothing, 
        ' so this must be the second icon the player clicked
        ' Set its color to black
        secondClicked = clickedLabel
        secondClicked.ForeColor = Color.Black

        ' If the player gets this far, the player 
        ' clicked two different icons, so start the 
        ' timer (which will wait three quarters of 
        ' a second, and then hide the icons)
        Timer1.Start()
    End If

End Sub

/// <summary>
/// Every label's Click event is handled by this event handler
/// </summary>
/// <param name="sender">The label that was clicked</param>
/// <param name="e"></param>
private void label_Click(object sender, EventArgs e)
{
    // The timer is only on after two non-matching 
    // icons have been shown to the player, 
    // so ignore any clicks if the timer is running
    if (timer1.Enabled == true)
        return;

    Label clickedLabel = sender as Label;

    if (clickedLabel != null)
    {
        // If the clicked label is black, the player clicked
        // an icon that's already been revealed --
        // ignore the click
        if (clickedLabel.ForeColor == Color.Black)
            return;

        // If firstClicked is null, this is the first icon
        // in the pair that the player clicked, 
        // so set firstClicked to the label that the player 
        // clicked, change its color to black, and return
        if (firstClicked == null)
        {
            firstClicked = clickedLabel;
            firstClicked.ForeColor = Color.Black;
            return;
        }

        // If the player gets this far, the timer isn't
        // running and firstClicked isn't null,
        // so this must be the second icon the player clicked
        // Set its color to black
        secondClicked = clickedLabel;
        secondClicked.ForeColor = Color.Black;

        // If the player gets this far, the player 
        // clicked two different icons, so start the 
        // timer (which will wait three quarters of 
        // a second, and then hide the icons)
        timer1.Start();
    }
}

The code at the top of the method checks whether the timer was started by checking the Enabled property. That way, if the player clicks the first and second Label controls and the timer starts, clicking a third control won't do anything.

The code at the bottom of the method sets the secondClicked reference variable so that it keeps track of the second Label control that the player clicked, and it sets that label's icon color to black to make it visible. Then it starts the timer in one shot mode, so that it waits for 750 milliseconds and then fires the Tick event. The timer’s Tick event handler then hides the two icons, and resets the firstClicked and secondClicked reference variables so the form is ready for the player to click another icon.

Save and run your program. Click an icon, and it becomes visible.
Click another icon. It appears briefly, and then both icons disappear. Repeat this numerous times. The form now keeps track of the first and second icons that you click, and uses the timer to pause before making the icons disappear.

To continue or review

To go to the next tutorial step, see Step 7: Keep Pairs Visible.
To return to the previous tutorial step, see Step 5: Add Label References.

Step 6: Add a Timer

To add a timer

To continue or review

Additional resources