Tutorial: Erstellen einer WinForms-App für ein Memory-Spiel

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

Verwenden Sie diese Tutorials, um mehr über die folgenden Aufgaben in der Visual Studio-IDE (Integrated Design Environment) zu erfahren.

• Speichern von Objekten (beispielsweise Symbole) in einem List<T>-Objekt
• Verwenden einer foreach-Schleife in C# und einer For Each-Schleife in Visual Basic, um die Elemente einer Liste zu durchlaufen
• Speichern des Formularzustands mithilfe von Verweisvariablen
• Erstellen eines Ereignishandlers für mehrere Objekte zum Reagieren auf Ereignisse
• Erstellen eines Zeitgebers, der nach dem Start und Ablauf einer bestimmten Zeit genau ein Ereignis auslöst

Wenn Sie fertig sind, verfügen Sie über ein vollständiges Spiel.

In diesem ersten Tutorial lernen Sie Folgendes:

• Erstellen eines Visual Studio-Projekts, das Windows Forms verwendet.
• Hinzufügen und Formatieren eines Layoutelements.
• Hinzufügen und Formatieren von anzuzeigenden Bezeichnungen.

Voraussetzungen

Für dieses Tutorial benötigen Sie Visual Studio. Besuchen Sie die Seite Visual Studio-Downloads, um eine kostenlose Version zu erhalten.

Erstellen Ihres Windows Forms-Memory-Spielprojekts

Beim Erstellen Ihres Memory-Spiels erstellen Sie im ersten Schritt ein Windows Forms-App-Projekt.

1. Öffnen Sie Visual Studio.

2. Klicken Sie im Startfenster auf Neues Projekt erstellen.

   

3. Suchen Sie im Fenster Neues Projekt erstellen nach Windows Forms. Wählen Sie dann in der Liste Alle Projekttypen die Option Desktop aus.

4. Wählen Sie die Vorlage Windows Forms App (.NET Framework) für C# oder Visual Basic aus, und klicken Sie dann auf Weiter.

   

   Hinweis

   Wenn die Vorlage Windows Forms-App (.NET Framework) nicht angezeigt wird, können Sie sie über das Fenster Neues Projekt erstellen installieren. Wählen Sie in der Meldung Sie finden nicht, wonach Sie suchen? den Link Weitere Tools und Features installieren aus.

   

   Wählen Sie dann im Visual Studio-Installer .NET-Desktopentwicklung aus.

   

   Wählen Sie im Visual Studio-Installer Ändern aus. Möglicherweise werden Sie aufgefordert, Ihre Arbeit zu speichern. Wählen Sie als Nächstes Weiter aus, um die Arbeitsauslastung zu installieren.

5. Geben Sie ihrem Projekt im Fenster Neues Projekt konfigurieren den Namen MatchingGame, und wählen Sie dann Erstellen aus.

   

Visual Studio erstellt eine Projektmappe für die App. Eine Projektmappe ist ein Container für alle Projekte und Dateien, die Ihre App benötigt.

An diesem Punkt zeigt Visual Studio ein leeres Formular im Windows Form-Designer an.

Erstellen eines Layouts für Ihr Spiel

In diesem Abschnitt erstellen Sie das 4x4-Raster des Spiels.

1. Klicken Sie auf das Formular,um den Windows Forms-Designer auszuwählen. Die Registerkarte trägt den Namen Form1.cs [Design] für C# bzw. Form1.vb [Design] für Visual Basic. Legen Sie im Fenster Eigenschaften die folgenden Formulareigenschaften fest.

   • Ändern Sie die Eigenschaft Text von Form1 in Matching Game. Dieser Text wird oben im Spielfenster angezeigt.
   • Legen Sie die Größe des Formulars fest. Sie können sie ändern, indem Sie entweder die Size-Eigenschaft auf 550, 550 festlegen, oder indem Sie die Ecke des Formulars ziehen, bis unten in der Visual Studio-IDE die richtige Größe angezeigt wird.

2. Wählen Sie in der auf der linken Seite der IDE auf die Registerkarte Toolbox aus. Wenn sie nicht angezeigt wird, wählen Sie in der Menüleiste Ansicht>Toolbox aus, oder verwenden Sie STRG+ALT+X.

