通过

教程：创建 Windows 窗体匹配游戏应用

  • 项目

在此系列教程中，你将创建一个匹配的游戏。 玩家在游戏中匹配隐藏的图标成对。

使用这些教程了解 Visual Studio 集成开发环境中以下任务（IDE）：

  • 将对象（如图标）存储在 List<T> 对象中。
  • 使用 C# 中的 foreach 循环或 Visual Basic 中的 For Each 循环来循环访问列表中的项。
  • 使用引用变量跟踪窗体的状态。
  • 创建事件处理程序以响应可用于多个对象的事件。
  • 创建一个计时器，该计时器倒计时并在启动后立即准确触发事件。

完成后，你将拥有一个完整的游戏。

你创建的游戏的屏幕截图。网格中显示多个匹配的图标。

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

  • 创建使用 Windows 窗体的 Visual Studio 项目。
  • 添加布局元素并设置其格式。
  • 添加标签并设置标签格式。

先决条件

需要 Visual Studio 才能完成本教程。 访问 Visual Studio 下载页面 以获取免费版本。

备注

本教程需要 Windows 窗体应用 (.NET Framework) 项目模板。 在安装过程中，选择 .NET 桌面开发 工作负载：

显示 Visual Studio 安装程序中 dot NET 桌面开发工作负载的屏幕截图。

如果已安装 Visual Studio 并且需要添加模板，请在菜单中选择 工具>获取工具和功能，或在 创建新项目 窗口中，选择 安装更多工具和功能。

显示“找不到您要找的内容”消息中的“安装更多工具和功能”链接在“创建新项目”对话框中的屏幕截图。

创建 Windows 窗体匹配游戏项目

创建游戏的第一步是创建 Windows 窗体应用项目。

  1. 打开 Visual Studio。

  2. 在开始窗口中，选择 创建新项目。

    Visual Studio 开始窗口中“创建新项目”选项的屏幕截图。

  3. 在“创建新项目”窗口中，搜索“Windows 窗体”。 然后从 “所有项目类型” 列表中选择 桌面。

  4. 针对 C# 或 Visual Basic，选择“Windows 窗体应用 (.NET Framework)”模板，然后选择“下一步”。

  5. 在“配置新项目”窗口中，将项目命名为 MatchingGame，然后选择“创建”。

    “配置新项目”窗口的屏幕截图。

Visual Studio 为应用创建 解决方案。 解决方案是应用所需的项目和文件的容器。

此时，Visual Studio 会在 Windows 窗体设计器中显示一个空白窗体。

为游戏创建布局

在本部分中，你将为游戏创建四×四网格。

  1. 选择窗体以选择 Windows 窗体设计器。 选项卡显示 C# 的 Form1.cs [设计]，或 (适用于 Visual Basic 的) Form1.vb [设计]。 在 属性 窗口中，设置以下窗体属性。

    • 将“文本”属性从“Form1”更改为“Matching Game”。 此文本显示在游戏窗口顶部。
    • 设置窗体大小。 可以通过将 Size 属性设置为 550、550 或拖动窗体的角来更改它，直到在 Visual Studio IDE 底部看到正确的大小。

  2. 选择 IDE 左侧的 工具箱 选项卡。 如果看不到它，请从菜单栏中选择“查看”>“工具箱”，或选择 Ctrl+Alt+X”。

  3. 从工具箱中的“容器” 类别中拖动 TableLayoutPanel 控件，或双击它。 在 属性 窗口中设置面板的以下属性。

    • 将 BackColor 属性设置为 CornflowerBlue。 若要设置此属性，请选择 BackColor 属性旁边的向下箭头。 在生成的对话框中，选择 Web。 在名称列表中，选择 玉米花蓝。

      注意

      颜色不按字母顺序排列。 玉米花蓝 在列表底部附近。

    • 通过选择向下箭头和大的中间按钮，将“Dock”属性设置为“填充”。 此选项将表格展开，使其覆盖整个表单。

    • 将 CellBorderStyle 属性设置为 Inset。 此值提供板上每个单元格之间的视觉边框。

    • 选择 TableLayoutPanel 右上角的三角形按钮以显示其任务菜单。 在任务菜单上，选择 添加行 两次，以再添加两行。 然后选择“添加列”两次以添加另外两列。

    • 在任务菜单上，选择 编辑行和列，然后打开 列和行样式 窗口。 对于每个列，请选择 “百分比”选项，然后将每列的宽度设置为 25%。

    • 从窗口顶部的列表中选择 行，然后将每行的高度设置为 25%。

    • 完成后，选择确定以保存更改。

您的 TableLayoutPanel 现在是一个四行四列的网格，包含 16 个大小相同的方形单元格。 这些行和列是图标稍后显示的位置。

“窗体”选项卡的屏幕截图，包含一个四乘四的网格。

添加标签并设置标签格式

在本部分中，你将创建和设置游戏期间显示的标签的格式。

  1. 请确保在窗体编辑器中选择 TableLayoutPanel。 你应该会在“属性”窗口顶部看到“tableLayoutPanel1”。 如果未选中，请选择窗体上的 TableLayoutPanel，或从“属性”窗口顶部的列表中选择它。

  2. 像以前一样打开工具箱，然后打开 公共控件 类别。 将 Label 控件添加到 TableLayoutPanel 的左上角单元格。 IDE 中已选择标签控件。 为其设置以下属性。

    • 将标签的 BackColor 属性设置为 CornflowerBlue。
    • 将 AutoSize 属性设置为 False。
    • 将 Dock 属性设置为 Fill。
    • 通过将 TextAlign 属性设置为 MiddleCenter，方法是选择属性旁边的向下箭头按钮，然后选择中间按钮。 此值可确保图标显示在单元格中间。
    • 选择“字体”属性。 将显示省略号（...） 按钮。 选择省略号并将 字体 值设置为 Webdings，将 字体样式 设置为 粗体，并将 大小 设置为 48。
    • 将标签的 Text 属性设置为字母 c。

    TableLayoutPanel 的左上角单元格现在包含以蓝色背景为中心的黑框。

    注意

    Webdings 是 Windows 操作系统附带的图标字体。 在匹配游戏中，玩家匹配图标对。 此字体显示要匹配的图标。 如果窗体上的 Webdings 图标不能正确显示，请将窗体上标签的 UseCompatibleTextRendering 属性设置为 True。

    尝试在 Text 属性中使用不同的字母，而不是使用 c。 感叹号是蜘蛛，大写 N 是眼睛，逗号是辣椒。

  3. 选择标签控件并将其复制到 TableLayoutPanel 中的下一个单元格。 选择 Ctrl+C 键，或在菜单栏上 编辑>复制。 然后，使用 Ctrl+V 或“编辑”>“粘贴”进行粘贴。

    第一个标签的副本显示在 TableLayoutPanel 的第二个单元格中。 再次粘贴该标签，第三个单元格中会显示另一个标签。 继续粘贴标签控件，直到填满所有单元格。

此步骤完成表单的布局。

包含 16 个黑色正方形的匹配游戏窗体的屏幕截图。

下一步

转到下一教程，了解如何向每个标签分配随机图标并将事件处理程序添加到标签。

向匹配游戏添加图标