Delen via

Handleiding: Pictogrammen toevoegen aan uw matchingspel WinForms-app

  • Artikel

In deze reeks van vier zelfstudies bouwt u een overeenkomend spel, waarbij de speler paren verborgen pictogrammen matcht.

In het overeenkomende spel selecteert een speler een vierkant om een pictogram te zien en kiest een ander vierkant. Als de pictogrammen overeenkomen, blijven ze zichtbaar. Zo niet, dan verbergt het spel beide pictogrammen. In deze zelfstudie wijst u willekeurig pictogrammen toe aan labels. U stelt ze in als verborgen en ze worden pas weergegeven wanneer ze zijn geselecteerd.

In deze tweede zelfstudie leert u het volgende:

  • Voeg een willekeurig object en een lijst met pictogrammen toe.
  • Wijs een willekeurig pictogram toe aan elk label.
  • Voeg gebeurtenis-handlers toe die pictogrammen aan de labels weergeven.

Voorwaarden

Deze zelfstudie bouwt voort op de vorige zelfstudie, Een overeenkomende gametoepassing maken. Als u die zelfstudie nog niet hebt gedaan, maak die zelfstudie dan eerst.

Een willekeurig object en een lijst met pictogrammen toevoegen

In deze sectie maakt u een set overeenkomende symbolen voor het spel. Elk symbool wordt toegevoegd aan twee willekeurige cellen in de TableLayoutPanel op het formulier.

U gebruikt new instructies om twee objecten te maken. De eerste is een Random-object dat willekeurig cellen in TableLayoutPanel kiest. Het tweede object is een List<T>-object. Hiermee worden de willekeurig gekozen symbolen opgeslagen.

  1. Open Visual Studio. Uw MatchingGame project wordt weergegeven onder Recent geopende.

  2. Selecteer Form1.cs als u C# gebruikt of Form1.vb als u Visual Basic gebruikt. Selecteer vervolgens Weergave>Code. Als alternatief selecteert u de toets F7 of dubbelklikt u op Formulier1-. In Visual Studio IDE wordt de codemodule voor Form1 weergegeven.

  3. Voeg in de bestaande code de volgende code toe.

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

Als u C# gebruikt, zorg ervoor dat u de code plaatst na de openingsaccolade en net na de klassedeklaratie (public partial class Form1 : Form). Als u Visual Basic gebruikt, plaatst u de code direct na de klassedeclaratie (Public Class Form1).

U kunt lijstobjecten gebruiken om verschillende typen items bij te houden. Een lijst kan getallen, waar/onwaar-waarden, tekst of andere objecten bevatten. In het overeenkomende spel heeft het lijstobject 16 tekenreeksen, één voor elke cel in het deelvenster TableLayoutPanel. Elke tekenreeks is één letter die overeenkomt met de pictogrammen in de labels. Deze tekens worden weergegeven in het lettertype Webdings als bus, fiets en andere.

Notitie

Lijsten kunnen naar behoefte verkleinen en groeien, wat belangrijk is in dit programma.

Zie List<T>voor meer informatie over lijsten. Als u een voorbeeld in C# wilt zien, raadpleegt u een voorbeeld van een basislijst. Zie Een eenvoudige verzameling gebruikenvoor een voorbeeld in Visual Basic.

Een willekeurig pictogram toewijzen aan elk label

Telkens wanneer u het programma uitvoert, worden de pictogrammen willekeurig toegewezen aan de labelbesturingselementen in uw formulier met behulp van een AssignIconsToSquares() methode. Deze code gebruikt het trefwoord foreach in C# of For Each in Visual Basic.

  1. Voeg de methode AssignIconsToSquares() toe aan Form1.cs of 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);
        }
    }
}

U kunt deze code net onder de code invoeren die u in de vorige sectie hebt toegevoegd.

Notitie

Een van de regels is bedoeld als commentaar. U voegt deze later in deze procedure toe.

