教學課程：建立相符的遊戲 WinForms 應用程式

  • 發行項

適用于：是Visual Studio否Visual Studio for Mac否Visual Studio Code

在此系列四個教學課程中，您會建置比對遊戲，其中玩家會比對隱藏圖示配對。

使用這些教學課程來瞭解 Visual Studio 整合式設計環境 (IDE) 中的下列工作。

  • 在 List<T> 物件中儲存物件 (例如圖示)。
  • foreach使用 C# 中的迴圈或 For Each Visual Basic 中的迴圈來逐一查看清單中的專案。
  • 使用參考變數追蹤表單的狀態。
  • 建置您可以搭配多個物件使用的事件處理常式來回應事件。
  • 讓計時器倒數計時，然後讓計時器於啟動後剛好引發一個事件。

完成時，您將有完整的遊戲。

顯示您所建立遊戲的螢幕擷取畫面，其中顯示格線中顯示的數個相符圖示。

在第一個教學課程中，您將瞭解如何：

  • 建立使用 Windows Forms 的 Visual Studio 專案。
  • 新增和格式化版面設定項目。
  • 新增和格式化要顯示的標籤。

必要條件

您需要 Visual Studio 才能完成本教學課程。 如需免費版本，請流覽 Visual Studio 下載頁面 。

建立您的Windows Forms比對遊戲專案

當您建立比對遊戲時，第一個步驟是建立Windows Forms App 專案。

  1. 開啟 Visual Studio。

  2. 在 [開始] 視窗中，選取 [建立新專案]。

    此螢幕擷取畫面顯示 Visual Studio 開始視窗中的 [建立新專案] 選項。

  3. 在 [建立新專案] 視窗中，搜尋Windows Forms。 然後從[所有專案類型] 清單中選取 [桌面]。

  4. 選取 C# 或 Visual Basic 的Windows Forms 應用程式 (.NET Framework) 範本，然後選取 [下一步]。

    顯示 [建立新專案] 對話方塊的螢幕擷取畫面，其中已輸入Windows Forms和Windows Forms應用程式的選項。

    注意

    如果您沒有看到Windows Forms應用程式 (.NET Framework) 範本，您可以從 [建立新專案] 視窗安裝它。 在 [找不到您要尋找的專案嗎？] 訊息中，選取 [安裝更多工具和功能 ] 連結。

    此螢幕擷取畫面顯示 [建立新專案] 對話方塊中[找不到您要尋找的專案] 訊息中的 [安裝更多工具和功能] 連結。

    接下來，在 [Visual Studio 安裝程式] 中，選取[.NET 桌面開發]。

    此螢幕擷取畫面顯示Visual Studio 安裝程式中的 .NET Core 工作負載。

    在Visual Studio 安裝程式中選取[修改]。 系統可能會提示您儲存您的工作。 接下來，選取 [繼續 ] 以安裝工作負載。

  5. 在 [ 設定新專案 ] 視窗中，將專案命名為 MatchingGame，然後選取 [ 建立]。

    顯示 [設定新專案] 的螢幕擷取畫面。

Visual Studio 會為您的應用程式建立解決方案。 解決方案是應用程式所需所有專案和檔案的容器。

此時，Visual Studio 會在 Windows Form Designer中顯示空白表單。

為您的遊戲建立版面配置

