Samouczek: dodawanie ikon do pasującej gry WinForms

Artykuł
01/26/2025

W tej serii czterech samouczków utworzysz pasującą grę, w której gracz dopasowuje pary ukrytych ikon.

W meczu gracz wybiera kwadrat, aby zobaczyć ikonę, a następnie wybiera inny kwadrat. Jeśli ikony są zgodne, pozostają widoczne. Jeśli nie, gra ukrywa obie ikony. W tym samouczku przypiszesz ikony do etykiet losowo. Ustawiasz je jako ukryte, a następnie wyświetlane po wybraniu.

Z tego drugiego samouczka dowiesz się, jak wykonywać następujące działania:

Dodaj obiekt Losowy i listę ikon.
Przypisz losową ikonę do każdej etykiety.
Dodaj programy obsługi zdarzeń, które pokazują ikony do etykiet.

Warunki wstępne

Ten samouczek opiera się na poprzednim samouczku, Tworzenie zgodnej aplikacji gry. Jeśli nie zrobiłeś tego samouczka, najpierw go przejrzyj.

Dodawanie obiektu losowego i listy ikon

W tej sekcji utworzysz zestaw pasujących symboli dla gry. Każdy symbol jest dodawany do dwóch losowych komórek w "tableLayoutPanel" na formularzu.

Instrukcje new służą do tworzenia dwóch obiektów. Pierwszy to obiekt Random, który losowo wybiera komórki w TableLayoutPanel. Drugi obiekt jest obiektem List<T>. Przechowuje losowo wybrane symbole.

Otwórz program Visual Studio. Projekt MatchingGame jest wyświetlany w obszarze Otwórz ostatnią.
Wybierz Form1.cs, jeśli używasz języka C#, lub Form1.vb, jeśli używasz języka Visual Basic. Następnie wybierz Wyświetl>Kod. Alternatywnie wybierz klucz F7 lub kliknij dwukrotnie Form1. Środowisko IDE programu Visual Studio wyświetla moduł kodu dla formularza Form1.

W istniejącym kodzie dodaj następujący kod.

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

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

Jeśli używasz języka C#, pamiętaj, aby umieścić kod po otwarciu nawiasu klamrowego i tuż po deklaracji klasy (public partial class Form1 : Form). Jeśli używasz języka Visual Basic, umieść kod bezpośrednio po deklaracji klasy (Public Class Form1).

Za pomocą obiektów listy można śledzić różne typy elementów. Lista może zawierać liczby, wartości true/false, tekst lub inne obiekty. W meczu obiekt listy zawiera 16 ciągów, po jednym dla każdej komórki w panelu TableLayoutPanel. Każdy ciąg jest jedną literą odpowiadającą ikonom w etykietach. Te znaki są wyświetlane w czcionce Webdings jako autobus, rower i inne.

Notatka

Listy mogą być zmniejszane i rosnąć zgodnie z potrzebami, co jest ważne w tym programie.

Aby dowiedzieć się więcej o listach, zobacz List<T>. Aby wyświetlić przykład w języku C#, zobacz Przykład podstawowej listy. Aby wyświetlić przykład w języku Visual Basic, zobacz Using a Simple Collection.

Przypisywanie losowej ikony do każdej etykiety

Za każdym razem, gdy uruchamiasz program, przypisuje on ikony losowo do kontrolek Etykieta w formularzu przy użyciu metody AssignIconsToSquares(). Ten kod używa słowa kluczowego foreach w języku C# lub For Each w języku Visual Basic.

Dodaj metodę AssignIconsToSquares() do Form1.cs lub 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);
        }
    }
}

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

Możesz wprowadzić ten kod tuż poniżej kodu dodanego w poprzedniej sekcji.

Notatka

Jeden z wierszy jest komentowany celowo. Dodaj to w dalszej części tej procedury.

Metoda AssignIconsToSquares() iteruje przez każdą kontrolkę etykiety w TableLayoutPanel. Uruchamia te same instrukcje dla każdego z nich. Instrukcje ściągają losową ikonę z listy.

Pierwszy wiersz konwertuje zmienną kontrolki na etykietę o nazwie ikonabel.
Drugi wiersz to instrukcja if, która sprawdza, czy konwersja zadziałała. Jeśli konwersja działa, instrukcje w instrukcji if są uruchamiane.
Pierwszy wiersz w instrukcji if tworzy zmienną o nazwie randomNumber zawierającą losową liczbę odpowiadającą jednemu z elementów na liście ikon. Używa metody Next() obiektu Random. Metoda Next zwraca liczbę losową. Ten wiersz używa również właściwości Count z listy ikon , aby określić zakres, z którego należy wybrać liczbę losową.
Następny wiersz przypisuje jedną z ikon elementów listy do właściwości Text etykiety.
Następny wiersz ukrywa ikony. Wiersz jest tutaj wykomentowany, aby można było zweryfikować pozostałą część kodu przed kontynuowaniem.
Ostatni wiersz w instrukcji if usuwa ikonę, która została dodana do formularza z listy.