De methode AssignIconsToSquares() doorloopt elk labelcontrole in de TableLayoutPanel. Er worden dezelfde instructies voor elk daarvan uitgevoerd. Met de instructies wordt een willekeurig pictogram uit de lijst opgehaald.

  • Met de eerste regel wordt het besturingselement variabele geconverteerd naar een label met de naam iconLabel.
  • De tweede regel is een if instructie die controleert of de conversie heeft gewerkt. Als de conversie werkt, worden de instructies in de if instructie uitgevoerd.
  • Met de eerste regel in de instructie if maakt u een variabele met de naam randomNumber die een willekeurig getal bevat dat overeenkomt met een van de items in de pictogrammenlijst. Hierbij wordt de Next() methode van het Random-object gebruikt. De methode Next retourneert het willekeurige getal. Deze regel maakt ook gebruik van de eigenschap Count van de pictogrammen lijst om het bereik te bepalen waaruit het willekeurige getal moet worden gekozen.
  • De volgende regel wijst een van de pictogrammen lijstitems toe aan de eigenschap Text van het label.
  • De volgende regel verbergt de pictogrammen. De regel wordt hier als commentaar gegeven, zodat u de rest van de code kunt controleren voordat u doorgaat.
  • Met de laatste regel in de instructie if wordt het pictogram verwijderd dat aan het formulier is toegevoegd uit de lijst.

  1. Voeg een aanroep toe aan de AssignIconsToSquares() methode aan de Form1constructor in Form1.cs. Deze methode vult het spelbord met pictogrammen. Constructors worden aangeroepen wanneer u een object maakt.

    public Form1()
{
    InitializeComponent();

    AssignIconsToSquares();
}

    Voor Visual Basic voegt u de aanroep van de AssignIconsToSquares() methode toe aan de methode Form1_Load in Form1.vb.

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    AssignIconsToSquares()
End Sub

    Voor meer informatie, zie Constructors (C#-programmeerhandleiding) of Constructors en destructors gebruiken.

  2. Sla uw programma op en voer het uit. Er moet een formulier worden weergegeven met willekeurige pictogrammen die aan elk label zijn toegewezen.

    Tip

    Als de webdingspictogrammen niet goed worden weergegeven op het formulier, stel dan de eigenschap UseCompatibleTextRendering van de labels op het formulier in op True.

  3. Sluit uw programma en voer het opnieuw uit. Aan elk label worden verschillende pictogrammen toegewezen.

    Schermopname toont het overeenkomende spel met de willekeurige pictogrammen.

    De pictogrammen zijn nu zichtbaar omdat u ze niet hebt verborgen. Als u ze wilt verbergen voor de speler, kunt u de eigenschap ForeColor van elk label instellen op dezelfde kleur als de eigenschap BackColor.

  4. Stop het programma. Verwijder de opmerkingmarkeringen voor de regel met commentaarcode in de lus in de methode AssignIconsToSquares().

    iconLabel.ForeColor = iconLabel.BackColor;

Als u het programma opnieuw uitvoert, lijken de pictogrammen te zijn verdwenen. Er wordt alleen een blauwe achtergrond weergegeven. De pictogrammen worden willekeurig toegewezen en zijn er nog steeds.

Gebeurtenishandlers toevoegen aan labels

In dit overeenkomende spel toont een speler een verborgen pictogram en vervolgens een tweede. Als de pictogrammen overeenkomen, blijven ze zichtbaar. Anders worden beide pictogrammen weer verborgen.

Als u wilt dat uw game op deze manier werkt, voegt u een Click gebeurtenishandler toe die de kleur van het gekozen label wijzigt zodat deze overeenkomt met de achtergrond.

  1. Open het formulier in de Windows Forms Designer-. Selecteer Form1.cs of Form1.vben selecteer Bekijk>Designer.

  2. Kies het eerste labelbesturingselement om het te selecteren en dubbelklik erop om een Click gebeurtenishandler met de naam label1 _Click() toe te voegen aan de code.

  3. Houd vervolgens de Ctrl-toets ingedrukt terwijl u elk van de andere labels selecteert. Zorg ervoor dat elk label is geselecteerd.

  4. Selecteer in het venster Eigenschappen de knop Gebeurtenissen, die een bliksemschicht voorstelt. Selecteer in het vak het label1_Click voor de Click gebeurtenis.

    Schermopname toont het venster Eigenschappen met de gebeurtenis Klik.

  5. Selecteer de Enter. De IDE voegt een Click gebeurtenishandler met de naam label1 _Click() toe aan de code in Form1.cs of Form1.vb. Omdat u alle labels hebt geselecteerd, wordt de handler aan elk van de labels gekoppeld.

  6. Vul de rest van de code in.

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

Notitie

Als u het label1_Click() codeblok kopieert en plakt in plaats van de code handmatig in te voeren, moet u de bestaande label1_Click() code vervangen. Anders krijgt u een duplicaatcodeblok.

Selecteer Foutopsporing>Foutopsporing starten om uw programma uit te voeren. U zou een leeg formulier met een blauwe achtergrond moeten zien. Kies een van de cellen in het formulier. Een van de pictogrammen moet zichtbaar worden. Ga door met het kiezen van verschillende plaatsen in het formulier. Wanneer u de pictogrammen kiest, worden deze weergegeven.

Schermopname toont het overeenkomende spel met één pictogram dat zichtbaar is.

Volgende stappen

Ga naar de volgende zelfstudie voor meer informatie over het wijzigen van labels met behulp van een timer.

Gebruik een timer in je matchspel