Samouczek: dodawanie ikon do pasującej gry WinForms

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 pasują, 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.

Wymagania wstępne

Ten samouczek opiera się na poprzednim samouczku: Tworzenie zgodnej aplikacji do gry. Jeśli nie zrobiono tego samouczka, najpierw zapoznaj się z tym samouczkiem.

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

1. Otwórz program Visual Studio. Projekt MatchingGame zostanie wyświetlony w obszarze Otwórz ostatnio.

2. Wybierz plik Form1.cs , jeśli używasz języka C#lub Form1.vb , jeśli używasz języka Visual Basic. Następnie wybierz pozycję Wyświetl>kod. Alternatywnie wybierz klawisz F7 lub kliknij dwukrotnie formularz Form1. Środowisko IDE programu Visual Studio wyświetla moduł kodu dla formularza Form1.

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

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

---

Ważne

Użyj kontrolki języka programowania w prawym górnym rogu tej strony, aby wyświetlić fragment kodu języka C# lub fragment kodu języka Visual Basic.

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 czcionki Webdings jako autobus, rower i inne.

Uwaga

Listy można zmniejszać i zwiększać stosownie do potrzeb, co jest istotne w tym programie.

Aby dowiedzieć się więcej o listach, zobacz List<T>. Aby zobaczyć przykład w języku C#, zobacz Podstawowy przykład listy. Aby zobaczyć przykład w Visual Basic, zobacz Using a Simple Collection (Używanie prostej kolekcji).

Przypisywanie losowej ikony do każdej etykiety

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

1. Dodaj metodę AssignIconsToSquares() .

   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
   

---

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

Uwaga

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

Metoda AssignIconsToSquares() wykonuje iterację po każdej kontrolce etykiety w tableLayoutPanel. Uruchamia te same instrukcje dla każdego z nich. Instrukcje ściągają losową ikonę z listy.

• Pierwszy wiersz konwertuje zmienną kontrolną na etykietę o nazwie iconLabel.
• Drugi wiersz to if instrukcja sprawdzająca, 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 Next() metody Random obiektu . Metoda Next zwraca liczbę losową. Ten wiersz używa Count również właściwości listy ikon , aby określić zakres, z którego ma być wybrana liczba losowa.
• Następny wiersz przypisuje jeden z elementów listy ikon do Text właściwości etykiety.
• Następny wiersz ukrywa ikony. Wiersz jest tutaj skomentowany, aby można było zweryfikować pozostałą część kodu przed kontynuowaniem.
• Ostatni wiersz instrukcji if usuwa ikonę, która została dodana do formularza z listy.

1. Dodaj wywołanie metody do AssignIconsToSquares() konstruktora Form1. 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 AssignIconsToSquares() metody do Form1_Load metody .

   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.

2. Zapisz program i go uruchom. Powinien się wyświetlić 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 na formularzu na wartość True.

3. Zamknij program i uruchom go ponownie. Do każdej etykiety są przypisywane różne ikony.

   

   Ikony są teraz widoczne, ponieważ nie zostały ukryte. Aby ukryć je przed odtwarzaczem, możesz ustawić właściwość ForeColor każdej etykiety na taki sam kolor, jak właściwość BackColor.

4. Zatrzymaj program. Usuń znaczniki komentarza dla skomentowanego wiersza kodu wewnątrz pętli.

   C#

   iconLabel.ForeColor = iconLabel.BackColor;
   

   VB

   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 programów obsługi zdarzeń do etykiet

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

Aby gra działała w ten sposób, dodaj procedurę Click obsługi zdarzeń, która zmienia kolor wybranej etykiety, aby pasować do tła.

1. Otwórz formularz w Projektant formularzy systemu Windows. Wybierz pozycję Form1.cs lub Form1.vb, a następnie wybierz pozycję Widok> Projektant.

2. Wybierz pierwszą kontrolkę etykiety, aby ją zaznaczyć, a następnie kliknij ją dwukrotnie, aby dodać procedurę Click obsługi zdarzeń o nazwie label1 _Click() do kodu.

3. Następnie przytrzymaj klawisz Ctrl podczas zaznaczenia każdej z pozostałych etykiet. Pamiętaj, że każda etykieta jest zaznaczona.

4. W oknie Właściwości wybierz przycisk Zdarzenia, który jest zaciemniającym elementem bolt. W polu Kliknij zdarzenie wybierz pozycję label1_Click .

   

5. Naciśnij klawisz Enter. Środowisko IDE dodaje do kodu procedurę Click obsługi zdarzeń o nazwie label1 _Click(). Ponieważ wybrano wszystkie etykiety, procedura obsługi jest podłączona do każdej z etykiet.

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

   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
   

---

Uwaga

Jeśli skopiujesz i wklejesz label1_Click() blok kodu zamiast ręcznie wprowadzać kod, pamiętaj o zastąpieniu istniejącego label1_Click() kodu. W przeciwnym razie otrzymasz 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. Ikony powinny się pojawiać w miarę wybierania.

Następne kroki

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

Korzystanie z czasomierza w grze pasującej