Dodaj wywołanie metody AssignIconsToSquares() do konstruktoraw Form1 Form1.cs. Ta metoda wypełnia tablicę gier ikonami. Konstruktory są wywoływane podczas tworzenia obiektu.
```
public Form1()
{
    InitializeComponent();

    AssignIconsToSquares();
}
```
W przypadku języka Visual Basic dodaj wywołanie metody AssignIconsToSquares() do metody Form1_Load w Form1.vb.
```
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    AssignIconsToSquares()
End Sub
```
Aby uzyskać więcej informacji, zobacz Konstruktory (przewodnik programowania w języku C#) lub Używanie konstruktorów i destruktorów.
Zapisz program i uruchom go. Powinien on wyświetlać formularz z losowymi ikonami przypisanymi do każdej etykiety.

Napiwek

Jeśli ikony Webdings nie są prawidłowo wyświetlane w formularzu, ustaw właściwość UseCompatibleTextRendering etykiet w formularzu na wartość True.
Zamknij program, a następnie uruchom go ponownie. Do każdej etykiety są przypisywane różne ikony.

Ikony są teraz widoczne, ponieważ nie zostały one ukryte. Aby ukryć je przed odtwarzaczem, możesz ustawić właściwość ForeColor etykiety na taki sam kolor jak właściwość BackColor.
Zatrzymaj program. Usuń znaczniki komentarza dla skomentowanego wiersza kodu wewnątrz pętli w metodzie AssignIconsToSquares().
- C#
- VB
```
iconLabel.ForeColor = iconLabel.BackColor;
```
```
iconLabel.ForeColor = iconLabel.BackColor
```

Jeśli ponownie uruchomisz program, ikony wydają się zniknąć. Zostanie wyświetlone tylko niebieskie tło. Ikony są losowo przypisywane i nadal istnieją.

Dodawanie obsługiwaczy zdarzeń do etykiet

W tej grze meczowej gracz ujawnia ukrytą ikonę, a następnie drugą. Jeśli ikony są zgodne, pozostają widoczne. W przeciwnym razie obie ikony są ponownie ukryte.

Aby gra działała w ten sposób, dodaj program obsługi zdarzeń Click, który zmienia kolor wybranej etykiety tak, aby był zgodny z tłem.

Otwórz formularz w programie Windows Forms Designer. Wybierz pozycję Form1.cs lub Form1.vb, a następnie wybierz pozycję View>Designer.
Wybierz pierwszą kontrolkę etykiety, aby ją zaznaczyć, a następnie kliknij ją dwukrotnie, aby dodać program obsługi zdarzeń Click o nazwie label1 _Click() do kodu.
Następnie przytrzymaj Ctrl i zaznacz każdą z pozostałych etykiet. Upewnij się, że wybrano każdą etykietę.
W oknie właściwości wybierz przycisk Zdarzenia, który wygląda jak błyskawica. Dla zdarzenia Click wybierz label1_Click w polu.
Wybierz klucz Wprowadź. Środowisko IDE dodaje program obsługi zdarzeń Click o nazwie label1 _Click() do kodu w Form1.cs lub Form1.vb. Ponieważ wybrano wszystkie etykiety, obsługiwacz jest podłączony do każdej z etykiet.

Wypełnij pozostałą część kodu.

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

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

Notatka

Jeśli skopiujesz i wklejesz blok kodu label1_Click() zamiast ręcznie wprowadzać kod, pamiętaj o zastąpieniu istniejącego kodu label1_Click(). W przeciwnym razie zostanie wyświetlony zduplikowany blok kodu.

Wybierz pozycję Debuguj>Rozpocznij debugowanie, aby uruchomić program. Powinien zostać wyświetlony pusty formularz z niebieskim tłem. Wybierz dowolną z komórek w formularzu. Jedna z ikon powinna stać się widoczna. Kontynuuj wybieranie różnych miejsc w formularzu. Podczas wybierania ikon powinny być wyświetlane.

Zrzut ekranu przedstawia grę pamięciową z widoczną pojedynczą ikoną.

Następne kroki

Przejdź do następnego samouczka, aby dowiedzieć się, jak zmieniać etykiety przy użyciu czasomierza.

Użyj czasomierza w grze w dopasowywanie

Udostępnij za pośrednictwem

Samouczek: dodawanie ikon do pasującej gry WinForms

Warunki wstępne

Dodawanie obiektu losowego i listy ikon

Przypisywanie losowej ikony do każdej etykiety

Dodawanie obsługiwaczy zdarzeń do etykiet

Następne kroki

Opinia

Dodatkowe zasoby