Edit

Share via

Tutorial: Display a message in your matching game WinForms app

  • Article

In this series of four tutorials, you build a matching game, where the player matches pairs of hidden icons.

In this tutorial, you revise your Matching Game to keep matched pairs visible and to display a congratulations message when a player wins.

In this tutorial, you learn how to:

  • Keep pairs visible.
  • Verify if a player won.
  • Try other features.

Prerequisites

This tutorial builds on these previous tutorials:

  1. Create a matching game application
  2. Add icons to your matching game
  3. Add a timer in your matching game

Keep pairs visible

When a player matches a pair, the game should reset itself so that it no longer keeps track of any labels that use the firstClicked and secondClicked reference variables. It should not reset the colors for the two labels that were matched. Those labels continue to be displayed.

  1. Add the following if statement to the label_Click() event handler method. Put it near the end of the code just above the statement where you start the timer.
        // 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 clicked two matching icons, keep them 
        // black and reset firstClicked and secondClicked 
        // so the player can click another icon
        if (firstClicked.Text == secondClicked.Text)
        {
            firstClicked = null;
            secondClicked = null;
            return;
        }

        // 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 if statement checks whether the icon in the first label that the player chooses is the same as the icon in the second label. If the icons are the same, the program runs its three statements. The first two statements reset the firstClicked and secondClicked reference variables. They no longer keep track of any of the labels. The third statement is a return statement, which skips the rest of the statements in the method without running them.

  1. Run the program, and then start choosing squares on the form.

Screenshot of the Matching Game that you create in this tutorial.

If you choose a pair that doesn't match, the timer's Tick event triggers. Both icons disappear.

If you choose a matching pair, the new if statement runs. The return statement causes the method to skip the code that starts the timer. The icons stay visible.

Verify if a player won

You've created a fun game. After a player wins, the game should end. This section adds a method to verify whether the player won.

  1. Add a CheckForWinner() method to the bottom of your code, below the timer1_Tick() event handler.
/// <summary>
/// Check every icon to see if it is matched, by 
/// comparing its foreground color to its background color. 
/// If all of the icons are matched, the player wins
/// </summary>
private void CheckForWinner()
{
    // Go through all of the labels in the TableLayoutPanel, 
    // checking each one to see if its icon is matched
    foreach (Control control in tableLayoutPanel1.Controls)
    {
        Label iconLabel = control as Label;

        if (iconLabel != null) 
        {
            if (iconLabel.ForeColor == iconLabel.BackColor)
                return;
        }
    }

    // If the loop didn’t return, it didn't find
    // any unmatched icons
    // That means the user won. Show a message and close the form
    MessageBox.Show("You matched all the icons!", "Congratulations");
    Close();
}

The method uses another foreach loop in C# or For Each loop in Visual Basic to go through each label in the TableLayoutPanel. It checks each label's icon color to verify whether it matches the background. If the colors match, the icon remains invisible, and the player hasn't matched all of the remaining icons.

In that case, the program uses a return statement to skip the rest of the method. If the loop gets through all of the labels without executing the return statement, that means that all of the icons on the form were matched. The program shows a MessageBox to congratulate the player on winning, and then calls the Close() method to end the game.

  1. Have the label's Click event handler call the new CheckForWinner() method.
// 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;

// Check to see if the player won
CheckForWinner();

// If the player clicked two matching icons, keep them 
// black and reset firstClicked and secondClicked 
// so the player can click another icon
if (firstClicked.Text == secondClicked.Text)
{
    firstClicked = null;
    secondClicked = null;
    return;
}

Be sure that your program checks for a winner immediately after it shows the second icon that the player chooses. Look for the line where you set the second chosen icon's color, and then call the CheckForWinner() method right after that line.

  1. Save and run the program. Play the game and match all of the icons. When you win, the program displays a congratulatory message.

    Screenshot shows the Matching game with a MessageBox.

    After you select OK, the Matching Game closes.

Try other features

Your Matching Game is complete. You can add more features to make this game more challenging and interesting. Here are some options.

  • Replace the icons and colors with ones you choose.

    Try looking at the label's ForeColor property.

  • Add a game timer that tracks how long it takes for the player to win.

    You can add a label to display the elapsed time on the form. Place it above the TableLayoutPanel. Add another timer to the form to track the time. Use code to start the timer when the player starts the game, and stop the timer after they match the last two icons.

  • Add a sound when the player finds a match, another sound when the player uncovers two icons that don't match, and a third sound when the program hides the icons again.

    To play sounds, you can use the System.Media namespace. For more information, see Play sounds in Windows Forms app (C#) or How to play audio in Visual Basic.

  • Make the game more difficult by making the board bigger.

    You'll need to do more than just add rows and columns to the TableLayoutPanel. You also need to consider the number of icons you create.

  • Make the game more challenging by hiding the first icon if the player is too slow to respond.

Next steps

Congratulations! You've completed this series of tutorials. You've done these programming and design tasks in the Visual Studio IDE:

  • Stored objects, such as icons, in a list
  • Used a loop in C# or Visual Basic to iterate through a list
  • Kept track of state by using reference variables
  • Built an event handler to respond to events for multiple objects
  • Added a timer that counts down and fires an event

Advance to this article for a deep dive into Windows Forms Designer.

Tutorial: Get started with Windows Forms Designer