Tutorial: Hinzufügen von Symbolen zu Ihrer WinForms-App für Ihr Memory-Spiel

In dieser Serie von vier Tutorials erstellen Sie ein Memory-Spiel, bei dem der Spieler Paare von verdeckten Symbolen abgleichen muss.

Im Memory-Spiel wählt ein Spieler ein Quadrat aus, um ein Symbol anzuzeigen. Anschließend wählt er ein anderes Quadrat aus. Wenn die Symbole übereinstimmen, bleiben sie sichtbar. Ist dies nicht der Fall, blendet das Spiel beide Symbole aus. In diesem Tutorial weisen Sie Bezeichnungen nach dem Zufallsprinzip Symbole zu. Sie legen fest, dass sie ausgeblendet und dann angezeigt werden, wenn sie ausgewählt werden.

In diesem zweiten Tutorial lernen Sie, wie die folgenden Aufgaben ausgeführt werden:

• Hinzufügen eines zufällig ausgewählten Objekts und einer Liste von Symbolen.
• Zuweisen eines zufälligen Symbols zu jeder Bezeichnung.
• Hinzufügen von Ereignishandlern zu den Bezeichnungen, die Symbole anzeigen.

Voraussetzungen

Dieses Tutorial baut auf dem vorherigen Tutorial Erstellen eines Memory-Spiels auf. Wenn Sie dieses Tutorial noch nicht abgeschlossen haben, arbeiten Sie es zuerst durch.

Hinzufügen eines zufällig ausgewählten Objekts und einer Liste von Symbolen

In diesem Abschnitt erstellen Sie einen Satz von Symbolen für das Memory-Spiel. Jedes Symbol wird zwei zufällig ausgewählten Zellen im TableLayoutPanel auf dem Formular hinzugefügt.

Sie verwenden new-Anweisungen, um zwei Objekte zu erstellen. Das erste ist ein Random-Objekt, das Zellen in TableLayoutPanel nach dem Zufallsprinzip auswählt. Das zweite Objekt ist ein List<T>-Objekt. Es speichert die zufällig ausgewählten Symbole.

1. Öffnen Sie Visual Studio. Ihr Projekt MatchingGame wird unter Zuletzt verwendetes öffnen angezeigt.

2. Wählen Sie Form1.cs aus, wenn Sie C# verwenden, oder Form1.vb, wenn Sie Visual Basic verwenden. Wählen Sie dann Code Anzeigen>Code aus. Wählen Sie alternativ F7 aus, oder doppelklicken Sie auf Form1. Die Visual Studio-IDE zeigt das Codemodul für Form1 an.

3. Fügen Sie im vorhandenen Code den folgenden Code hinzu.

   C#

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

   VB

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

---

Wichtig

Verwenden Sie das Programmiersprachensteuerelement oben rechts auf dieser Seite, um entweder den C#-Codeausschnitt oder den Visual Basic-Codeausschnitt anzuzeigen.

Achten Sie bei der Verwendung von C#-Code darauf, dass Sie den Code nach der öffnenden geschweiften Klammer und direkt nach der Klassendeklaration (public partial class Form1 : Form) einfügen. Sofern Sie Visual Basic verwenden, müssen Sie den Code direkt nach der Klassendeklaration (Public Class Form1) einfügen.

Sie können Listenobjekte verwenden, um verschiedene Elementtypen nachzuverfolgen. Eine Liste kann Zahlen, Wahr/Falsch-Werte, Text oder andere Objekte enthalten. In Ihrem Memory-Spiel weist das Listenobjekt 16 Zeichenfolgen auf, eine Zeichenfolge für jede Zelle im TableLayoutPanel-Bereich. Jede Zeichenfolge ist ein einzelner Buchstabe, der den Symbolen in den Bezeichnungen entspricht. Diese Zeichen werden in der Schriftart Webdings als Bus, Fahrrad usw. angezeigt.

Hinweis

Listen können kürzer oder länger werden, was für dieses Programm wichtig ist.

Weitere Informationen zu Listen finden Sie unter List<T>. Ein Beispiel in C# finden Sie unter Ein einfaches Listenbeispiel. Ein Beispiel in Visual Basic finden Sie unter Verwenden einer einfachen Sammlung.

Zuweisen eines zufälligen Symbols zu jeder Bezeichnung

Bei jeder Ausführung des Programms werden die Symbole mithilfe einer AssignIconsToSquares()-Methode zufällig den Bezeichnungssteuerelementen des Formulars zugewiesen. Dieser Code verwendet das Schlüsselwort foreach in C# oder For Each in Visual Basic.

1. Fügen Sie die AssignIconsToSquares()-Methode hinzu.

   C#

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

   VB

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

---

Sie können diesen Code direkt unterhalb des Codes eingeben, den Sie im vorherigen Abschnitt hinzugefügt haben.

Hinweis

Eine der Zeilen ist absichtlich auskommentiert. Sie fügen es später in diesem Verfahren hinzu.

Die AssignIconsToSquares()-Methode durchläuft jedes Bezeichnungssteuerelement in TableLayoutPanel. Sie führt die gleichen Anweisungen für jedes von ihnen aus. Die Anweisungen pullen ein zufälliges Symbol aus der Liste.

