共用方式為

教學課程：將圖示新增至相符的遊戲 WinForms 應用程式

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

在比對遊戲中，玩家會選取一個正方形來查看圖示，然後選擇另一個方塊。 如果圖示相符，它們會保持可見狀態。 如果沒有，遊戲會隱藏這兩個圖示。 在本教學課程中，您會隨機指派圖示給標籤。 您可以將它們設定為隱藏，然後在選取時顯示。

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

  • 新增 Random 對象和圖示清單。
  • 將隨機圖示指派給每個標籤。
  • 將顯示圖示的事件處理程式新增至標籤。

先決條件

本教學課程是以上一個教學課程 創建配對遊戲應用程式為基礎。 如果您尚未完成該教學課程，請先完成該教學課程。

新增 Random 對象和圖示清單

在本節中，您會為遊戲建立一組相符符號。 每個符號都會新增至表單上 TableLayoutPanel 中的兩個隨機單元格。

您可以使用 new 語句來建立兩個物件。 第一個是 Random 物件，會隨機選擇 TableLayoutPanel 中的單元格。 第二個物件是 List<T> 物件。 它會儲存隨機選擇的符號。

  1. 開啟 Visual Studio。 您的 MatchingGame 專案會出現在 [開啟最近的] 底下。

  2. 如果您使用 C#，請選取 Form1.cs；如果您使用 Visual Basic，請選取 Form1.vb。 然後選取 [檢視>程式碼]。 或者，選取 F7 鍵，或按兩下 Form1。 Visual Studio IDE 會顯示 Form1 的程式代碼模組。

  3. 在現有的程式代碼中，新增下列程序代碼。

    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"
    };

如果您使用 C#，請務必將程式代碼放在左大括弧後面，並在類別宣告之後（public partial class Form1 : Form）。 如果您使用 Visual Basic，請將程式代碼放在類別宣告之後（Public Class Form1）。

您可以使用清單物件來追蹤不同類型的專案。 清單可以保存數位、true/false 值、文字或其他物件。 在您的比對遊戲中，清單物件有16個字元串，每個儲存格在 TableLayoutPanel 面板中各有一個字串。 每個字串都是對應至標籤圖示的單一字母。 這些字元在 Webdings 字型中呈現為公共汽車、自行車等其他圖案。

注意

清單可以視需要縮小和成長，這在此程式中很重要。

若要深入瞭解清單，請參閱 List<T>。 若要查看 C# 中的範例，請參閱 的基本清單範例。 若要查看 Visual Basic 中的範例，請參閱 使用簡單集合。

將隨機圖示指派給每個標籤

每次執行程式時，都會使用 AssignIconsToSquares() 方法，隨機將圖示指派給表單上的 Label 控制件。 此程式代碼使用 C# 中的 關鍵詞 foreach，或在 Visual Basic 中使用 For Each。

  1. 將 AssignIconsToSquares() 方法新增至 Form1.cs 或 Form1.vb。

    /// <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);
        }
    }
}

您可以在上一節中新增的程式代碼正下方輸入此程式代碼。

注意

其中一行是故意批注的。 您稍後會在此程序中新增它。

