Tutorial: Incorporación de variables de referencia y un control de temporizador a la aplicación de WinForms para un juego de formar parejas

Artículo
01/29/2025

En esta serie de cuatro tutoriales, construyes un juego de emparejamiento, donde el jugador empareja pares de iconos ocultos.

El programa del juego de formar parejas necesita realizar un seguimiento de los controles Label que elige el jugador. Después de que un jugador elija la primera etiqueta, el programa debe mostrar el icono. Una vez elegida la segunda etiqueta, el programa debe mostrar ambos iconos durante un breve tiempo. A continuación, oculta ambos iconos.

El programa hace un seguimiento de la etiqueta que eligió en primer y segundo lugar mediante las variables de referencia. Un temporizador oculta los iconos y controla cuánto tiempo se muestran los iconos.

Agregue referencias de etiqueta.
Agregue un temporizador.

Prerrequisitos

Este tutorial se basa en tutoriales anteriores, Crear una aplicación de juego coincidente y Agregar iconos al juego coincidente. Complete primero esos tutoriales.

Adición de referencias de etiquetas

En esta sección, vas a agregar dos variables de referencia a tu código. Hacen seguimiento de los objetos Label o hacen referencia a ellos.

Agregue referencias de etiqueta al formulario mediante el código siguiente en Form1.cs o Form1.vb.

public partial class Form1 : Form
{
    // firstClicked points to the first Label control 
    // that the player clicks, but it will be null 
    // if the player hasn't clicked a label yet
    Label firstClicked = null;

    // secondClicked points to the second Label control 
    // that the player clicks
    Label secondClicked = null;

Public Class Form1

    ' firstClicked points to the first Label control 
    ' that the player clicks, but it will be Nothing 
    ' if the player hasn't clicked a label yet
    Private firstClicked As Label = Nothing

    ' secondClicked points to the second Label control 
    ' that the player clicks
    Private secondClicked As Label = Nothing

Si usa C#, coloque 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 después de la declaración de clase (Public Class Form1).

Estas instrucciones no hacen que los controles Label aparezcan en el formulario porque no hay ninguna palabra clave new. Cuando se inicia el programa, tanto firstClicked como secondClicked se establecen en null para C# o Nothing para Visual Basic.

Modifique el controlador de eventos de Click en Form1.cs o Form1.vb para usar la nueva variable de referencia de firstClicked. Quite la última instrucción del método de controlador de eventos label1_Click() (clickedLabel.ForeColor = Color.Black;) y reemplácela por la instrucción if como se indica a continuación.

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

        // If firstClicked is null, this is the first icon 
        // in the pair that the player clicked,
        // so set firstClicked to the label that the player 
        // clicked, change its color to black, and return
        if (firstClicked == null)
        {
            firstClicked = clickedLabel;
            firstClicked.ForeColor = Color.Black;

            return;
        }
    }
}

''' <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

        ' If firstClicked is Nothing, this is the first icon 
        ' in the pair that the player clicked, 
        ' so set firstClicked to the label that the player
        ' clicked, change its color to black, and return
        If firstClicked Is Nothing Then
            firstClicked = clickedLabel
            firstClicked.ForeColor = Color.Black
            Exit Sub
        End If
    End If

End Sub

Guarde y ejecute el programa. Elija uno de los controles de etiqueta y aparecerá su icono. Elija el siguiente control de etiqueta y observe que no sucede nada.

Solo aparece el primer icono elegido. Los otros iconos son invisibles.

El programa ya está realizando un seguimiento de la primera etiqueta que eligió el jugador. El firstClicked de referencia no es null en C# ni es Nothing en Visual Basic. Cuando la instrucción if encuentra que firstClicked no es igual que null o Nothing, ejecuta las instrucciones.

Agregar un temporizador

La aplicación Juego coincidente usa un control Timer. Un temporizador espera y luego desencadena un evento, lo que se conoce como tic. Un temporizador puede iniciar una acción o repetir una acción con regularidad.

En el programa, el temporizador permite que un jugador elija dos iconos. Si los iconos no coinciden, oculta los dos iconos de nuevo después de un breve período de tiempo.

Seleccione la pestaña Cuadro de herramientas y, en la categoría Componentes, haga doble clic en el componente Temporizador o arrástrelo al formulario. El icono del temporizador, denominado temporizador1, aparece en un espacio debajo del formulario.
Seleccione el icono Timer1 para seleccionar el temporizador. En la ventana Propiedades, seleccione el botón Propiedades para ver las propiedades.
Establezca la propiedad Interval en 750, que se refiere a 750 milisegundos.

La propiedad Interval indica al temporizador cuánto tiempo debe esperar entre los tics cuando desencadena el evento Tick. El programa llama al método Start() para iniciar el temporizador después de que el jugador elija la segunda etiqueta.

Elija el icono de control del temporizador y presione Intro, o haga doble clic en el temporizador. El IDE agrega un controlador de eventos Tic vacío a Form1.cs o Form1.vb. Reemplace el código por el código siguiente.

/// <summary>
/// This timer is started when the player clicks 
/// two icons that don't match,
/// so it counts three quarters of a second 
/// and then turns itself off and hides both icons
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void timer1_Tick(object sender, EventArgs e)
{
    // Stop the timer
    timer1.Stop();

    // Hide both icons
    firstClicked.ForeColor = firstClicked.BackColor;
    secondClicked.ForeColor = secondClicked.BackColor;

    // Reset firstClicked and secondClicked 
    // so the next time a label is
    // clicked, the program knows it's the first click
    firstClicked = null;
    secondClicked = null;
}

''' <summary>
''' This timer is started when the player clicks 
''' two icons that don't match,
''' so it counts three quarters of a second 
''' and then turns itself off and hides both icons
''' </summary>
''' <remarks></remarks>
Private Sub Timer1_Tick() Handles Timer1.Tick

    ' Stop the timer
    Timer1.Stop()

    ' Hide both icons
    firstClicked.ForeColor = firstClicked.BackColor
    secondClicked.ForeColor = secondClicked.BackColor

    ' Reset firstClicked and secondClicked 
    ' so the next time a label is
    ' clicked, the program knows it's the first click
    firstClicked = Nothing
    secondClicked = Nothing

