教學課程:建立相符的遊戲 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 專案。
開啟 Visual Studio。
在 [開始] 視窗中,選取 [建立新專案]。
在 [建立新專案] 視窗中,搜尋Windows Forms。 然後從[所有專案類型] 清單中選取 [桌面]。
選取 C# 或 Visual Basic 的Windows Forms 應用程式 (.NET Framework) 範本,然後選取 [下一步]。
注意
如果您沒有看到Windows Forms應用程式 (.NET Framework) 範本,您可以從 [建立新專案] 視窗安裝它。 在 [找不到您要尋找的專案嗎?] 訊息中,選取 [安裝更多工具和功能 ] 連結。
接下來,在 [Visual Studio 安裝程式] 中,選取[.NET 桌面開發]。
在Visual Studio 安裝程式中選取[修改]。 系統可能會提示您儲存您的工作。 接下來,選取 [繼續 ] 以安裝工作負載。
在 [ 設定新專案 ] 視窗中,將專案命名為 MatchingGame,然後選取 [ 建立]。
Visual Studio 會為您的應用程式建立解決方案。 解決方案是應用程式所需所有專案和檔案的容器。
此時,Visual Studio 會在 Windows Form Designer中顯示空白表單。
為您的遊戲建立版面配置
在本節中,您會建立遊戲的四對四方格。
按一下表單以選取Windows Forms設計工具。 索引標籤會讀取 C# 的Form1.cs [Design]或 Visual Basic 的Form1.vb [Design]。 在 [屬性] 視窗中,設定下列表單屬性。
- 將 Text 屬性從 Form1 變更為 [比對遊戲]。 此文字會出現在遊戲視窗的頂端。
- 設定表單的大小。 您可以將 Size 屬性設定為 550、550,或拖曳表單的角落,直到您在 Visual Studio IDE 底部看到正確的大小,即可變更它。
選取 IDE 左側的 [ 工具箱 ] 索引標籤。 如果您沒有看到它,請從功能表列或Ctrl+Alt+X中選取 [檢視>工具箱]。
TableLayoutPanel從工具箱中的 [容器] 類別拖曳控制項,或按兩下它。 在 [屬性] 視窗中設定面板的下列 屬性 。
將 BackColor 屬性設定為 [CornflowerBlue]。 若要設定此屬性,請選取 BackColor 屬性旁邊的箭號。 在 [ BackColor ] 對話方塊中,選取 [Web]。 在可用的色彩名稱中,選取 [CornflowerBlue]。
注意
色彩不是以字母順序排序,CornflowerBlue 位在靠近清單底部的位置。
選取大型中間按鈕,將 Dock 屬性設定為 [填滿 ]。 此選項會將資料表分散在外,使其涵蓋整個表單。
將 CellBorderStyle 屬性設定為 [Inset]。 此值提供面板上每個儲存格之間的視覺框線。
選取 TableLayoutPanel 右上角的三角形按鈕,以顯示其工作功能表。 在工作功能表上,選取 [ 新增資料列 ] 兩次,以新增兩個以上的資料列。 然後選取 [ 新增資料 行] 兩次,再新增兩個數據行。
在工作功能表上,選取 [ 編輯資料列和資料行] 以開啟 [ 資料行和資料列樣式 ] 視窗。 針對每個資料行,選取 [ 百分比 ] 選項,然後將每個資料行的寬度設定為 25 %。
從視窗頂端的清單中選取 [ 資料列 ],然後將每個資料列的高度設定為 25%。
當您完成時,請選取 [ 確定 ] 以儲存變更。
您的 TableLayoutPanel 現在是四位元組四方格,具有 16 個相同大小的方形儲存格。 這些資料列和資料行是圖示稍後出現的位置。
新增和格式化要顯示的標籤
在本節中,您會建立標籤並格式化,以在遊戲中顯示。
確定已在表單編輯器中選取 TableLayoutPanel。 您應該會在 [屬性] 視窗頂端看到tableLayoutPanel1。 如果未選取,請選取表單上的 TableLayoutPanel,或從 [ 屬性 ] 視窗頂端的清單選取它。
開啟工具箱,如下所示,然後開啟 [一般控制項] 類別。 Label將控制項新增至 TableLayoutPanel 的左上方儲存格。 現在已在 IDE 中選取標籤控制項。 為其設定下列屬性。
- 將標籤的 BackColor 屬性設定為 [CornflowerBlue]。
- 將 [AutoSize] 屬性設定為 [False]。
- 將 Dock 屬性設定為 [Fill]。
- 選擇屬性旁邊的下拉式按鈕,然後選取中間按鈕,將 TextAlign 屬性設定為 MiddleCenter 。 這個值可確保圖示出現在儲存格中間。
- 選取 Font 屬性。 省略號 (...) 按鈕隨即出現。 選取省略號,並將 [字型 ] 值設定為 [Webdings]、[ 字型樣式 ] 設為 [粗體],並將 [大小] 設定為 [48]。
- 將標籤的 Text 屬性設定為字母 c。
TableLayoutPanel 的左上方儲存格現在包含以藍色背景置中置中的黑色方塊。
注意
Webdings 是 Windows 作業系統隨附的圖示字型。 在您的比對遊戲中,玩家會比對圖示配對。 此字型會顯示要比對的圖示。
而不是 c,請在 Text 屬性中嘗試不同的字母。 驚嘆號是一隻蜘蛛、大寫 N 是眼睛,而逗號則是一個辣椒。
選取您的標籤控制項,並將它複製到 TableLayoutPanel 中的下一個儲存格。 選取Ctrl+C鍵,或在功能表列上選取[編輯>複製]。 然後使用Ctrl+V或[編輯>貼上] 加以貼上。
第一個標籤的複本會顯示在 TableLayoutPanel 的第二個儲存格中。 再次將它貼上,而另一個標籤會顯示在第三個欄框中。 持續貼上 Label 控制項,直到所有儲存格都已填滿為止。
此步驟會完成表單的配置。
下一步
前進到下一個教學課程,瞭解如何將隨機圖示指派給每個標籤,並將事件處理常式新增至標籤。