AssignIconsToSquares() 方法會逐一查看 TableLayoutPanel 中的每個標籤控件。 它會針對每個元素執行相同的操作。 語句會從清單中提取隨機圖示。

  • 第一行會將 控制項 變數轉換成名為 iconLabel 的標籤。
  • 第二行是 if 語句，會檢查以確保轉換正常運作。 如果轉換運作正常，則 if 語句中的語句會執行。
  • if 語句中的第一行會建立一個名為 randomNumber 的變數 randomNumber，該變數包含一個隨機數，對應於圖標清單中的某個項目。 它會使用 Next() 物件的 Random 方法。 Next 方法會傳回隨機數。 這一行也會使用 Count 清單的 屬性來判斷要從中選擇隨機數的範圍。
  • 下一行會將 清單中的一個 圖示指派給標籤的 Text 屬性。
  • 下一行會隱藏圖示。 此行會在此加上批注，因此您可以在繼續之前先驗證其餘程序代碼。
  • if 語句中的最後一行會從清單中移除已新增至表單的圖示。

  1. 請在 AssignIconsToSquares()中將 方法呼叫新增至 Form1Form1.cs。 這個方法會以圖示填滿遊戲板。 當您建立 物件時，會呼叫建構函式。

    public Form1()
{
    InitializeComponent();

    AssignIconsToSquares();
}

    針對 Visual Basic，將 AssignIconsToSquares() 方法呼叫新增至 Form1_Load中的 Form1.vb 方法。

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    AssignIconsToSquares()
End Sub

    如需詳細資訊，請參閱 建構函式（C# 程式設計指南） 或 使用建構函式和解構函式。

  2. 儲存程式並加以執行。 它應該會顯示一個窗體，其中包含指派給每個標籤的隨機圖示。

    提示

    如果 Webdings 圖示未正確顯示在表單上，請將表單上標籤的 UseCompatibleTextRendering 屬性設定為 True。

  3. 關閉程式，然後再次執行。 不同的圖示會指派給每個標籤。

    螢幕快照顯示顯示隨機圖示的比對遊戲。

    圖示現在會顯示，因為您尚未隱藏這些圖示。 若要從播放程式隱藏它們，您可以將每個標籤的 ForeColor 屬性設定為與其 BackColor 屬性相同的色彩。

  4. 停止程式。 拿掉 AssignIconsToSquares() 方法中迴圈內程式代碼行的註解標記。

    iconLabel.ForeColor = iconLabel.BackColor;

如果您再次執行程式，圖示似乎已經消失。 只有藍色背景出現。 圖示會隨機指派，但仍存在。

將事件處理程式新增至標籤

在此比對遊戲中，玩家會顯示隱藏的圖示，然後顯示第二個圖示。 如果圖示相符，它們會保持可見狀態。 否則，兩個圖示都會再次隱藏。

若要讓您的遊戲以這種方式運作，請新增 Click 事件處理程式，以變更所選卷標的色彩以符合背景。

  1. 在 Windows Forms 設計工具中開啟表單，。 選取 [Form1.cs] 或 [Form1.vb]，然後選取 [檢視>設計檢視]。

  2. 選擇第一個標籤控件並雙擊以將名為 Click 事件處理程式 label1 _Click() 新增至程式代碼。

  3. 然後，當您選取其他標籤時，按住 Ctrl 鍵。 請確定已選取每個標籤。

  4. 在 [ 屬性] 視窗中，選取 [ 事件 ] 按鈕，也就是閃電。 針對 [Click 事件]，在方塊中選取 [label1_Click]。

    螢幕快照顯示 [屬性] 視窗，其中顯示 Click 事件。

  5. 選取 [Enter] 鍵。 IDE 會將名為 Click） 的 事件處理程式新增至 Form1.cs 或 Form1.vb中的程式代碼。 因為您選取了所有標籤，因此處理程式會連結至每個標籤。

  6. 填入其餘程序代碼。

    /// <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;
    }
 }

注意

如果您複製並貼上 label1_Click() 程式代碼區塊，而不是手動輸入程式碼，請務必取代現有的 label1_Click() 程式代碼。 否則，您最後會有重複的程式碼區塊。

選取 [偵錯]、、>、和 [開始偵錯] 以執行您的程式。 您應該會看到具有藍色背景的空白表單。 選擇表單中的任何儲存格。 其中一個圖示應該會顯示出來。 繼續選擇表單中的不同位置。 當您選擇圖示時，它們應該會出現。

螢幕快照顯示比對遊戲，其中僅有一個圖示可見。

後續步驟

前進到下一個教學課程，瞭解如何使用定時器變更標籤。

在您的比對遊戲中使用定時器

  • Last updated on