Tutorial: Adicionar ícones ao seu aplicativo WinForms de jogo correspondente

Nesta série de quatro tutoriais, você constrói um jogo de correspondência, onde o jogador combina pares de ícones ocultos.

No jogo correspondente, um jogador seleciona um quadrado para ver um ícone e, em seguida, escolhe outro quadrado. Se os ícones corresponderem, eles permanecerão visíveis. Caso contrário, o jogo esconde ambos os ícones. Neste tutorial, você atribui ícones a rótulos aleatoriamente. Você os define para serem ocultos e, em seguida, exibidos quando selecionados.

Neste segundo tutorial, você aprenderá a:

• Adicione um objeto aleatório e uma lista de ícones.
• Atribua um ícone aleatório a cada rótulo.
• Adicione manipuladores de eventos que mostram ícones aos rótulos.

Pré-requisitos

Este tutorial baseia-se no tutorial anterior, Criar um aplicativo de jogo correspondente. Se você ainda não fez esse tutorial, passe por ele primeiro.

Adicionar um objeto aleatório e uma lista de ícones

Nesta seção, você cria um conjunto de símbolos correspondentes para o jogo. Cada símbolo é adicionado a duas células aleatórias no TableLayoutPanel no formulário.

Use instruções new para criar dois objetos. O primeiro é um objeto Random que escolhe aleatoriamente células no TableLayoutPanel. O segundo objeto é um objeto List<T>. Ele armazena os símbolos escolhidos aleatoriamente.

1. Abra o Visual Studio. O seu projeto MatchingGame aparece em Open recent.

2. Selecione Form1.cs se estiver usando C# ou Form1.vb se estiver usando o Visual Basic. Em seguida, selecione Exibir>código. Como alternativa, selecione a tecla F7 ou clique duas vezes Form1. O IDE do Visual Studio exibe o módulo de código para o Form1.

3. No código existente, adicione o código a seguir.

   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 estiveres a usar C#, assegura-te de colocar o código após a chave de abertura e logo após a declaração de classe (public partial class Form1 : Form). Se você estiver usando o Visual Basic, coloque o código logo após a declaração de classe (Public Class Form1).

Você pode usar objetos de lista para controlar diferentes tipos de itens. Uma lista pode conter números, valores verdadeiros/falsos, texto ou outros objetos. No jogo correspondente, o objeto de lista tem 16 strings, uma para cada célula no painel TableLayoutPanel. Cada string é uma única letra que corresponde aos ícones nos rótulos. Esses caracteres aparecem na fonte Webdings como um ônibus, uma bicicleta e outros.

Observação

As listas podem diminuir e crescer conforme necessário, o que é importante neste programa.

Para saber mais sobre listas, consulte List<T>. Para ver um exemplo em C#, consulte Um exemplo de lista básica. Para ver um exemplo no Visual Basic, consulte Usando uma coleção simples.

Atribuir um ícone aleatório a cada etiqueta

Cada vez que você executa o programa, ele atribui os ícones aleatoriamente para os controles Label em seu formulário usando um método AssignIconsToSquares(). Esse código usa a palavra-chave foreach em C# ou For Each no Visual Basic.

1. Adicione o método AssignIconsToSquares() a Form1.cs ou 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
   

---

Você pode inserir este código logo abaixo do código que você adicionou na seção anterior.

Observação

Uma das linhas é comentada de propósito. Você pode adicioná-lo posteriormente neste procedimento.

O método AssignIconsToSquares() itera através de cada controle de rótulo no TableLayoutPanel. Executa as mesmas declarações para cada um deles. As declarações selecionam um ícone aleatório da lista.