3. Ziehen Sie ein TableLayoutPanel-Steuerelement aus der Kategorie Container in der Toolbox, oder doppelklicken Sie darauf. Legen Sie im Fenster Eigenschaften die folgenden Eigenschaften für den Bereich fest.

   • Legen Sie die Eigenschaft BackColor (Hintergrundfarbe) auf CornflowerBlue (CornflowerBlue) fest. Wählen Sie zum Festlegen dieser Eigenschaft den Pfeil neben der BackColor-Eigenschaft aus. Wählen Sie im Dialogfeld BackColor die Option Web aus. Wählen Sie unter den verfügbaren Farbnamen die Option CornflowerBlue aus.

     Hinweis

     Die Farben sind nicht alphabetisch geordnet, und CornflowerBlue steht fast am Ende der Liste.

   • Legen Sie die Dock-Eigenschaft in der Dropdownliste auf Füllen fest, indem Sie die große mittlere Schaltfläche auswählen. Dadurch wird die Tabelle so vergrößert, dass sie das gesamte Formular ausfüllt.

   • Legen Sie die Eigenschaft CellBorderStyle (Stil des Zellenrahmens) auf Inset (Abgesenkt) fest. Durch diesen Wert werden die Zellen auf dem Spielfeld mit Rahmen angezeigt.

   • Wählen Sie in der oberen rechten Ecke von TableLayoutPanel die dreieckige Schaltfläche aus, um das Aufgabenmenü anzuzeigen. Wählen Sie im Aufgabenmenü zwei Mal Zeile hinzufügen aus, um zwei weitere Zeilen hinzuzufügen. Wählen Sie dann zwei Mal Spalte hinzufügen aus, um zwei weitere Spalten hinzuzufügen.

   • Wählen Sie im Aufgabenmenü Zeilen und Spalten bearbeiten aus, um das Fenster Spalten- und Zeilenstile anzuzeigen. Wählen Sie für jede Spalte die Option Prozent aus, und legen Sie dann die Breite jeder Spalte auf 25 Prozent fest.

   • Wählen Sie anschließend am oberen Fensterrand in der Liste die Option Zeilen aus, und legen Sie die Höhe der einzelnen Zeilen auf 25 Prozent fest.

   • Wenn Sie fertig sind, wählen Sie OK aus, um Ihre Änderungen zu speichern.

TableLayoutPanel ist jetzt ein 4x4-Raster mit 16 gleich großen quadratischen Zellen. In diesen Zeilen und Spalten werden später die Symbole angezeigt.

Hinzufügen und Formatieren von anzuzeigenden Bezeichnungen

In diesem Abschnitt erstellen und formatieren Sie Bezeichnungen, die während des Spiels angezeigt werden.

1. Stellen Sie sicher, dass TableLayoutPanel im Formular-Editor ausgewählt ist. tableLayoutPanel1 sollte oben im Fenster Eigenschaften angezeigt werden. Wenn TableLayoutPanel nicht ausgewählt ist, wählen Sie dieses Element im Formular aus, oder wählen Sie es aus der Liste am oberen Rand des Fensters Eigenschaften aus.

2. Öffnen Sie wie zuvor die Toolbox, und öffnen Sie dann die Kategorie Allgemeine Steuerelemente. Fügen Sie der linken oberen Zelle von TableLayoutPanel ein Label-Steuerelement hinzu. Das Bezeichnungssteuerelement ist jetzt in der IDE ausgewählt. Legen Sie die folgenden Eigenschaften für das Bezeichnungsfeld fest:

   • Legen Sie die BackColor-Eigenschaft der Bezeichnung auf CornflowerBlue fest.
   • Legen Sie die AutoSize-Eigenschaft auf False fest.
   • Legen Sie die Eigenschaft Dock auf Fill fest.
   • Legen Sie die TextAlign-Eigenschaft (Textausrichtung) auf MiddleCenter fest, indem Sie neben der Eigenschaft die Dropdownschaltfläche und dann die mittlere Schaltfläche auswählen. Dieser Wert stellt sicher, dass das Symbol in der Mitte der Zelle angezeigt wird.
   • Wählen Sie die Font-Eigenschaft aus. Eine Schaltfläche mit einem Auslassungszeichen ( … ) wird angezeigt. Wählen Sie die Schaltfläche mit den Auslassungspunkten aus, und legen Sie Schrift auf Webdings, Schriftschnitt auf Fett und Größe auf 48 fest.
   • Legen Sie die Eigenschaft Text der Bezeichnung auf den Buchstaben c fest.

   Die linke obere Zelle in TableLayoutPanel enthält jetzt ein schwarzes Quadrat, das mittig vor einem blauen Hintergrund zentriert ist.

   Hinweis

   Webdings ist eine Symbolschriftart, die im Lieferumfang des Betriebssystems Windows enthalten ist. In Ihrem Memory-Spiel gleicht der Spieler Symbolpaare ab. In dieser Schriftart werden die abzugleichenden Symbole angezeigt.

   Probieren Sie anstelle von c verschiedene Buchstaben in der Text-Eigenschaft aus. Ein Ausrufezeichen ist eine Spinne, ein großes N ist ein Auge, und ein Komma ist eine Chilischote.

3. Wählen Sie das Label-Steuerelement aus, und kopieren Sie es in die nächste Zelle in TableLayoutPanel. Drücken Sie STRG+C, oder klicken Sie in der Menüleiste auf Bearbeiten>Kopieren. Fügen Sie es dann mit STRG+V oder Bearbeiten>Einfügen ein.

   Eine Kopie der ersten Bezeichnung wird in der zweiten Zelle im TableLayoutPanel angezeigt. Fügen Sie das Steuerelement erneut ein. In der dritten Zelle wird eine weitere Bezeichnung angezeigt. Fahren Sie mit dem Einfügen der Label-Steuerelemente fort, bis alle Zellen ausgefüllt sind.

Mit diesem Schritt wird das Layout für das Formular abgeschlossen.

Nächste Schritte

Im nächsten Tutorial erfahren Sie, wie Sie jeder Bezeichnung ein zufälliges Symbol zuweisen und Bezeichnungen Ereignishandler hinzufügen.

Hinzufügen von Symbolen zu Ihrem Memory-Spiel