Tutorial: Incorporación de iconos a la aplicación de WinForms del juego de formar parejas

En esta serie de cuatro tutoriales, creará un juego de formar parejas en el que el usuario que juegue formará parejas de iconos ocultos.

En el juego, un jugador selecciona un cuadrado para ver un icono y, luego, elige otro cuadrado. Si los iconos coinciden, permanecen visibles. Si no es así, el juego los oculta. En este tutorial, asignará iconos a las etiquetas de manera aleatoria. Establece que estén ocultos y que se muestren al seleccionarlos.

En este segundo tutorial, obtendrá información sobre cómo hacer lo siguiente:

• Agregar un objeto aleatorio y una lista de iconos
• Asignar un icono aleatorio a cada etiqueta
• Agregar controladores de eventos que muestren iconos a las etiquetas

Requisitos previos

Este tutorial se basa en el tutorial anterior, Creación de una aplicación de juego para formar parejas. Si no ha realizado ese tutorial, revíselo primero.

Agregar un objeto aleatorio y una lista de iconos

En esta sección, creará un conjunto de símbolos para formar parejas en el juego. Cada símbolo se agrega a dos celdas aleatorias del elemento TableLayoutPanel en el formulario.

Use las instrucciones new para crear dos objetos. El primero es un objeto Random que elige celdas en TableLayoutPanel de manera aleatoria. El segundo es un objeto List<T>, que almacena los símbolos elegidos aleatoriamente.

1. Abra Visual Studio. El proyecto MatchingGame aparece en Abrir recientes.

2. Seleccione Form1.cs si utiliza C#, o bien Form1.vb si usa Visual Basic. Luego, seleccione Ver>Código. Como alternativa, seleccione la tecla F7 o haga doble clic en Form1. El IDE de Visual Studio muestra el módulo de código para Form1.

3. En el código existente, agregue el siguiente código.

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

---

Importante

Use el control del lenguaje de programación situado en la parte superior derecha de esta página para ver el fragmento de código de C# o el de Visual Basic.

Si usa C#, asegúrese de que coloca el código detrás de la llave de apertura y justo detrás de la declaración de clase (public partial class Form1 : Form). Si usa Visual Basic, coloque el código justo detrás de la declaración de clase (Public Class Form1).

Puede utilizar objetos de lista para realizar un seguimiento de tipos de elementos distintos. Una lista puede contener números, valores true/false, texto u otros objetos. En el juego de formar parejas, el objeto de lista tiene 16 cadenas, una para cada celda del panel TableLayoutPanel. Cada cadena es una sola letra que corresponde a los iconos de las etiquetas. Estos caracteres aparecen en la fuente Webdings como un bus, una bicicleta y muchos otros.

Nota

Las listas pueden reducir y crecer según sea necesario, algo que es importante en este programa.

Para más información sobre las listas, consulte List<T>. Si desea ver un ejemplo en C#, consulte Un ejemplo de lista básico. Si desea ver un ejemplo en Visual Basic, consulte Uso de una colección Simple.

Asignar un icono aleatorio a cada etiqueta

Cada vez que ejecuta el programa, este asigna los iconos aleatoriamente a los controles de etiqueta del formulario a través de un método AssignIconsToSquares(). Este código usa la palabra clave foreach en C# o For Each en Visual Basic.

1. Agregue el método AssignIconsToSquares().

   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
   

---

Puede escribir este código justo debajo del que agregó en la sección anterior.

Nota

Una de las líneas está marcada como comentario a propósito. La agregará más adelante en este procedimiento.

El método AssignIconsToSquares() recorre en iteración cada control de etiqueta en TableLayoutPanel. Ejecuta las mismas instrucciones para cada uno de ellos. Las instrucciones extraen un icono aleatorio de la lista.