• In der ersten Zeile wird die Variable control in eine Bezeichnung mit dem Namen iconLabel konvertiert.
• Die zweite Zeile ist eine if-Anweisung, die prüft, ob die Konvertierung funktioniert hat. Wenn die Konvertierung funktioniert, werden die Anweisungen innerhalb der if-Anweisung ausgeführt.
• Mit der ersten Zeile der if-Anweisung wird die Variable randomNumber erstellt, die eine Zufallszahl enthält, die einem der Elemente in der Symbolliste entspricht. Sie verwendet die Next()-Methode des Random-Objekts. Die Next-Methode gibt eine Zufallszahl zurück. Diese Zeile verwendet auch die Count-Eigenschaft der icons-Liste, um den Bereich festzulegen, aus dem die Zufallszahl ausgewählt werden soll.
• In der nächsten Zeile wird eines der Elemente aus der Liste icons der Eigenschaft Text der Bezeichnung zugewiesen.
• Die nächste Zeile blendet die Symbole aus. Die Zeile ist hier auskommentiert, damit Sie den Rest des Codes überprüfen können, bevor Sie fortfahren.
• In der letzten Zeile der if-Anweisung wird das Symbol, das dem Formular hinzugefügt wurde, aus der Liste entfernt.

1. Fügen Sie einen Aufruf der AssignIconsToSquares()-Methode im Konstruktor von Form1 hinzu. Diese Methode füllt das Spielfeld mit Symbolen. Konstruktoren werden bei der Erstellung eines Objekts aufgerufen.

   public Form1()
   {
       InitializeComponent();
   
       AssignIconsToSquares();
   }
   

   Fügen Sie der Form1_Load-Methode für Visual Basic den AssignIconsToSquares()-Methodenaufruf hinzu.

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

   Weitere Informationen finden Sie unter Konstruktoren (C#-Programmierleitfaden) oder Verwenden von Konstruktoren und Destruktoren.

2. Speichern Sie das Programm, und führen Sie es aus. Es sollte ein Formular mit zufälligen Symbolen angezeigt werden, die den einzelnen Bezeichnungen zugewiesen sind.

   Tipp

   Wenn die Webdings-Symbole im Formular nicht ordnungsgemäß angezeigt werden, legen Sie die Eigenschaft UseCompatibleTextRendering von Bezeichnungen im Formular auf TRUE fest.

3. Schließen Sie das Programm, und führen Sie es erneut aus. Jeder Bezeichnung werden unterschiedliche Symbole zugewiesen.

   

   Die Symbole sind jetzt sichtbar, weil sie nicht ausgeblendet wurden. Um sie vor dem Spieler zu verbergen, können Sie für die ForeColor-Eigenschaft jeder Bezeichnung die Farbe der BackColor-Eigenschaft verwenden.

4. Beenden des Programms Entfernen Sie die Kommentarmarkierungen für die kommentierte Codezeile innerhalb der Schleife.

   C#

   iconLabel.ForeColor = iconLabel.BackColor;
   

   VB

   iconLabel.ForeColor = iconLabel.BackColor
   

---

Wenn Sie das Programm erneut ausführen, scheinen die Symbole nicht mehr angezeigt zu werden. Es wird nur ein blauer Hintergrund angezeigt. Die Symbole werden jedoch zufällig zugewiesen und sind immer noch vorhanden.

Hinzufügen von Ereignishandlern zu Bezeichnungen

In diesem Memory-Spiel zeigt ein Spieler ein ausgeblendetes Symbol und dann ein zweites an. Wenn die Symbole übereinstimmen, bleiben sie sichtbar. Andernfalls werden beide Symbole erneut ausgeblendet.

Damit Ihr Spiel auf diese Weise funktioniert, fügen Sie einen Click-Ereignishandler hinzu, der die Farbe der ausgewählten Bezeichnung so ändert, dass die dem Hintergrund entspricht.

1. Öffnen Sie das Formular im Windows Forms-Designer. Wählen Sie Form1.cs oder Form1.vb und dann Ansicht>Designer aus.

2. Wählen Sie das erste Bezeichnungssteuerelement aus, und doppelklicken Sie darauf, um dem Code einen Click-Ereignishandler namens label1_Click() hinzuzufügen.

3. Halten Sie dann die STRG-TASTE gedrückt, während Sie nacheinander die anderen Bezeichnungen auswählen. Achten Sie darauf, dass jede Bezeichnung ausgewählt wird.

4. Wählen Sie im Fenster Eigenschaften die Schaltfläche Ereignisse aus, die ein Blitzsymbol zeigt. Wählen Sie für das Click-Ereignis die Option label1_Click im Feld aus.

   

5. Drücken Sie die EINGABETASTE. Die IDE fügt dem Code einen Click-Ereignishandler namens label1_Click() hinzu. Da Sie alle Bezeichnungen ausgewählt haben, ist der Handler mit jeder der Bezeichnungen verbunden.

6. Fügen Sie den Rest des Codes ein.

   C#

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

   VB

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

---

Hinweis

Wenn Sie den label1_Click()-Codeblock nicht manuell eingeben, sondern ihn kopieren und einfügen, achten Sie darauf, den vorhandenen label1_Click()-Code zu ersetzen. Andernfalls erhalten Sie einen doppelten Codeblock.

Um Ihr Programm auszuführen, wählen Sie Debuggen>Debuggen starten aus. Es wird ein leeres Formular mit einem blauen Hintergrund angezeigt. Wählen Sie eine beliebige Zelle im Formular aus. Eines der Symbole sollte sichtbar werden. Setzten Sie die Auswahl mit anderen Stellen im Formular fort. Wenn Sie die Symbole wählen, sollten diese angezeigt werden.

Nächste Schritte

Im nächsten Tutorial erfahren Sie, wie Sie Bezeichnungen mithilfe eines Timers ändern.

Verwenden eines Timers in Ihrem Memory-Spiel