Freigeben über

Tutorial: Hinzufügen von Symbolen zu Ihrer WinForms-Zuordnungsspiel-App

  • Artikel

In dieser Reihe von vier Lernprogrammen erstellen Sie ein passendes Spiel, bei dem der Spieler Paare von ausgeblendeten Symbolen abgleicht.

Beim Zuordnungsspiel wählt ein Spieler ein Quadrat aus, um ein Symbol zu sehen, und wählt dann ein weiteres Quadrat aus. Wenn die Symbole übereinstimmen, bleiben sie sichtbar. Wenn nicht, 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 sind.

In diesem zweiten Lernprogramm erfahren Sie, wie Sie:

  • Fügen Sie ein Random-Objekt und eine Liste von Symbolen hinzu.
  • Weisen Sie jedem Etikett ein zufälliges Symbol zu.
  • Fügen Sie Ereignishandler hinzu, die Symbole auf den Labels anzeigen.

Voraussetzungen

Dieses Lernprogramm basiert auf dem vorherigen Lernprogramm Erstellen einer passenden Spielanwendung. Wenn Sie dieses Lernprogramm noch nicht abgeschlossen haben, machen Sie zuerst dieses Tutorial.

Hinzufügen eines Random-Objekts und einer Liste von Symbolen

In diesem Abschnitt erstellen Sie eine Reihe von übereinstimmenden Symbolen für das Spiel. Jedes Symbol wird zwei zufälligen Zellen im TableLayoutPanel im Formular hinzugefügt.

Sie verwenden new Anweisungen, um zwei Objekte zu erstellen. Der erste ist ein Random-Objekt, das zufällig Zellen im TableLayoutPanel auswäht. 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 verwendete Dateien ö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 die F7-taste 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.

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

Wenn Sie C# verwenden, stellen Sie sicher, dass Sie den Code nach der öffnenden geschweiften Klammer und direkt nach der Klassendeklaration (public partial class Form1 : Form) platzieren. Wenn Sie Visual Basic verwenden, platzieren Sie den Code direkt hinter der Klassendeklaration (Public Class Form1).

Sie können Listenobjekte verwenden, um verschiedene Arten von Elementen 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 Etiketten entspricht. Diese Zeichen werden in der Schriftart "Webdings" als Bus, Fahrrad und andere Zeichen angezeigt.

Anmerkung

Listen können sich nach Bedarf verkleinern und vergrößern, was in diesem 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 Using a Simple Collection.

Zuweisen eines zufälligen Symbols zu jeder Beschriftung

Jedes Mal, wenn Sie das Programm ausführen, weist es die Symbole zufällig den Bezeichnungssteuerelementen in Ihrem Formular mithilfe einer AssignIconsToSquares()-Methode zu. Dieser Code verwendet das Schlüsselwort foreach in C# oder For Each in Visual Basic.

  1. Fügen Sie die AssignIconsToSquares() Methode zum Form1.cs oder Form1.vbhinzu.

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

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