• La primera línea convierte la variable control en una etiqueta denominada iconLabel.
• La segunda línea es una instrucción if que comprueba que la conversión funcionó. Si la conversión funciona, se ejecutan las instrucciones de la instrucción if.
• La primera línea de la instrucción if crea una variable denominada randomNumber que contiene un número aleatorio que se corresponde con uno de los elementos de la lista de iconos. Usa el método Next() del objeto Random. El método Next devuelve el número aleatorio. Esta línea también utiliza la propiedad Count de la lista de iconos para determinar el intervalo en el que se elige el número aleatorio.
• La línea siguiente asigna uno de los elementos de la lista de iconos a la propiedad Text de la etiqueta.
• La línea siguiente oculta los iconos. La línea aquí está marcada como comentario para que pueda comprobar el resto del código antes de continuar.
• La última línea de la instrucción if quita el icono que se agregó al formulario de la lista.

1. Agregue una llamada al método AssignIconsToSquares() al constructor de Form1. Este método rellena con iconos el tablero de juego. Se llama a los constructores cuando se crea un objeto.

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

   Para Visual Basic, agregue la llamada de método AssignIconsToSquares() al método Form1_Load.

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

   Para más información, consulte Constructores (guía de programación de C#) o Utilizar constructores y destructores.

2. Guarde el programa y ejecútelo. Ahora, debería mostrar un formulario con iconos aleatorios asignados a cada etiqueta.

   Sugerencia

   Si los iconos de Webdings no se muestran correctamente en el formulario, establezca la propiedad UseCompatibleTextRendering de etiquetas del formulario en True.

3. Cierre el programa y, a continuación, ejecútelo de nuevo. Se asignan iconos diferentes a cada etiqueta.

   

   Los iconos se muestran visibles ahora porque no los ha ocultado. Para ocultárselos al jugador, establezca la propiedad ForeColor de cada etiqueta en el mismo color que su propiedad BackColor.

4. Detenga el programa. Quite las marcas de comentario de la línea de código comentada dentro del bucle.

   C#

   iconLabel.ForeColor = iconLabel.BackColor;
   

   VB

   iconLabel.ForeColor = iconLabel.BackColor
   

---

Si vuelve a ejecutar el programa, parecerá que los iconos desaparecieron. Solo aparecerá un fondo azul. Los iconos se asignan de manera aleatoria y siguen ahí.

Incorporación de controlador de eventos a las etiquetas

En este juego de formar parejas, un jugador revela un icono oculto y luego otro. Si los iconos coinciden, permanecen visibles. En caso contrario, se vuelven a ocultar.

Para que el juego funcione de esta manera, agregue un controlador de eventos Click que cambie el color de la etiqueta elegida para que coincida con el fondo.

1. Abra el formulario en el Diseñador de Windows Forms. Seleccione Form1.cs o Form1.vb y, luego, Ver>Diseñador.

2. Elija el primer control de etiqueta para seleccionarlo y haga doble clic en él para agregar un controlador de eventos Click denominado label1 _Click() al código.

3. Después, mantenga presionada la tecla Ctrl mientras selecciona cada una de las otras etiquetas. Asegúrese de que todas las etiquetas están seleccionadas.

4. En la ventana Propiedades, seleccione el botón Eventos, que aparece como un rayo. Para el evento Clic, seleccione label1_Click en el cuadro.

   

5. Presione la tecla Entrar. El IDE agrega un controlador de eventos Click denominado label1 _Click() al código. Como seleccionó todas las etiquetas, el controlador se enlazará a cada una de las etiquetas.

6. Rellene el resto del 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

Si copia y pega el bloque label1_Click() de código, en lugar de escribirlo manualmente, asegúrese de reemplazar el código label1_Click() existente. De lo contrario, se encontrará con un bloque de código duplicado.

Seleccione Depurar>Iniciar depuración para ejecutar el programa. Debería ver un formulario vacío con un fondo azul. Elija cualquiera de las celdas del formulario. Debería mostrarse uno de los iconos. Siga eligiendo distintas partes del formulario. A medida que elija los iconos, estos deberían mostrarse.

Pasos siguientes

Pase al tutorial siguiente para aprender a cambiar las etiquetas con un temporizador.

Uso de un temporizador en el juego para formar parejas