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
03/24/2023

En esta serie de cuatro tutoriales, creará un juego de formar parejas en el que el usuario que juegue formará parejas 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 elige la primera etiqueta, el programa debe mostrar el icono. Una vez elegida la segunda etiqueta, el programa debe mostrar ambos iconos durante un período breve. Luego, los oculta.

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.

Agregar referencias de etiqueta.
Agregar un temporizador.

Requisitos previos

Este tutorial se basa en los tutoriales anteriores Creación de una aplicación de juego de formar parejas e Incorporación de iconos al juego de formar parejas. Complete primero esos tutoriales.

Agregar referencias a etiquetas

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

Para agregar referencias de etiqueta a un formulario, use el siguiente código.

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

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.

Programming language control for Microsoft Learn

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 en Nothing para Visual Basic.

Modifique el controlador de eventos Click para usar la nueva variable de referencia 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, tal 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á el correspondiente icono. Elija el siguiente control de etiqueta y verá que no sucede nada.

Solo aparece el primer icono elegido. Los demás iconos son invisibles.

El programa ya realiza un seguimiento de la primera etiqueta que eligió el jugador. La referencia firstClicked no es null en C# ni 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 de manera periódica.

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

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 de temporizador, timer1, 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 elige la segunda etiqueta.

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

/// <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 Tic realiza tres operaciones:

Se asegura de que el temporizador no está en marcha mediante una llamada al método Stop().
Usa las dos variables de referencia, firstClicked y secondClicked, para ocultar de nuevo los iconos de las dos etiquetas que el jugador eligió.
Restablece las variables de referencia firstClicked y secondClicked a null en C# y Nothing en Visual Basic.

Vaya al editor de código y agregue código al principio y al final del método de controlador de eventos label1_Click(). 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 que se encuentra al principio del método comprueba si el temporizador se ha iniciado comprobando el valor de la propiedad Enabled. Si el jugador elige el primer y segundo control Label y se inicia el temporizador, no sucederá nada al elegir un tercer control.
El código de la parte inferior del método establece la variable de referencia secondClicked para realizar un seguimiento del segundo control Label. Luego, establece el color del icono de esa 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 Tic del temporizador oculta los dos iconos y restablece las variables de referencia firstClicked y secondClicked. El formulario está listo para que el jugador elija otro par de iconos.

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.

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

El programa ahora realiza un seguimiento del primer y segundo icono que elija. Usa el temporizador para hacer una pausa antes de hacer 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 a través de