Självstudie: Lägga till ikoner i ditt matchningsspel i WinForms-applikation

I den här serien med fyra självstudier skapar du ett matchande spel där spelaren matchar par med dolda ikoner.

I matchande spel väljer en spelare en fyrkant för att se en ikon och väljer sedan en annan fyrkant. Om ikonerna matchar förblir de synliga. Annars döljer spelet båda ikonerna. I den här handledningen tilldelar du ikoner till etiketter slumpmässigt. Du anger att de ska döljas och sedan visas när de väljs.

I denna andra handledning kommer du att lära dig hur du:

Lägg till ett slumpmässigt objekt och en lista med ikoner.
Tilldela en slumpmässig ikon till varje etikett.
Lägg till händelsehanterare som visar ikoner i etiketterna.

Förutsättningar

Den här självstudien bygger på den tidigare självstudien Skapa ett matchande spelprogram. Om du inte har gått igenom den självstudien, gör det först.

Lägg till ett slumpmässigt objekt och en lista med ikoner

I det här avsnittet skapar du en uppsättning matchande symboler för spelet. Varje symbol läggs till i två slumpmässiga celler i TableLayoutPanel i formuläret.

Du använder new-instruktioner för att skapa två objekt. Den första är ett Random objekt som slumpmässigt väljer celler i TableLayoutPanel. Det andra objektet är ett List<T> objekt. Den lagrar slumpmässigt valda symboler.

Öppna Visual Studio. Projektet MatchingGame visas under Öppna senaste.
Välj Form1.cs om du använder C# eller Form1.vb om du använder Visual Basic. Välj sedan Visa>Kod. Alternativt väljer du nyckeln F7 eller dubbelklickar på Form1. Visual Studio IDE visar kodmodulen för Form1.

Lägg till följande kod i den befintliga koden.

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

Om du använder C# måste du placera koden efter den inledande klammerparentesen och strax efter klassdeklarationen (public partial class Form1 : Form). Om du använder Visual Basic placerar du koden direkt efter klassdeklarationen (Public Class Form1).

Du kan använda listobjekt för att hålla reda på olika typer av objekt. En lista kan innehålla tal, true/false-värden, text eller andra objekt. I ditt matchande spel har listobjektet 16 strängar, en för varje cell i panelen TableLayoutPanel. Varje sträng är en enda bokstav som motsvarar ikonerna i etiketterna. Dessa tecken visas i webdings-teckensnittet som en buss, en cykel och andra.

Obs

Listor kan krympa och växa efter behov, vilket är viktigt i det här programmet.

Mer information om listor finns i List<T>. Om du vill se ett exempel i C# kan du läsa Ett exempel på en grundläggande lista. Ett exempel i Visual Basic finns i Använda en enkel samling.

Tilldela en slumpmässig ikon till varje etikett

Varje gång du kör programmet tilldelar det ikonerna slumpmässigt till etikettkontrollerna i formuläret med hjälp av en AssignIconsToSquares() metod. Den här koden använder nyckelordet foreach i C# eller For Each i Visual Basic.

Lägg till metoden AssignIconsToSquares() i Form1.cs eller 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

Du kan ange den här koden precis under den kod som du lade till i föregående avsnitt.

Obs

En av raderna har kommenterats bort avsiktligt. Du lägger till den senare i den här proceduren.

Metoden AssignIconsToSquares() itererar genom varje etikettkontroll i TableLayoutPanel. Den kör samma instruktioner för var och en av dem. Påståendena hämtar en slumpmässig ikon från listan.

Den första raden konverterar -kontrollen variabeln till en etikett med namnet iconLabel.
Den andra raden är en if-instruktion som kontrollerar att konverteringen fungerade. Om konverteringen fungerar körs satserna i if-instruktionen.
Den första raden i if-instruktionen skapar en variabel med namnet randomNumber som innehåller ett slumpmässigt tal som motsvarar ett av objekten i ikonerna. Den använder Next()-metoden för Random-objektet. Metoden Next returnerar det slumpmässiga talet. Den här raden använder också egenskapen Count för ikoner listan för att avgöra vilket intervall du vill välja slumptal från.
Nästa rad tilldelar en av ikonerna listobjekt till etikettens Text egenskap.
Nästa rad döljer ikonerna. Raden kommenteras här så att du kan verifiera resten av koden innan du fortsätter.
Den sista raden i instruktionen if tar bort ikonen som har lagts till i formuläret från listan.

