Freigeben über

Anleitung: Erstellen einer Windows Forms-Matching-Spiel-App

  • Artikel

In dieser Reihe von vier Lernprogrammen erstellen Sie ein passendes Spiel. Der Spieler gleicht Paare von ausgeblendeten Symbolen ab.

Verwenden Sie diese Lernprogramme, um mehr über die folgenden Aufgaben in der integrierten Entwicklungsumgebung (IDE) von Visual Studio zu erfahren:

  • Speichern von Objekten, z. B. Symbolen, in einem List<T>-Objekt.
  • Verwenden Sie eine foreach Schleife in C# oder eine For Each Schleife in Visual Basic, um Elemente in einer Liste zu durchlaufen.
  • Verfolgen Sie den Status eines Formulars mithilfe von Referenzvariablen.
  • Erstellen Sie einen Ereignishandler, um auf Ereignisse zu reagieren, die Sie mit mehreren Objekten verwenden können.
  • Erstellen Sie einen Timer, der nach unten zählt, und löst dann ein Ereignis genau nach dem Start aus.

Wenn Sie fertig sind, haben Sie ein vollständiges Spiel.

Screenshot des Spiels, das Sie erstellen. Mehrere übereinstimmende Symbole werden in einem Raster angezeigt.

In diesem ersten Lernprogramm erfahren Sie, wie Sie:

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

Voraussetzungen

Sie benötigen Visual Studio, um dieses Lernprogramm abzuschließen. Besuchen Sie die Visual Studio-Downloadseite für eine kostenlose Version.

Anmerkung

Dieses Tutorial erfordert die Windows Forms App (.NET Framework) Projektvorlage. Wählen Sie während der Installation die .NET-Desktopentwicklung-Workload aus:

Screenshot, der die Arbeitsauslastung der dot NET-Desktopentwicklung in Visual Studio Installer zeigt.

Wenn Sie Visual Studio bereits installiert haben und die Vorlage hinzufügen müssen, wählen Sie im Menü Tools>Tools und Features abrufenaus, oder wählen Sie im Fenster Erstellen eines neuen Projekts Fenster Weitere Tools und Features installierenaus.

Screenshot, der den Link

Erstellen eines Projekts für ein Memory-Spiel in Windows Forms

Der erste Schritt beim Erstellen Ihres Spiels besteht darin, ein Windows Forms-App-Projekt zu erstellen.

  1. Öffnen Sie Visual Studio.

  2. Wählen Sie im Startfenster Neues Projekt erstellenaus.

    Screenshot der Option

  3. Suchen Sie im Fenster Erstellen eines neuen Projekts nach Windows Forms. Wählen Sie dann in der Liste Alle Projekttypen die Option Desktop aus.

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

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

    Screenshot des Fensters

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

Zu diesem Zeitpunkt zeigt Visual Studio ein leeres Formular im Windows Forms-Designer an.

