Step 6: Add a Timer

  • Article

Note

This article applies to Visual Studio 2015. If you're looking for the latest Visual Studio documentation, see Visual Studio documentation. We recommend upgrading to the latest version of Visual Studio. Download it here

Next, you add a Timer control to the matching game. A timer waits a specified number of milliseconds, and then fires an event, referred to as a tick. This is useful for starting an action, or repeating an action on a regular basis. In this case, you'll use a timer to enable players to choose two icons, and if the icons don't match, hide the two icons again after a short period of time.

To add a timer

  1. From the toolbox in Windows Forms Designer, choose Timer (in the Components category) and then choose the ENTER key, or double-click the timer to add a timer control to the form. The timer's icon, called Timer1, should appear in a space below the form, as shown in the following picture.

    Timer Timer

    Note

    If the toolbox is empty, be sure to select the form designer, and not the code behind the form, before opening the toolbox.

  2. Choose the Timer1 icon to select the timer. In the Properties window, switch from viewing events to viewing properties. Then, set the timer's Interval property to 750, but leave its Enabled property set to False. The Interval property tells the timer how long to wait between ticks, or when it triggers its Tick event. A value of 750 tells the timer to wait three quarters of a second (750 milliseconds) before it fires its Tick event. You'll call the Start() method to start the timer only after the player chooses the second label.

  3. Choose the timer control icon in Windows Forms Designer and then choose the ENTER key, or double-click the timer, to add an empty Tick event handler. Either replace the code with the following code, or manually enter the following code into the event handler.

    /// <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;
}

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

    The Tick event handler does three things: First, it makes sure the timer isn't running by calling the Stop() method. Then it uses two reference variables, firstClicked and secondClicked, to make the icons of the two labels that the player chose invisible again. Finally, it resets the firstClicked and secondClicked reference variables to null in Visual C# and Nothing in Visual Basic. This step is important because it's how the program resets itself. Now it's not keeping track of any Label controls, and it's ready for the player to choose a label 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. Normally, a timer fires its Tick event over and over 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, meaning that when the Start() method is called, it waits for the specified interval, triggers a single Tick event, and then stops.

  4. 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>
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();
    }
}

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

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

    The code at the bottom of the method sets the secondClicked reference variable to track the second Label control that the player chose, and then 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 750 milliseconds and then fires a single Tick event. The timer’s Tick event handler hides the two icons and resets the firstClicked and secondClicked reference variables so the form is ready for the player to choose another pair of icons.

  5. Save and run your program. Choose an icon, and it becomes visible.

  6. Choose 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 choose, and uses the timer to pause before making the icons disappear.

To continue or review