在本節中，您會建立遊戲的四對四方格。

  1. 按一下表單以選取Windows Forms設計工具。 索引標籤會讀取 C# 的Form1.cs [Design]或 Visual Basic 的Form1.vb [Design]。 在 [屬性] 視窗中，設定下列表單屬性。

    • 將 Text 屬性從 Form1 變更為 [比對遊戲]。 此文字會出現在遊戲視窗的頂端。
    • 設定表單的大小。 您可以將 Size 屬性設定為 550、550，或拖曳表單的角落，直到您在 Visual Studio IDE 底部看到正確的大小，即可變更它。

  2. 選取 IDE 左側的 [ 工具箱 ] 索引標籤。 如果您沒有看到它，請從功能表列或Ctrl+Alt+X中選取 [檢視>工具箱]。

  3. TableLayoutPanel從工具箱中的 [容器] 類別拖曳控制項，或按兩下它。 在 [屬性] 視窗中設定面板的下列 屬性 。

    • 將 BackColor 屬性設定為 [CornflowerBlue]。 若要設定此屬性，請選取 BackColor 屬性旁邊的箭號。 在 [ BackColor ] 對話方塊中，選取 [Web]。 在可用的色彩名稱中，選取 [CornflowerBlue]。

      注意

      色彩不是以字母順序排序，CornflowerBlue 位在靠近清單底部的位置。

    • 選取大型中間按鈕，將 Dock 屬性設定為 [填滿 ]。 此選項會將資料表分散在外，使其涵蓋整個表單。

    • 將 CellBorderStyle 屬性設定為 [Inset]。 此值提供面板上每個儲存格之間的視覺框線。

    • 選取 TableLayoutPanel 右上角的三角形按鈕，以顯示其工作功能表。 在工作功能表上，選取 [ 新增資料列 ] 兩次，以新增兩個以上的資料列。 然後選取 [ 新增資料 行] 兩次，再新增兩個數據行。

    • 在工作功能表上，選取 [ 編輯資料列和資料行] 以開啟 [ 資料行和資料列樣式 ] 視窗。 針對每個資料行，選取 [ 百分比 ] 選項，然後將每個資料行的寬度設定為 25 %。

    • 從視窗頂端的清單中選取 [ 資料列 ]，然後將每個資料列的高度設定為 25%。

    • 當您完成時，請選取 [ 確定 ] 以儲存變更。

您的 TableLayoutPanel 現在是四位元組四方格，具有 16 個相同大小的方形儲存格。 這些資料列和資料行是圖示稍後出現的位置。

顯示 [表單] 索引標籤的螢幕擷取畫面，其中包含四個方格。

新增和格式化要顯示的標籤

在本節中，您會建立標籤並格式化，以在遊戲中顯示。

  1. 確定已在表單編輯器中選取 TableLayoutPanel。 您應該會在 [屬性] 視窗頂端看到tableLayoutPanel1。 如果未選取，請選取表單上的 TableLayoutPanel，或從 [ 屬性 ] 視窗頂端的清單選取它。

  2. 開啟工具箱，如下所示，然後開啟 [一般控制項] 類別。 Label將控制項新增至 TableLayoutPanel 的左上方儲存格。 現在已在 IDE 中選取標籤控制項。 為其設定下列屬性。

    • 將標籤的 BackColor 屬性設定為 [CornflowerBlue]。
    • 將 [AutoSize] 屬性設定為 [False]。
    • 將 Dock 屬性設定為 [Fill]。
    • 選擇屬性旁邊的下拉式按鈕，然後選取中間按鈕，將 TextAlign 屬性設定為 MiddleCenter 。 這個值可確保圖示出現在儲存格中間。
    • 選取 Font 屬性。 省略號 (...) 按鈕隨即出現。 選取省略號，並將 [字型 ] 值設定為 [Webdings]、[ 字型樣式 ] 設為 [粗體]，並將 [大小] 設定為 [48]。
    • 將標籤的 Text 屬性設定為字母 c。

    TableLayoutPanel 的左上方儲存格現在包含以藍色背景置中置中的黑色方塊。

    注意

    Webdings 是 Windows 作業系統隨附的圖示字型。 在您的比對遊戲中，玩家會比對圖示配對。 此字型會顯示要比對的圖示。

    而不是 c，請在 Text 屬性中嘗試不同的字母。 驚嘆號是一隻蜘蛛、大寫 N 是眼睛，而逗號則是一個辣椒。

  3. 選取您的標籤控制項，並將它複製到 TableLayoutPanel 中的下一個儲存格。 選取Ctrl+C鍵，或在功能表列上選取[編輯>複製]。 然後使用Ctrl+V或[編輯>貼上] 加以貼上。

    第一個標籤的複本會顯示在 TableLayoutPanel 的第二個儲存格中。 再次將它貼上，而另一個標籤會顯示在第三個欄框中。 持續貼上 Label 控制項，直到所有儲存格都已填滿為止。

此步驟會完成表單的配置。

此螢幕擷取畫面顯示具有十六個黑色方形的相符遊戲表單。

下一步

前進到下一個教學課程，瞭解如何將隨機圖示指派給每個標籤，並將事件處理常式新增至標籤。

將圖示新增至您的比對遊戲