教程：向匹配游戏 WinForms 应用中添加图标

项目
03/23/2023

在这四个教程系列中，你将构建一个匹配游戏，玩家在其中匹配隐藏的图标对。

在匹配游戏中，玩家选择一个方块来查看图标，然后选择另一个方块。如果图标互相匹配，则它们保持可见。如果不匹配，游戏将隐藏这两个图标。在本教程中，你将随机向标签分配图标。将其设置为隐藏，然后在选中时显示。

在第二个教程中，你将了解如何：

添加 Random 对象和图标列表。
向每个标签分配一个随机图标。
添加事件处理程序，用于显示标签的图标。

必备条件

此教程基于上一教程创建匹配游戏应用程序。如果尚未学习此教程，请先完成此教程。

添加 Random 对象和图标列表

在本部分中，你要为游戏创建一组匹配的符号。每个符号将添加到窗体上 TableLayoutPanel 中的两个随机单元格。

使用 new 语句创建两个对象。第一个是 Random 对象，随机选择 TableLayoutPanel 中的单元格。第二个是 List<T> 对象。它存储随机选择的符号。

打开 Visual Studio。 MatchingGame 项目显示在“打开最近使用的文件”下。
如果使用的是 C#，请选择“Form1.cs”，如果使用的是 Visual Basic，则选择“Form1.vb”。然后选择“查看”>“代码”。也可以选择 F7 键或双击“Form1” 。 Visual Studio IDE 显示 Form1 的代码模块。

在现有代码中，添加以下代码。

public partial class Form1 : Form
{
    // Use this Random object to choose random icons for the squares
    Random random = new Random();

    // Each of these letters is an interesting icon
    // in the Webdings font,
    // and each icon appears twice in this list
    List<string> icons = new List<string>() 
    { 
        "!", "!", "N", "N", ",", ",", "k", "k",
        "b", "b", "v", "v", "w", "w", "z", "z"
    };

Public Class Form1

    ' Use this Random object to choose random icons for the squares
    Private random As New Random

    ' Each of these letters is an interesting icon
    ' in the Webdings font,
    ' and each icon appears twice in this list
    Private icons =
      New List(Of String) From {"!", "!", "N", "N", ",", ",", "k", "k",
                                "b", "b", "v", "v", "w", "w", "z", "z"}

重要

使用此页右上角的编程语言控件查看 C# 代码片段或 Visual Basic 代码片段。

Programming language control for Microsoft Learn

如果你使用 C#，请确保将代码放在左大括号后面，紧靠类声明 (public partial class Form1 : Form) 之后。如果你使用 Visual Basic，请将代码放在紧靠类声明 (Public Class Form1) 之后。

可以使用列表对象跟踪不同类型的项目。列表可以包含数字、true/false 值、文本或其他对象。在匹配游戏中，列表对象具有 16 个字符串，每个字符串对应 TableLayoutPanel 面板中的每个单元格。每个字符串都是对应于标签中的图标的单个字母。这些字符在 Webdings 字体中显示为公共汽车、自行车和其他符号。

注意

列表可以根据需要收缩或增长，这在此程序中非常重要。

若要详细了解列表，请参阅 List<T>。若要查看 C# 中的示例，请参阅基本列表示例。若要查看 Visual Basic 中的示例，请参阅使用简单集合。

向每个标签分配一个随机图标

每次运行该程序时，它都会使用 AssignIconsToSquares() 方法将图标随机分配给 Label 控件。此代码使用关键字 foreach（C# 中）或 For Each（Visual Basic 中）。

添加 AssignIconsToSquares() 方法。

/// <summary>
/// Assign each icon from the list of icons to a random square
/// </summary>
private void AssignIconsToSquares()
{
    // The TableLayoutPanel has 16 labels,
    // and the icon list has 16 icons,
    // so an icon is pulled at random from the list
    // and added to each label
    foreach (Control control in tableLayoutPanel1.Controls)
    {
        Label iconLabel = control as Label;
        if (iconLabel != null)
        {
            int randomNumber = random.Next(icons.Count);
            iconLabel.Text = icons[randomNumber];
            // iconLabel.ForeColor = iconLabel.BackColor;
            icons.RemoveAt(randomNumber);
        }
    }
}

''' <summary>
''' Assign each icon from the list of icons to a random square
''' </summary>
''' <remarks></remarks>
Private Sub AssignIconsToSquares()