Lägg till ett anrop till metoden AssignIconsToSquares() i konstruktorn Form1 i Form1.cs. Den här metoden fyller spelplanen med ikoner. Konstruktorer anropas när du skapar ett objekt.
```
public Form1()
{
    InitializeComponent();

    AssignIconsToSquares();
}
```
För Visual Basic lägger du till AssignIconsToSquares()-metodanropet till metoden Form1_Load i Form1.vb.
```
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    AssignIconsToSquares()
End Sub
```
Mer information finns i Konstruktorer (C#-programmeringsguide) eller Använd konstruktorer och destruktorer.
Spara programmet och kör det. Det bör visa ett formulär med slumpmässiga ikoner tilldelade till varje etikett.

Tips

Om webdings-ikonerna inte visas korrekt i formuläret anger du egenskapen UseCompatibleTextRendering för etiketter i formuläret till True.
Stäng programmet och kör det sedan igen. Olika ikoner tilldelas till varje etikett.

Ikonerna visas nu eftersom du inte har dolt dem. Om du vill dölja dem från spelaren kan du ställa in egenskapen ForeColor till samma färg som egenskapen BackColor.
Stoppa programmet. Ta bort kommentarsmarkeringarna för den kommenterade kodraden i loopen i metoden AssignIconsToSquares().
- C#
- VB
```
iconLabel.ForeColor = iconLabel.BackColor;
```
```
iconLabel.ForeColor = iconLabel.BackColor
```

Om du kör programmet igen verkar ikonerna ha försvunnit. Endast en blå bakgrund visas. Ikonerna tilldelas slumpmässigt och finns kvar.

Lägga till händelsehanterare i etiketter

I det här matchande spelet visar en spelare en dold ikon, sedan en till. Om ikonerna matchar förblir de synliga. Annars döljs båda ikonerna igen.

För att få ditt spel att fungera på det här sättet lägger du till en Click händelsehanterare som ändrar färgen på den valda etiketten så att den matchar bakgrunden.

Öppna formuläret i Windows Forms Designer. Välj Form1.cs eller Form1.vboch välj sedan View>Designer.
Välj den första etikettkontrollen för att markera den och dubbelklicka på den för att lägga till en Click händelsehanterare med namnet label1 _Click() i koden.
Håll sedan ned Ctrl- medan du markerar var och en av de andra etiketterna. Se till att varje etikett är markerad.
I fönstret Egenskaper väljer du knappen Händelser , som är en blixt. För händelsen Klicka på väljer du label1_Click i rutan.
Välj nyckeln Ange. IDE lägger till en Click händelsehanterare med namnet label1 _Click() till koden i Form1.cs eller Form1.vb. Eftersom du har valt alla etiketter är hanteraren ansluten till var och en av etiketterna.

Fyll i resten av koden.

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

Obs

Om du kopierar och klistrar in label1_Click() kodblocket i stället för att ange koden manuellt måste du ersätta den befintliga label1_Click() koden. Annars får du ett duplicerat kodblock.

Välj Felsök>Starta felsökning för att köra programmet. Du bör se ett tomt formulär med en blå bakgrund. Välj någon av cellerna i formuläret. En av ikonerna ska bli synlig. Fortsätt att välja olika platser i formuläret. När du väljer ikonerna bör de visas.

Skärmbild som visar matchningsspelet med en enda ikon synlig.

Nästa steg

Gå vidare till nästa handledning för att lära dig hur du ändrar etiketter med en timer.

Använd en timer i matchningsspelet

Feedback

Var den här sidan till hjälp?

Last updated on 2025-08-07