End Sub

El controlador de eventos Tick hace tres cosas:

Se asegura de que el temporizador no se está ejecutando llamando al método Stop().
Usa dos variables de referencia, firstClicked y secondClicked, para convertir los iconos de las dos etiquetas que el jugador eligió invisible de nuevo.
Restablece las variables de referencia firstClicked y secondClicked en null en C# y Nothing en Visual Basic.

Vaya al editor de código y agregue código a la parte superior e inferior del método de controlador de eventos label1_Click() en Form1.cs o Form1.vb. Este código comprobará si el temporizador está habilitado, establecerá la variable de referencia secondClicked e iniciará el temporizador. El método de controlador de eventos label1_Click() ahora tiene el siguiente aspecto:

/// <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)
{
    // The timer is only on after two non-matching 
    // icons have been shown to the player, 
    // so ignore any clicks if the timer is running
    if (timer1.Enabled == true)
        return;

    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;

        // If firstClicked is null, this is the first icon
        // in the pair that the player clicked, 
        // so set firstClicked to the label that the player 
        // clicked, change its color to black, and return
        if (firstClicked == null)
        {
            firstClicked = clickedLabel;
            firstClicked.ForeColor = Color.Black;
            return;
        }

        // If the player gets this far, the timer isn't
        // running and firstClicked isn't null,
        // so this must be the second icon the player clicked
        // Set its color to black
        secondClicked = clickedLabel;
        secondClicked.ForeColor = Color.Black;

        // If the player gets this far, the player 
        // clicked two different icons, so start the 
        // timer (which will wait three quarters of 
        // a second, and then hide the icons)
        timer1.Start();
    }
}

''' <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

    ' The timer is only on after two non-matching 
    ' icons have been shown to the player, 
    ' so ignore any clicks if the timer is running
    If Timer1.Enabled Then Exit Sub

    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

        ' If firstClicked is Nothing, this is the first icon 
        ' in the pair that the player clicked, 
        ' so set firstClicked to the label that the player 
        ' clicked, change its color to black, and return
        If firstClicked Is Nothing Then
            firstClicked = clickedLabel
            firstClicked.ForeColor = Color.Black
            Exit Sub
        End If

        ' If the player gets this far, the timer isn't 
        ' running and firstClicked isn't Nothing, 
        ' so this must be the second icon the player clicked
        ' Set its color to black
        secondClicked = clickedLabel
        secondClicked.ForeColor = Color.Black

        ' If the player gets this far, the player 
        ' clicked two different icons, so start the 
        ' timer (which will wait three quarters of 
        ' a second, and then hide the icons)
        Timer1.Start()
    End If

End Sub

El código en la parte superior del método comprueba si el temporizador se inició comprobando el valor de la propiedad Enabled. Si el jugador elige los controles de primera y segunda etiqueta y se inicia el temporizador, elegir una tercera etiqueta no hará nada.
El código de la parte inferior del método establece la variable de referencia secondClicked para realizar el seguimiento del segundo control Label. A continuación, establece ese color de icono de etiqueta en negro para que sea visible. A continuación, inicia el temporizador en modo de un disparo de forma que espere 750 milisegundos antes de desencadenar un tic único. El controlador de eventos Tick del temporizador oculta los dos iconos y restablece los firstClicked y secondClicked variables de referencia. El formulario está listo para que el jugador elija otro par de iconos.

Nota

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

Guarde y ejecute el programa. Seleccione un cuadrado y el icono se haga visible. Elija otro cuadrado. El icono aparece brevemente y, a continuación, ambos iconos desaparecen.

El programa ahora realiza un seguimiento de los iconos primero y segundo que elija. Usa el temporizador para pausar antes de que los iconos desaparezcan.

Pasos siguientes

Pase al tutorial siguiente para aprender a finalizar el juego de formar parejas.

Visualización de un mensaje de felicitaciones para el juego de formar parejas

Compartir vía

Tutorial: Incorporación de variables de referencia y un control de temporizador a la aplicación de WinForms para un juego de formar parejas

Prerrequisitos

Adición de referencias de etiquetas

Agregar un temporizador

Pasos siguientes

Comentarios

Recursos adicionales