Anmerkung

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

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

  • In der ersten Zeile wird das Steuerelement Variable in eine Beschriftung mit dem Namen iconLabelkonvertiert.
  • Die zweite Zeile ist eine if Anweisung, die überprüft, ob die Konvertierung funktioniert hat. Wenn die Konvertierung funktioniert, werden die Anweisungen in der if-Anweisung ausgeführt.
  • Die erste Zeile in der if-Anweisung erstellt eine Variable mit dem Namen randomNumber, die eine Zufallszahl enthält, die einem der Elemente in der Symbolliste entspricht. Es verwendet die Next()-Methode des Random-Objekts. Die Next-Methode gibt die Zufallszahl zurück. Diese Zeile verwendet auch die Count-Eigenschaft der Symbole Liste, um den Bereich zu bestimmen, aus dem die Zufallszahl ausgewählt werden soll.
  • In der nächsten Zeile wird eines der -Symbole aus den-Listenelementen der Eigenschaft Text des Labels 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.
  • Die letzte Zeile in der if-Anweisung entfernt das Symbol, das dem Formular hinzugefügt wurde, aus der Liste.

  1. Fügen Sie einen Aufruf der AssignIconsToSquares()-Methode im Konstruktor von Form1 in Form1.cs hinzu. Diese Methode füllt das Spielbrett mit Symbolen. Konstruktoren werden aufgerufen, wenn Sie ein Objekt erstellen.

    public Form1()
{
    InitializeComponent();

    AssignIconsToSquares();
}

    Fügen Sie für Visual Basic den AssignIconsToSquares()-Methodenaufruf zur Form1_Load-Methode in Form1.vbhinzu.

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

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

  2. Speichern Sie Ihr 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 UseCompatibleTextRendering- eigenschaft von Beschriftungen im Formular auf Truefest.

  3. Schließen Sie Das Programm, und führen Sie es dann erneut aus. Jedem Etikett werden unterschiedliche Symbole zugewiesen.

    Screenshot: Memory-Spiel mit den zufälligen Symbolen

    Die Symbole sind jetzt sichtbar, da Sie sie nicht ausgeblendet haben. Um sie vom Spieler auszublenden, können Sie die ForeColor-Eigenschaft jedes Etiketts auf dieselbe Farbe festlegen wie die BackColor-Eigenschaft.

  4. Beenden Sie das Programm. Entfernen Sie die Kommentarzeichen für die kommentierte Codezeile in der Schleife in der AssignIconsToSquares()-Methode.

    iconLabel.ForeColor = iconLabel.BackColor;

Wenn Sie das Programm erneut ausführen, scheinen die Symbole verschwunden zu sein. Es wird nur ein blauer Hintergrund angezeigt. Die Symbole werden zufällig zugewiesen und sind weiterhin vorhanden.

Hinzufügen von Ereignishandlern zu Bezeichnungen

In diesem Zuordnungsspiel zeigt ein Spieler ein verborgenes Symbol und dann ein zweites. Wenn die Symbole übereinstimmen, bleiben sie sichtbar. Andernfalls werden beide Symbole wieder ausgeblendet.

Fügen Sie einen Click-Ereignishandler hinzu, der die Farbe der ausgewählten Beschriftung an den Hintergrund anpasst, damit Ihr Spiel auf diese Weise funktioniert.

  1. Öffnen Sie das Formular im Windows Forms Designer. Wählen Sie Form1.cs oder Form1.vbaus, und wählen Sie dann Ansicht>Designeraus.

  2. Wählen Sie das erste Label-Steuerelement 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 die anderen Beschriftungen auswählen. Achten Sie darauf, dass jede Bezeichnung ausgewählt wird.

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

    Screenshot zeigt das Fenster

  5. Wählen Sie die EINGABETASTE aus. Die IDE fügt dem Code in Form1.cs oder Form1.vbeinen Click Ereignishandler namens label1 _Click() hinzu. Da Sie alle Bezeichnungen ausgewählt haben, ist der Handler mit jeder der Bezeichnungen verbunden.

  6. Füllen Sie den restlichen Code aus.

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

Anmerkung

Wenn Sie den label1_Click() Codeblock kopieren und einfügen, anstatt den Code manuell einzugeben, vergewissern Sie sich, 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 sollte ein leeres Formular mit blauem Hintergrund angezeigt werden. Wählen Sie eine der Zellen im Formular aus. Eines der Symbole sollte sichtbar werden. Wählen Sie weiterhin verschiedene Stellen im Formular aus. Während Sie die Symbole auswählen, sollten sie angezeigt werden.

Screenshot: Memory-Spiel mit einem einzelnen sichtbaren Symbol

Nächste Schritte

Wechseln Sie zum nächsten Tutorial, um zu lernen, wie Sie Labels mithilfe eines Timers ändern.

Verwenden Sie einen Timer in Ihrem Zuordnungsspiel