Erstellen eines Layouts für Ihr Spiel

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

  1. Wählen Sie das Formular aus, um den Windows Forms-Designer auszuwählen. Die Registerkarte liest Form1.cs [Entwurf] für C# oder Form1.vb [Entwurf] 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 entweder ändern, indem Sie die eigenschaft Size auf 550, 550 oder durch Ziehen der Ecke des Formulars ändern, bis die richtige Größe unten in der Visual Studio-IDE angezeigt wird.

  2. Wählen Sie auf der linken Seite der IDE den Tab Toolbox aus. Wenn sie nicht angezeigt wird, wählen Sie in der Menüleiste Anzeigen>Toolbox aus, oder wählen Sie STRG+ALT+Xaus.

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

    • Legen Sie die eigenschaft BackColor auf CornflowerBluefest. Um diese Eigenschaft festzulegen, wählen Sie den Abwärtspfeil neben der BackColor-Eigenschaft aus. Wählen Sie im resultierenden Dialogfeld Webaus. Wählen Sie in der Liste der Namen CornflowerBlueaus.

      Anmerkung

      Die Farben befinden sich nicht in alphabetischer Reihenfolge. CornflowerBlue ist nahe dem Ende der Liste.

    • Legen Sie die eigenschaft Dock auf Fill fest, indem Sie den Pfeil nach unten und dann die große mittlere Schaltfläche auswählen. Mit dieser Option wird die Tabelle ausgebreitet, sodass sie das gesamte Formular abdeckt.

    • Legen Sie die eigenschaft CellBorderStyle auf Insetfest. Dieser Wert bietet visuelle Abgrenzungen zwischen den einzelnen Feldern auf dem Brett.

    • Wählen Sie die Dreiecksschaltfläche in der oberen rechten Ecke des TableLayoutPanel-Elements aus, um das Zugehörige Aufgabenmenü anzuzeigen. Wählen Sie im Aufgabenmenü Zeile hinzufügen zweimal 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 Zeilenformatvorlagen zu öffnen. 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 Zeilen aus der Liste oben im Fenster aus, und legen Sie dann die Höhe jeder Zeile auf 25 Prozent fest.

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

Ihr TableLayoutPanel ist jetzt ein 4:4-Raster mit 16 quadratischen Zellen in gleicher Größe. Diese Zeilen und Spalten sind der Ort, an dem die Symbole später angezeigt werden.

Screenshot der Registerkarte

Hinzufügen und Formatieren von Bezeichnungen

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

  1. Stellen Sie sicher, dass das TableLayoutPanel im Formular-Editor ausgewählt ist. tableLayoutPanel1 sollte oben im Fenster Eigenschaften angezeigt werden. Wenn sie nicht ausgewählt ist, wählen Sie das TableLayoutPanel-Element im Formular aus, oder wählen Sie es in der Liste oben im Fenster Eigenschaften aus.

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

    • Legen Sie die BackColor-Eigenschaft der Bezeichnung auf CornflowerBlue fest.
    • Legen Sie die eigenschaft AutoSize auf Falsefest.
    • Legen Sie die Eigenschaft Dock auf Füllen fest.
    • Legen Sie die eigenschaft TextAlign auf MiddleCenter- fest, indem Sie neben der Eigenschaft die Nach-unten-Taste 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 Schriftart auf Webdings, Schriftschnitt auf Fett und Größe auf 48 fest.
    • Legen Sie die eigenschaft Text der Beschriftung auf den Buchstaben cfest.

    Die obere linke Zelle des TableLayoutPanel enthält nun ein schwarzes Feld, das auf einem blauen Hintergrund zentriert ist.

    Anmerkung

    Webdings ist eine Symbolschriftart, die mit dem Windows-Betriebssystem ausgeliefert wird. In deinem Zuordnungsspiel ordnet der Spieler Symbolpaare zu. Diese Schriftart zeigt die symbole an, die übereinstimmen sollen. Wenn die Webdings-Symbole im Formular nicht ordnungsgemäß angezeigt werden, legen Sie die UseCompatibleTextRendering-Eigenschaft von Bezeichnungen im Formular auf TRUE fest.

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

  3. Wählen Sie Ihr Label-Steuerelement aus, und kopieren Sie es in die nächste Zelle im 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 Beschriftung wird in der zweiten Zelle des TableLayoutPanel angezeigt. Fügen Sie es erneut ein, und in der dritten Zelle wird eine weitere Beschriftung angezeigt. Fahren Sie mit dem Einfügen der Label-Steuerelemente fort, bis alle Zellen ausgefüllt sind.

In diesem Schritt wird das Layout für Ihr Formular abgeschlossen.

Screenshot des passenden Spielformulars mit 16 schwarzen Quadraten.

Nächster Schritt

Wechseln Sie zum nächsten Tutorial, um zu erfahren, wie Sie jedem Etikett ein zufälliges Symbol zuweisen und Ereignishandler zu Etiketten hinzufügen.

Hinzufügen von Symbolen zu Ihrem Memory-Spiel