Guida passo-passo: Aggiungere icone all'applicazione WinForms del gioco di abbinamento

In questa serie di quattro esercitazioni, si crea un gioco di abbinamento in cui il giocatore abbina coppie di icone nascoste.

Nel gioco corrispondente, un giocatore seleziona un quadrato per visualizzare un'icona, quindi sceglie un altro quadrato. Se le icone corrispondono tra loro, rimangono visibili. In caso contrario, il gioco nasconde entrambe le icone. In questa esercitazione si assegnano le icone alle etichette in modo casuale. Le impostazioni vengono impostate per essere nascoste e quindi visualizzate quando selezionate.

In questa seconda esercitazione si apprenderà come:

• Aggiungere un oggetto Random e un elenco di icone.
• Assegnare un'icona casuale a ogni etichetta.
• Aggiungere gestori eventi che mostrano le icone alle etichette.

Prerequisiti

Questa esercitazione si basa sull'esercitazione precedente , Creare un'applicazione di gioco corrispondente. Se non hai seguito quel tutorial, segui prima di tutto quello.

Aggiungere un oggetto Random e un elenco di icone

In questa sezione viene creato un set di simboli corrispondenti per il gioco. Ogni simbolo viene aggiunto a due celle casuali nel TableLayoutPanel del modulo.

Usi new istruzioni per creare due oggetti. Il primo è un Random oggetto che sceglie in modo casuale le celle in TableLayoutPanel. Il secondo oggetto è un List<T> oggetto . Archivia i simboli scelti in modo casuale.

1. Apri Visual Studio. Il progetto MatchingGame compare sotto Apri recente.

2. Selezionare Form1.cs se si usa C# o Form1.vb se si usa Visual Basic. Selezionare quindi Visualizza>codice. In alternativa, selezionare il tasto F7 o fare doppio clic su Form1. L'IDE di Visual Studio visualizza il modulo di codice per Form1.

3. Nel codice esistente aggiungere il codice seguente.

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

---

Se stai usando C#, assicurati di inserire il codice dopo la parentesi graffa di apertura e subito dopo la dichiarazione della classe (public partial class Form1 : Form). Se si usa Visual Basic, inserire il codice subito dopo la dichiarazione di classe (Public Class Form1).

È possibile usare gli oggetti elenco per tenere traccia di diversi tipi di elementi. Un elenco può contenere numeri, valori true/false, testo o altri oggetti. Nel gioco corrispondente, l'oggetto elenco ha 16 stringhe, una per ogni cella nel pannello TableLayoutPanel. Ogni stringa è una singola lettera che corrisponde alle icone nelle etichette. Questi caratteri vengono visualizzati nel font Webdings come un bus, una bicicletta e altri.

Annotazioni

Gli elenchi possono ridursi e crescere in base alle esigenze, che è importante in questo programma.

Per altre informazioni sugli elenchi, vedere List<T>. Per un esempio in C#, vedere Un esempio di elenco di base. Per un esempio in Visual Basic, vedere Uso di una raccolta semplice.

Assegnare un'icona casuale a ogni etichetta

Ogni volta che esegui il programma, le icone vengono assegnate in modo casuale ai controlli Label nel form usando il metodo AssignIconsToSquares(). Questo codice usa la parola chiave foreach in C# o For Each in Visual Basic.

1. Aggiungere il AssignIconsToSquares() metodo a Form1.cs o Form1.vb.

   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
   

---

È possibile immettere questo codice subito sotto il codice aggiunto nella sezione precedente.

Annotazioni

Una delle righe è stata commentata intenzionalmente. Puoi aggiungerlo più tardi in questo procedimento.

Il AssignIconsToSquares() metodo itera su ciascun controllo di etichetta nel TableLayoutPanel. Esegue le stesse istruzioni per ognuna di esse. Le istruzioni estraggono un'icona casuale dall'elenco.