• A primeira linha converte a variável de controlo num rótulo chamado iconLabel.
• A segunda linha é uma instrução if que verifica se a conversão funcionou. Se a conversão funcionar, as instruções na instrução if serão executadas.
• A primeira linha na instrução if cria uma variável chamada randomNumber que contém um número aleatório que corresponde a um dos itens na lista de ícones. Ele usa o método Next() do objeto Random. O método Next retorna o número aleatório. Essa linha também usa a propriedade Count da lista de ícones para determinar o intervalo a partir do qual escolher o número aleatório.
• A próxima linha atribui um dos ícones itens de lista à propriedade Text do rótulo.
• A próxima linha oculta os ícones. A linha é comentada aqui para que você possa verificar o resto do código antes de prosseguir.
• A última linha da instrução if remove da lista o ícone que foi adicionado ao formulário.

1. Adicione uma chamada ao método AssignIconsToSquares() para o Form1construtor em Form1.cs. Este método preenche o tabuleiro de jogo com ícones. Os construtores são chamados quando você cria um objeto.

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

   Para Visual Basic, adicione a chamada de método AssignIconsToSquares() ao método Form1_Load no Form1.vb.

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

   Para mais informações, veja Construtores (guia de programação em C#) ou Utilizar construtores e destruidores.

2. Salve seu programa e execute-o. Ele deve mostrar um formulário com ícones aleatórios atribuídos a cada rótulo.

   Dica

   Se os ícones Webdings não forem exibidos corretamente no formulário, defina a propriedade UseCompatibleTextRendering de rótulos no formulário como True.

3. Feche o programa e, em seguida, execute-o novamente. Ícones diferentes são atribuídos a cada rótulo.

   

   Os ícones estão visíveis agora porque você não os ocultou. Para ocultá-los do jogador, pode-se definir a propriedade ForeColor de cada rótulo com a mesma cor que a sua propriedade BackColor.

4. Pare o programa. Remova as marcas de comentário para a linha de código comentada dentro do loop no método AssignIconsToSquares().

   C#

   iconLabel.ForeColor = iconLabel.BackColor;
   

   VB

   iconLabel.ForeColor = iconLabel.BackColor
   

---

Se você executar o programa novamente, os ícones parecem ter desaparecido. Apenas um fundo azul aparece. Os ícones são atribuídos aleatoriamente e ainda estão lá.

Adicionar manipuladores de eventos a rótulos

Neste jogo de correspondência, um jogador revela um ícone escondido e depois outro. Se os ícones corresponderem, eles permanecerão visíveis. Caso contrário, ambos os ícones ficam ocultos novamente.

Para que seu jogo funcione dessa forma, adicione um manipulador de eventos Click que altere a cor do rótulo escolhido para corresponder ao plano de fundo.

1. Abra o formulário no Windows Forms Designer. Selecione Form1.cs ou Form1.vbe, em seguida, selecione Exibir>Designer.

2. Escolha o primeiro controle label para selecioná-lo e clique duas vezes nele para adicionar um manipulador de eventos Click chamado label1 _Click() ao código.

3. Em seguida, mantenha pressionada a tecla Ctrl enquanto seleciona cada um dos outros rótulos. Certifique-se de que todos os rótulos estão selecionados.

4. Na janela Propriedades , selecione o botão Eventos , que é um raio. Para o evento Clique, selecione label1_Click na caixa.

   

5. Selecione a tecla Enter. O IDE adiciona um manipulador de eventos Click chamado label1 _Click() ao código em Form1.cs ou Form1.vb. Como selecionaste todas as etiquetas, o manipulador está ligado a cada uma delas.

6. Preencha o resto do código.

   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
   

---

Observação

Se você copiar e colar o bloco de código label1_Click() em vez de inserir o código manualmente, certifique-se de substituir o código label1_Click() existente. Caso contrário, você acabará com um bloco de código duplicado.

Selecione Depurar>Iniciar a Depuração para executar o programa. Você deve ver um formulário vazio com um fundo azul. Escolha qualquer uma das células do formulário. Um dos ícones deve ficar visível. Continue escolhendo lugares diferentes no formulário. À medida que você escolhe os ícones, eles devem aparecer.

Próximos passos

Avance para o próximo tutorial para aprender a alterar etiquetas usando um temporizador.

Utilize um temporizador no seu jogo de pares