    ' The TableLayoutPanel has 16 labels,
    ' and the icon list has 16 icons,
    ' so an icon is pulled at random from the list
    ' and added to each label
    For Each control In TableLayoutPanel1.Controls
        Dim iconLabel = TryCast(control, Label)
        If iconLabel IsNot Nothing Then
            Dim randomNumber = random.Next(icons.Count)
            iconLabel.Text = icons(randomNumber)
            ' iconLabel.ForeColor = iconLabel.BackColor
            icons.RemoveAt(randomNumber)
        End If
    Next

End Sub

可以在上一节中添加的代码之下输入此代码。

注意

其中有一行被故意注释掉了。稍后在此过程中将其添加。

AssignIconsToSquares() 方法循环访问 TableLayoutPanel 中的每个标签控件。它对每个控件运行相同的语句。语句从列表中提取随机图标。

第一行将 control 变量转换为名为“iconLabel” 的标签。
第二行是 if 语句，用于检查以确保转换起作用。如果转换起作用，则 if 语句中的语句将运行。
if 语句中的第一行将创建一个名为“randomNumber”的变量，该变量包含一个与图标列表中的项对应的随机数。它使用 Random 对象的 Next() 方法。 Next 方法将返回此随机数。此行也使用“图标” 列表的 Count 属性来确定随机数的选择范围。
下一行会将图标列表项之一分配给标签的 Text 属性。
下一行将隐藏这些图标。该行已在此处注释掉，因此你可以在继续操作之前验证代码的其余部分。
if 语句中最后一行将从列表中删除已添加到窗体中的图标。

将调用添加到 Form1 构造函数的 AssignIconsToSquares() 方法。此方法用图标填充游戏板。构造函数在创建对象时进行调用。
```
public Form1()
{
    InitializeComponent();

    AssignIconsToSquares();
}
```
对于 Visual Basic，将 AssignIconsToSquares() 方法调用添加到 Form1_Load 方法。
```
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    AssignIconsToSquares()
End Sub
```
有关详细信息，请参阅构造函数（C# 编程指南）或使用构造函数和析构函数。
保存并运行程序。它应该显示一个窗体，其中每个标签都分配了随机图标。

提示

如果窗体上的 Webdings 图标不能正确显示，请将窗体上标签的 UseCompatibleTextRendering 属性设置为 True。
关闭程序，然后重新运行。向每个标签分配不同的图标。

你没有隐藏这些图标，所以现在可以看到。若要向玩家隐藏图标，可以将每个标签的“ForeColor” 属性设置为与“BackColor” 属性相同的颜色。

停止程序。删除循环内注释的代码行的注释标记。

iconLabel.ForeColor = iconLabel.BackColor;

iconLabel.ForeColor = iconLabel.BackColor

如果再次运行该程序，图标似乎已消失。只显示蓝色背景。图标是随机分配的，仍然存在。

向标签添加事件处理程序

在此匹配游戏中，玩家先显示一个隐藏图标，然后再显示第二个图标。如果图标互相匹配，则它们保持可见。否则，两个图标都会再次隐藏。

若要使游戏以这种方式工作，请添加一个 Click 事件处理程序，它将更改所选标签的颜色以与背景匹配。

在“Windows 窗体设计器”中打开窗体。选择“Form1.cs”或“Form1.vb”，然后选择“查看”>“设计器”。
选择第一个标签控件以将其选中，然后双击它，将名为 label1 _Click() 的事件处理程序 Click 添加到代码中。
然后，按住 Ctrl 键的同时选择其他每个标签。确保选中每个标签。
在“属性”窗口中，选择“事件”按钮，这是一个闪电形符号。对于“Click”事件，请在框中选择“label1_Click” 。
选择 Enter 键。 IDE 将名为 label1 _Click() 的 Click 事件处理程序添加到代码中。由于你选择了所有标签，因此处理程序会与每个标签挂钩。

填写其余代码。

/// <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 label1_Click(object sender, EventArgs e)
{
    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;

        clickedLabel.ForeColor = Color.Black;
    }
 }

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

    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

        clickedLabel.ForeColor = Color.Black
    End If
End Sub

注意

如果你复制和粘贴 label1_Click() 代码块，而不是手动输入代码，请确保替换现有的 label1_Click() 代码。否则，你将得到重复的代码块。

选择“调试”>“开始调试”以运行程序。您应该看到一个背景为蓝色的空窗体。选择窗体中的任意单元格。其中一个图标应可见。继续在窗体中选择不同位置。当选择图标时，它们应显示。

Screenshot shows the Matching Game with a single icon visible.

后续步骤

请继续学习下一教程，了解如何使用计时器更改标签。

在匹配游戏中使用计时器

通过