• La prima riga converte la variabile di controllo in un'etichetta denominata iconLabel.
• La seconda riga è un'istruzione if che verifica il funzionamento della conversione. Se la conversione funziona, le istruzioni nell'istruzione if vengono eseguite.
• La prima riga nell'istruzione if crea una variabile denominata randomNumber che contiene un numero casuale che corrisponde a uno degli elementi nell'elenco delle icone. Usa il Next() metodo dell'oggetto Random . Il Next metodo restituisce il numero casuale. Questa riga usa anche la Count proprietà dell'elenco delle icone per determinare l'intervallo da cui scegliere il numero casuale.
• La riga successiva assegna una delle voci dell'elenco delle icone alla Text proprietà dell'etichetta.
• La riga successiva nasconde le icone. La riga è commentata qui in modo da poter verificare il resto del codice prima di procedere.
• L'ultima riga nell'istruzione if rimuove l'icona aggiunta al modulo dall'elenco.

1. Aggiungere una chiamata al metodo AssignIconsToSquares() nel costruttore di Form1 in Form1.cs. Questo metodo riempie la tavola da gioco con icone. I costruttori vengono chiamati quando si crea un oggetto .

   public Form1()
   {
       InitializeComponent();
   
       AssignIconsToSquares();
   }
   

   Per Visual Basic, aggiungere la chiamata al metodo AssignIconsToSquares() nel metodo Form1_Load in Form1.vb.

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

   Per altre informazioni, vedere Costruttori (Guida per programmatori C#) o Usare costruttori e distruttori.

2. Salvare il programma ed eseguirlo. Dovrebbe mostrare un modulo con icone casuali assegnate a ogni etichetta.

   Suggerimento

   Se le icone Webdings non vengono visualizzate correttamente nel modulo, impostare la proprietà UseCompatibleTextRendering delle etichette nel form su True.

3. Chiudere il programma e quindi eseguirlo di nuovo. A ogni etichetta vengono assegnate icone diverse.

   

   Le icone sono ora visibili perché non sono state nascoste. Per nasconderli dal lettore, è possibile impostare la proprietà ForeColor di ogni etichetta sullo stesso colore della relativa proprietà BackColor .

4. Arrestare il programma. Rimuovere i segni di commento dalla riga di codice commentata all'interno del ciclo nel metodo AssignIconsToSquares().

   C#

   iconLabel.ForeColor = iconLabel.BackColor;
   

   VB

   iconLabel.ForeColor = iconLabel.BackColor
   

---

Se si esegue di nuovo il programma, le icone sembrano essere scomparse. Viene visualizzato solo uno sfondo blu. Le icone vengono assegnate in modo casuale e sono ancora presenti.

Aggiungere gestori eventi alle etichette

In questo gioco corrispondente, un giocatore rivela un'icona nascosta, quindi una seconda. Se le icone corrispondono tra loro, rimangono visibili. In caso contrario, entrambe le icone vengono nascoste di nuovo.

Per ottenere il funzionamento del gioco in questo modo, aggiungere un Click gestore eventi che modifica il colore dell'etichetta scelta in modo che corrisponda allo sfondo.

1. Apri il form nel Windows Forms Designer. Selezionare Form1.cs o Form1.vb e quindi selezionare Visualizza>Progettazione.

2. Scegliere il primo controllo etichetta per selezionarlo e fare doppio clic su di esso per aggiungere un Click gestore eventi denominato label1 _Click() al codice.

3. Tenere quindi premuto CTRL mentre si selezionano le altre etichette. Assicurarsi che ogni etichetta sia selezionata.

4. Nella finestra Proprietà selezionare il pulsante Eventi , ovvero un fulmine. Per l'evento Click selezionare label1_Click nella casella.

   

5. Selezionare il tasto INVIO . L'IDE aggiunge un Click gestore eventi denominato label1 _Click() al codice in Form1.cs o Form1.vb. Poiché hai selezionato tutte le etichette, il gestore viene collegato a ciascuna di esse.

6. Compilare il resto del codice.

   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
   

---

Annotazioni

Se si copia e incolla il blocco di codice label1_Click() anziché immetterlo manualmente, assicurarsi di sostituire il codice label1_Click() esistente. In caso contrario, si otterrà un blocco di codice duplicato.

Selezionare Debug>Avvia debug per eseguire il programma. Dovresti vedere una maschera vuota con uno sfondo blu. Scegli una delle celle nel modulo. Una delle icone dovrebbe diventare visibile. Continuare a scegliere posizioni diverse nel modulo. Quando si scelgono le icone, dovrebbero essere visualizzate.

Passaggi successivi

Passare all'esercitazione successiva per informazioni su come modificare le etichette usando un timer.

Usa un timer nel tuo gioco di abbinamento