Tutorial: Adicionar ícones ao aplicativo WinForms do jogo correspondente

Nesta série de quatro tutoriais, você cria um jogo da memória em que o jogador encontra 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 oculta os dois ícones. Neste tutorial, você atribui ícones a rótulos aleatoriamente. Defina-os como 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 esse primeiro.

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

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

Você usa 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. Seu projeto MatchingGame aparece em Abrir recente.

2. Selecione Form1.cs se você estiver usando C#ou Form1.vb se estiver usando o Visual Basic. Depois, selecione Visualizar>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 do 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 você estiver usando o C#, certifique-se de colocar o código após a chave da 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 acompanhar 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 cadeias de caracteres, uma para cada célula no painel TableLayoutPanel. Cada cadeia de caracteres é uma única letra que corresponde aos ícones nos rótulos. Esses caracteres aparecem na fonte Webdings como um ônibus, uma bicicleta e outros.

Nota

As listas podem reduzir 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 rótulo

Cada vez que você executa o programa, ele atribui os ícones aleatoriamente aos 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() para 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 esse código logo abaixo do código adicionado na seção anterior.

Nota

Uma das linhas é comentada de propósito. Adicione-a posteriormente neste procedimento.

O método AssignIconsToSquares() itera por meio de cada controle de rótulo no TableLayoutPanel. Ele executa as mesmas instruções para cada uma delas. As instruções extraem um ícone aleatório da lista.

• A primeira linha converte a variável de controle em um 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 sã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 da qual escolher o número aleatório.
• A próxima linha atribui um dos itens da lista de ícones à propriedade Text do rótulo.
• A próxima linha oculta os ícones. A linha é comentada aqui para que você possa verificar o restante do código antes de prosseguir.
• A última linha na instrução if remove da lista o ícone que foi adicionado ao formulário.

1. Adicione uma chamada ao método AssignIconsToSquares() no construtor Form1 em Form1.cs. Esse método preenche o quadro de jogos com ícones. Construtores são chamados quando você cria um objeto.

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

   Para o Visual Basic, adicione a chamada do método AssignIconsToSquares() ao método Form1_Load em Form1.vb.

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

   Para obter mais informações, confira Construtores (guia de programação em C#) ou Usar 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 de Webdings não forem exibidos corretamente no formulário, defina a propriedade UseCompatibleTextRendering de rótulos no formulário para True.

3. Feche o programa e 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 escondeu. Para ocultá-los do jogador, você pode definir a propriedade ForeColor de cada rótulo para a mesma cor de sua propriedade BackColor.

4. Pare o programa. Remova as marcas de comentário da 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 plano de fundo azul é exibido. Os ícones são atribuídos aleatoriamente e ainda estão lá.

Adicionar manipuladores de eventos a rótulos

Neste jogo correspondente, um jogador revela um ícone oculto e, em seguida, um segundo. Se os ícones corresponderem, eles permanecerão visíveis. Caso contrário, ambos os ícones serão ocultados novamente.

Para que o jogo funcione dessa forma, adicione um manipulador de eventos Click que altera a cor do rótulo escolhido para corresponder à tela de fundo.

1. Abra o formulário no Designer de Formulários do Windows. Selecione Form1.cs ou Form1.vbe selecione Exibir>Designer.

2. Escolha o primeiro controle de rótulo 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 Clicar, 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 você selecionou todos os rótulos, o handler está conectado a cada rótulo.

6. Preencha o restante 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
   

---

Nota

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

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

Próximas etapas

Avance para o próximo tutorial para saber como alterar rótulos usando um temporizador.

Usar um temporizador no Jogo Correspondente