Tutorial 3: Crear un juego de formar parejas (C#)

Visual Studio 2012 En este tutorial, compilar un juego de formar parejas en el que el jugador debe buscar las coincidencias entre pares de iconos ocultos. Aprender a: Usar un objeto List para contener objetos. Usar un bucle foreach en Visual C# o un bucle For Each en Visual Basic. Realizar el seguimiento del estado de un formulario mediante variables de referencia. Compilar un controlador de eventos que se pueda usar con varios objetos. Hacer que un temporizador se active una vez despus de iniciarse. Cuando termine, el programa se parecer al de la ilustracin siguiente. Juego que crear en este tutorial

Nota En este tutorial, se trata tanto Visual C# como Visual Basic, por lo que deber centrarse en la informacin especfica del lenguaje de programacin que use.

Temas relacionados
Ttulo Paso 1: Crear un proyecto y agregar una tabla a un formulario Paso 2: Agregar un objeto aleatorio y una lista de iconos Paso 3: Asignar un icono Descripcin El primer paso es crear el proyecto y agregar un control TableLayoutPanel.

Agregar un objeto Random y un objeto List, para crear una lista de iconos.

Asignar los iconos aleatoriamente a los controles Label.

aleatorio a cada etiqueta Paso 4: Agregar un controlador de eventos Click a cada etiqueta Paso 5: Agregar referencias a etiquetas Paso 6: Agregar un temporizador Paso 7: Mantener visibles los pares Paso 8: Agregar un mtodo para comprobar si el jugador gan Paso 9: Probar otras caractersticas Agregar un controlador de eventos Click que cambiar el color de la etiqueta en la que se haga clic.

Agregar variables de referencia para realizar el seguimiento de las etiquetas en las que se hace clic. Agregar un temporizador al formulario.

Mantendr los pares de iconos visibles si se selecciona una pareja coincidente. Agregar un mtodo CheckForWinner() para comprobar si el jugador gan.

Probar otras caractersticas, como cambiar los iconos y colores, agregar una cuadrcula y agregar sonidos. Intentar aumentar el tamao del tablero y ajustar el temporizador.

Paso 1: Crear un proyecto y agregar una tabla a un formulario

Visual Studio 2012 El primer paso para crear un juego de formar parejas es crear el proyecto y agregar una tabla al formulario.

Para crear un proyecto y agregar una tabla al formulario

1. 2. 3. 4. En el men Archivo, haga clic en Nuevo proyecto. Si no usa Visual Studio Express, primero debe seleccionar un lenguaje. En la lista Plantillas instaladas, seleccione C# o Visual Basic. Haga clic en el icono Aplicacin de Windows Forms y, a continuacin, escriba el nombre MatchingGame. Establezca las propiedades del formulario. a. Cambie la propiedad Text del formulario a Matching Game. b. Cambie el tamao a 550 pxeles de ancho por 550 pxeles de alto mediante la propiedad Size o arrastre el mouse hasta que vea el tamao correcto en la esquina inferior izquierda del entorno de desarrollo integrado (IDE). Arrastre un control TableLayoutPanel desde el cuadro de herramientas y, a continuacin, establezca sus propiedades: a. Establezca la propiedad BackColor en CornflowerBlue. (Seleccione la pestaa Web en el selector de colores para ver los nombres de los colores). b. Establezca la propiedad Dock en Fill; para ello, haga clic en el botn de lista desplegable situado al lado de la propiedad y haga clic en el botn grande del medio. c. Haga clic en el botn del tringulo situado en la esquina superior derecha de TableLayoutPanel para mostrar el men de tareas. d. Haga clic dos veces Agregar fila para agregar dos filas ms y, a continuacin, haga clic dos veces enAgregar columna para agregar dos columnas ms.

5.

6.

Haga clic en Editar filas y columnas para abrir la ventana Estilos de columna y fila. Seleccione cada una de las columnas, haga clic en el botn Porcentaje y establezca el ancho de cada columna en el 25 por ciento del ancho total. A continuacin, seleccione Filas en la lista desplegable de la parte superior de la ventana y establezca el alto de cada fila en el 25 por ciento. Haga clic en el botn Aceptar. Ahora, su control TableLayoutPanel debera tener diecisis celdas cuadradas del mismo tamao. Asegrese de que el control TableLayoutPanel est seleccionado en el editor de formularios. Con l seleccionado, abra el cuadro de herramientas y haga doble clic en Etiqueta para agregar un control Label al cuadrado superior izquierdo. Ahora, el control Label debera estar seleccionado en el IDE. Establezca sus propiedades: a. Establezca la propiedad BackColor en CornflowerBlue. b. Establezca la propiedad AutoSize en False. c. Establezca la propiedad Dock en Fill. d. Establezca la propiedad TextAlign en MiddleCenter haciendo clic en el botn de lista desplegable que se encuentra al lado de la propiedad y haciendo clic, a continuacin, en el botn central. e. Haga clic en la propiedad Font. Debera aparecer un botn de puntos suspensivos. f. Haga clic en el botn de puntos suspensivos y establezca la fuente en Webdings 72 point Bold. g. Establezca la propiedad Text en la letra c. La celda superior izquierda de TableLayoutPanel debera contener un cuadro negro grande centrado sobre un fondo azul.

e.

Nota

La fuente Webdings es una fuente de iconos que se distribuye con el sistema operativo Microsoft Windows. En el juego de formar parejas, el jugador necesita encontrar la correspondencia entre pares de iconos, de modo que se usa esta fuente para mostrar los iconos que deben coincidir. En lugar de colocar c en la propiedad Text, pruebe a escribir letras diferentes para ver qu iconos se muestran. Un signo de exclamacin es una araa, una N mayscula es un ojo y una coma es una guindilla.
7. Seleccione el control Label y cpielo. (Presione Ctrl+C o, en el men Edicin, haga clic en Copiar). A continuacin, pguelo. (Presione Ctrl+V o, en el men Edicin, haga clic en Pegar). Aparecer otra etiqueta en la segunda celda de TableLayoutPanel. Vuelva a pegar el control; aparecer otra etiqueta en la tercera celda. Siga pegando los controles Label hasta que se llenen todas las celdas.

Nota

Si pega demasiadas veces, el IDE agrega una nueva fila a TableLayoutPanel para que haya espacio para agregar el nuevo control Label. La accin se puede deshacer. Para quitar la nueva celda, presione Ctrl+Z o, en el men Edicin, haga clic en Deshacer.
8. 9. Ya tiene diseado el formulario. Debera tener este aspecto: Formulario inicial del juego de formar parejas

10.

Para continuar o revisar

Para ir al siguiente paso del tutorial, vea Paso 2: Agregar un objeto aleatorio y una lista de iconos. Para volver al tema de la informacin general, vea Tutorial 4: Crear un juego de formar parejas.

Paso 2: Agregar un objeto aleatorio y una lista de iconos

Visual Studio 2012 Es preciso utilizar dos instrucciones new para crear dos objetos y agregarlos al formulario. El primero es un objetoRandom como el usado en el juego de la prueba de matemticas. El segundo es nuevo: un objeto List.

Para agregar un objeto Random y una lista de iconos

1. Antes de agregar el siguiente cdigo para crear la lista, tenga en cuenta su funcionamiento. public partial class Form1 : Form { // Utilice este objeto aleatorio para elegir iconos aleatorios para las plazas Random random = new Random(); // Cada una de estas cartas es un icono interesante en la fuente Webdings, y cada icono aparece dos veces en esta lista List<string> icons = new List<string>() { "!", "!", "N", "N", ",", ",", "k", "k", "b", "b", "v", "v", "w", "w", "z", "z" };

2.

3.

Pase al editor de cdigo haciendo clic con el botn secundario en Form1.cs en el Explorador de solucionesy haciendo clic a continuacin en Ver cdigo en el men. Comience por escribir el cdigo mostrado en el paso anterior. Al escribir cdigo de Visual C#, asegrese de que coloca el cdigo despus de la llave de apertura y justo despus de la declaracin de clase (public partial class Form1 : Form). Al escribir cdigo de Visual Basic, coloque el cdigo justo despus de la declaracin de clase ( Public Class Form1). Al agregar el objeto List, observe atentamente la ventana IntelliSense que se abre. El siguiente es un ejemplo de Visual C#. Aparecer texto similar si agrega una lista en Visual Basic. Ventana IntelliSense

Nota

Es ms sencillo comprender el cdigo si se examina en secciones pequeas. Sus programas pueden utilizar objetos List para hacer el seguimiento de muchos elementos. Una lista puede contener nmeros, valores true/false, texto u otros objetos. Se puede tener un objeto List que contiene otros objetos List.Los elementos en una lista se llaman elementos y cada lista solo contiene elementos de un tipo. As que una lista de nmeros solo puede contener nmeros; no se puede agregar texto. Tampoco se pueden agregar nmeros a una lista de valores true/false
Nota

Cuando crea un objeto List mediante una instruccin new, necesita indicar lo que desea que contenga. Por eso la informacin sobre herramientas de la parte superior de la ventana IntelliSense muestra el tipo de elementos de la lista. Adems, eso es lo que significa List<string> (en Visual C#) y List(Of String) (en Visual Basic): es un objeto List que contiene cadenas. Una cadena es lo que su programa utiliza para almacenar texto, que es lo que la informacin sobre herramientas de la parte derecha de la ventanaIntelliSense le indica.
4. En Visual Basic se debe crear primero una matriz temporal, pero en Visual C#, la lista se puede crear con una instruccin. Esto es porque Visual C# tiene inicializadores de coleccin. En Visual Basic 2010, puede utilizar un inicializador de coleccin. Sin embargo, por compatibilidad con la versin anterior de Visual Basic, recomendamos utilizar el cdigo anterior.

Nota

Al utilizar un inicializador de coleccin con una instruccin new, una vez creado el nuevo objeto List, el programa lo rellena con lo que haya entre las llaves. En este caso, se obtiene una lista de cadenas denominadas iconos; la lista se inicializar para que contenga diecisis cadenas. Cada una de esas cadenas es una letra nica y todas corresponden a los iconos que se mostrarn en las etiquetas. As que el juego tendr un par de signos de exclamacin, un par de letras N en mayscula, un par de comas, etc.El objeto List tendr diecisis cadenas en total, una por cada celda de la TableLayoutPanel.
Nota

En Visual Basic, se obtiene el mismo resultado, pero las cadenas se colocan primero en una matriz temporal, que se convierte despus en un objeto List. Una matriz es similar a una lista, salvo que las matrices se crean con un tamao fijo. Las listas pueden reducir y crecer segn sea necesario, algo que es importante en este programa.

Para continuar o revisar

Para ir al siguiente paso del tutorial, vea Paso 3: Asignar un icono aleatorio a cada etiqueta. Para volver al paso anterior del tutorial, vea Paso 1: Crear un proyecto y agregar una tabla a un formulario.

Paso 3: Asignar un icono aleatorio a cada etiqueta

Visual Studio 2012 Si el juego siempre oculta los mismos iconos en las mismas ubicaciones, no supone ningn reto. Debe asignar los iconos de forma aleatoria a los controles Label del formulario. Con este objetivo, se agrega un mtodoAssignIconsToSquares().

Para asignar un icono aleatorio a cada etiqueta

1. Antes de agregar el siguiente cdigo, considere cmo funciona el mtodo. Hay una nueva palabra clave:foreach en Visual C# y For Each en Visual Basic. (Una de las lneas est comentada intencionadamente; se explica al final de este procedimiento). /// <summary> /// Asigne a cada icono de la lista de iconos para un cuadrado al azar /// </summary> private void AssignIconsToSquares() { // El TableLayoutPanel tiene 16 etiquetas, y la lista de iconos tiene 16 iconos, por lo que un icono se tir al azar de la lista y se aade a cada etiqueta 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); } } }

2.

Agregue el mtodo AssignIconsToSquares() tal como se indica en el paso anterior. Basta con que lo coloque debajo del cdigo que agreg en Paso 2: Agregar un objeto aleatorio y una lista de iconos. Hay una novedad en el mtodo AssignIconsToSquares(): un bucle foreach en Visual C# y For Each en Visual Basic. Un bucle For Each se usa siempre que se desea realizar la misma accin una y otra vez. En este caso, desea ejecutar las mismas instrucciones para cada etiqueta de TableLayoutPanel, tal y como se observa en el siguiente cdigo. La primera lnea crea una variable denominada control que almacena cada control uno a la vez mientras ese control tiene las instrucciones del bucle ejecutado en l. foreach (Control control in tableLayoutPanel1.Controls) {

// Las declaraciones que se deben ejecutar para cada etiqueta, entra aqu Los estados utilizan iconLabel para acceder a las propiedades y mtodos de cada etiqueta }

Nota

Se usan los nombres iconLabel y control porque son descriptivos. Puede sustituir estos nombres con cualquier nombre, y funcionara exactamente igual cuando cambi el nombre en cada instruccin dentro del bucle.
El mtodo AssignIconsToSquares() recorre cada control Label de TableLayoutPanel y ejecuta las mismas instrucciones para cada uno de ellos. Esas instrucciones extraen un icono aleatorio de la lista que se agreg en Paso 2: Agregar un objeto aleatorio y una lista de iconos. (Por eso incluy dos iconos de cada en la lista, para que hubiera un par de iconos asignado a los controles Label aleatorios.) Considere ms detenidamente el cdigo que se ejecuta dentro del bucle de foreach o de For Each . este cdigo se reproduce aqu. 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); }

3.

la primera lnea convierte la variable de control a Label denominado iconLabel. La lnea que es una instruccin de if que comprueba para asegurarse de que la conversin funcion despus. Si funciona la conversin, las instrucciones en la ejecucin de la instruccin de if . La primera lnea de la instruccin de if crea una variable denominada randomNumber que contenga un nmero aleatorio que corresponde a uno de los elementos de la lista de los iconos. Para ello, utiliza el mtodo de Next del objeto de Random que cre anteriormente. el mtodo de Next devuelve el nmero aleatorio. Esta lnea tambin utiliza la propiedad de Count de la lista de icons para determinar el intervalo de que elegir el nmero aleatorio. la lnea siguiente asigna uno de los elementos de la lista de iconos a la propiedad de Text de la etiqueta. La lnea con comentarios se explica ms adelante en este tema. Finalmente, la ltima lnea de la instruccin de if quita de la lista el icono que se ha agregado al formulario. Recuerde que, si no est seguro sobre lo que alguna parte del cdigo, puede colocar el puntero del mouse sobre un elemento de cdigo y revisar la informacin sobre herramientas resultante. Necesita llamar al mtodo AssignIconsToSquares() en cuanto se inicie el programa. Si escribe cdigo de Visual C#, agregue una instruccin bajo la llamada al mtodo InitializeComponent() en el constructor Form1, de modo que el formulario llame a su nuevo mtodo para prepararse antes de mostrarse. C#

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

Para Visual Basic, primero agregue el constructor y, a continuacin, agregue al constructor la llamada al mtodo. Antes del mtodo AssignIconsToSquares() que acaba de crear, empiece escribiendo el cdigo Public Sub New(). Al presionar la tecla ENTRAR para pasar a la lnea siguiente, IntelliSense debera hacer que apareciese el siguiente cdigo para completar el constructor. VB Public Sub New() ' Esta llamada es requerida por el Diseador de Windows Forms InitializeComponent() ' Agregar cualquier inicializacin despus de la llamada InitializeComponent () End Sub Agregue la llamada al mtodo AssignIconsToSquares() de modo que el constructor sea similar al siguiente. VB

Public Sub New() ' Esta llamada es requerida por el Diseador de Windows Forms InitializeComponent() ' Agregar cualquier inicializacin despus de la llamada InitializeComponent () AssignIconsToSquares() End Sub

4. 5.

Guarde el programa y ejectelo. Ahora, debera mostrar un formulario con iconos aleatorios asignados a cada etiqueta. Cierre el programa y, a continuacin, ejectelo de nuevo. Ahora hay iconos diferentes asignados a cada etiqueta, como se muestra en la siguiente ilustracin. Juego de formar parejas con iconos aleatorios

6.

Ahora detenga el programa y quite los comentarios de la lnea de cdigo dentro del bucle For Each. iconLabel.ForeColor = iconLabel.BackColor;

7.

Haga clic en el botn Guardar todo de la barra de herramientas para guardar el programa y, a continuacin, ejectelo. Parece que los iconos han desaparecido (nicamente se muestra un fondo azul). Sin embargo, los iconos se asignan aleatoriamente y siguen ah. Debido a que los iconos tienen el mismo color que el fondo, no se ven. Para ir al siguiente paso del tutorial, vea Paso 4: Agregar un controlador de eventos Click a cada etiqueta. Para volver al paso anterior del tutorial, vea Paso 2: Agregar un objeto aleatorio y una lista de iconos.

Para continuar o revisar

Paso 4: Agregar un controlador de eventos Click a cada etiqueta

Visual Studio 2012 El juego de formar parejas funciona como sigue: 1. Cuando un jugador hace clic en uno de los cuadrados con icono oculto, el programa muestra el icono al jugador cambiando a negro su color. 2. A continuacin, el jugador hace clic en otro icono oculto. 3. Si los iconos coinciden, permanecen visibles. En caso contrario, se vuelven a ocultar. Para conseguir que un programa funcione as, agregue un controlador de eventos Click que cambie el color de la etiqueta en la que se hace clic.

Para agregar un controlador de eventos Click a cada etiqueta

1. Vaya al Diseador de Windows Forms y haga clic en el primer control Label para seleccionarlo. A continuacin, mantenga presionada la tecla CTRL mientras hace clic en cada una de las otras etiquetas para seleccionarlas. Asegrese de que todas las etiquetas estn seleccionadas. A continuacin, vaya a la pgina Eventos de la ventana Propiedades. Desplcese hacia abajo hasta el evento Click y escriba label_Click en el cuadro, como se muestra en la siguiente ilustracin. Ventana Propiedades con el evento Click

2.

3. 4.

Presione ENTRAR. El IDE agrega al cdigo un controlador de eventos Click denominado label_Click() y lo enlaza a cada una de las etiquetas. Rellene el resto del cdigo como se indica a continuacin:

/// <summary> /// Evento Click de cada etiqueta es manejado por este controlador de eventos /// </summary> /// <param name="sender"> La etiqueta que se hizo clic </ param> /// <param name="e"></param> private void label_Click(object sender, EventArgs e) { Label clickedLabel = sender as Label; if (clickedLabel != null) { // Si hace clic en la etiqueta es de color negro, el jugador hace clic en un icono que ya ha sido revelado - ignore el clic if (clickedLabel.ForeColor == Color.Black) return; clickedLabel.ForeColor = Color.Black; } }

Nota

Es posible que reconozca, del tutorial para crear una prueba matemtica, el elemento object sender que se muestra en la parte superior del controlador de eventos. Enlaz distintos eventos Clic del control Label a un nico mtodo de controlador de eventos, de modo que se llama al mismo mtodo con independencia de la etiqueta en la que haga clic el usuario. Dado que el mtodo necesita saber en qu etiqueta se hizo clic, usa el nombre sender para ese control Label. La primera lnea del mtodo indica al programa que no es solo un objeto, sino que es, en concreto, un control Label y que, a travs del nombre clickedLabel, se tiene acceso a sus propiedades y mtodos.
Este mtodo comprueba primero si clickedLabel se convirti (mediante conversin de tipos) correctamente de un objeto en un control Label. Si no, tiene un valor Null (C#) o Nothing (Visual Basic), y no se desea ejecutar el resto del cdigo en el mtodo. Luego, el mtodo comprueba el color del texto de la etiqueta en la que se hizo clic mediante la propiedad ForeColor. Si ya es negro, se ha hecho clic en el icono, de modo que el mtodo ha terminado. (Esto es lo que hace la instruccin return: indica al programa que deje de ejecutar el mtodo). Si no se ha hecho clic en el icono, cambia el color del texto a negro. Guarde y ejecute el programa. Debera ver un formulario vaco con un fondo azul. Haga clic en el formulario; uno de los iconos debera volverse visible. Siga haciendo clic en distintos lugares del formulario. A medida que hace clic en los iconos, deberan aparecer. Para ir al siguiente paso del tutorial, vea Paso 5: Agregar referencias a etiquetas. Para volver al paso anterior del tutorial, vea Paso 3: Asignar un icono aleatorio a cada etiqueta.

5.

Para continuar o revisar

Paso 5: Agregar referencias a etiquetas

Visual Studio 2012

El programa necesita realizar un seguimiento de los controles Label en los que el usuario hace clic. Despus de que se haga clic en la primera etiqueta, el programa muestra el correspondiente icono. Despus de que se haga clic en la segunda etiqueta, el programa muestra ambos iconos durante unos instantes y, a continuacin, los vuelve a ocultar. El programa realiza un seguimiento del control Label en el que se hace clic en primer lugar y del control en el que se hace clic en segundo lugar mediante variables de referencia.

Para agregar referencias de etiqueta

1. Para agregar referencias de etiqueta a un formulario, use el siguiente cdigo. public partial class Form1 : Form { // firstClicked apunta al primer control Label que el jugador hace clic, pero ser nula si el jugador no ha hecho clic en un sello Label firstClicked = null; // puntos secondClicked al segundo control Label que el jugador hace clic Label secondClicked = null;

Nota

Las variables de referencia parecen similares a las instrucciones usadas para agregar objetos (por ejemplo, objetos Timer, objetos List y objetos Random) a un formulario. Sin embargo, estas instrucciones no hacen aparecer dos controles Label adicionales en el formulario porque ninguna de las dos instrucciones incluye new. Sin new, no se crea ningn objeto. Por ello, firstClicked y secondClicked se denominan variables de referencia: simplemente realizan un seguimiento o hacen referencia a objetos Label.
Nota

Cuando una variable no realiza el seguimiento de ningn objeto, se establece en un valor especial: null en Visual C# y Nothing en Visual Basic. Por lo tanto, cuando se inicia el programa, el valor de firstClicked y el valor de secondClicked estn establecidos en null o Nothing, lo que significa que las variables no realizan ningn tipo de seguimiento.
2. Modifique el controlador de eventos Click para usar la nueva variable de referencia firstClicked. Quite la ltima instruccin del mtodo de control de eventos label_Click() (clickedLabel.ForeColor = Color.Black; ) y reemplcela por la instruccin if que figura a continuacin. (Asegrese de incluir el comentario, y la instruccin completa de if .) /// <summary> /// Evento Click de cada etiqueta es manejado por este controlador de eventos /// </summary> /// <param name="sender"> La etiqueta que se hizo clic </ param> /// <param name="e"></param> private void label_Click(object sender, EventArgs e) { Label clickedLabel = sender as Label; if (clickedLabel != null) {

// Si hace clic en la etiqueta es de color negro, el jugador hace clic en un icono que ya ha sido revelado - ignore el clic if (clickedLabel.ForeColor == Color.Black) return; // Si firstClicked es nulo, este es el primer icono en la par que el jugador hace clic, por lo establecido firstClicked a la etiqueta que el jugador hace clic, cambie su color a negro, y el retorno if (firstClicked == null) { firstClicked = clickedLabel; firstClicked.ForeColor = Color.Black; return; } } }

3. 4.

Guarde y ejecute el programa. Haga clic en uno de los controles Label y aparecer el correspondiente icono. Haga clic en el siguiente control Label y ver que no sucede nada. El programa ya est realizando un seguimiento de la primera etiqueta en la que se hizo clic, por lo que el valor de firstClicked no es null en Visual C# ni Nothing en Visual Basic. Cuando la instruccin if comprueba firstClicked para determinar si su valor es null o Nothing, concluye que no tiene ese valor y no ejecuta las instrucciones de la instruccin if.Por lo tanto, solo el primer icono en el que se hizo clic se vuelve negro y los dems iconos se vuelven invisibles, tal y como se muestra en la siguiente imagen. Juego de formar parejas con un icono visible

Para continuar o revisar

Para ir al siguiente paso del tutorial, vea Paso 6: Agregar un temporizador. Para volver al paso anterior del tutorial, vea Paso 4: Agregar un controlador de eventos Click a cada etiqueta.

Paso 6: Agregar un temporizador

Visual Studio 2012

A continuacin, agregar un temporizador al juego de formar parejas.

Para agregar un temporizador

1. Vaya al cuadro de herramientas del Diseador de Windows Forms. Haga doble clic en Temporizador (en la categora Componentes) y agregue un temporizador al formulario; su icono aparece en un cuadro deshabilitado bajo el formulario, como se muestra en la siguiente ilustracin. Temporizador

2.

3.

Haga clic en el icono timer1 para seleccionar el temporizador. Establezca la propiedad Interval en 750, pero deje la propiedad Enabled establecida en False. La propiedad Interval indica al temporizador cunto tiempo debe esperar entre los pasos, de modo que aqu se indica al temporizador que espere tres cuartos de segundo (750 milisegundos) antes de desencadenar su primer evento Tick. No desear que el temporizador se inicie cuando se inicie el programa. En su lugar, utilizar el mtodo Start() para iniciar el temporizador cuando el jugador haga clic en la segunda etiqueta. Haga doble clic en el icono del control Timer en el Diseador de Windows Forms para agregar el controlador de eventos Tick, como se muestra en el siguiente cdigo. /// <summary> /// Este temporizador se inicia cuando el jugador hace clic en dos iconos que no coinciden, por lo que cuenta con tres cuartas partes de un segundo y luego se apaga y se esconde dos iconos /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void timer1_Tick(object sender, EventArgs e) { // Detenga el temporizador timer1.Stop(); // Ocultar ambos iconos firstClicked.ForeColor = firstClicked.BackColor; secondClicked.ForeColor = secondClicked.BackColor; // Cambiar firstClicked y secondClicked por lo que la prxima vez que se hace clic en una etiqueta, el programa sabe que es el primer clic firstClicked = null; secondClicked = null; }

El controlador de eventos Tick realiza tres acciones: primero, detiene el temporizador mediante una llamada al mtodo Stop(). A continuacin, usa las dos variables de referencia, firstClicked y secondClicked, para recuperar las dos etiquetas en las que el jugador hizo clic y volver a ocultar sus iconos. Finalmente, restablece las

variables de referencia firstClicked y secondClicked en null en Visual C# y Nothing en Visual Basic.Esto es importante, porque as es como se restablece el propio programa. Ahora no realiza el seguimiento de ningn control Label y vuelve a estar listo para el primer clic del jugador.

Nota

Un objeto Timer tiene un mtodo Start() que inicia el temporizador y un mtodo Stop() que lo detiene. Al establecer la propiedad Enabled del temporizador en True en la ventana Propiedades, inicia los pasos nada ms comenzar el programa. Sin embargo, si se deja establecido en False, no inicia los pasos hasta que se llama a su mtodo Start().
Nota

Normalmente, un temporizador desencadena una y otra vez su evento Tick, utilizando la propiedad Interval para determinar cuntos milisegundos debe esperar entre los pasos. Es posible que haya observado cmo se llama al mtodo Stop() del temporizador dentro del evento Tick. Esto hace que el temporizador entre en modo de un disparo, de tal forma que, cuando se llama al mtodo Start(), espera durante el intervalo correspondiente y desencadena un nico evento Tick.
4. Para ver el nuevo temporizador en accin, vaya al editor de cdigo y agregue el siguiente cdigo al principio y al final del mtodo de control de eventos label_Click(). (Se agrega una instruccin if al principio y tres instrucciones al final; el resto del mtodo no cambia). /// <summary> /// Evento Click de cada etiqueta es manejado por este controlador de eventos /// </summary> /// <param name="sender"> La etiqueta que se hizo clic </ param> /// <param name="e"></param> private void label_Click(object sender, EventArgs e) { // El temporizador slo despus de dos iconos no coincidentes se ha demostrado que el jugador, as que ignora los clics si el temporizador est en marcha if (timer1.Enabled == true) return; Label clickedLabel = sender as Label; if (clickedLabel != null) { // Si hace clic en la etiqueta es de color negro, el jugador hace clic en un icono que ya ha sido revelado - ignore el clic if (clickedLabel.ForeColor == Color.Black) return; // Si firstClicked es nulo, este es el primer icono en la par que el jugador hace clic, por lo establecido firstClicked a la etiqueta que el jugador hace clic, cambie su color a negro, y el retorno if (firstClicked == null) { firstClicked = clickedLabel; firstClicked.ForeColor = Color.Black;

return; } // Si el jugador obtiene este momento, el temporizador no est funcionando y firstClicked no es nulo, por lo que este debe ser el segundo icono el jugador hizo clic en Set su color a negro secondClicked = clickedLabel; secondClicked.ForeColor = Color.Black; // Si el jugador consigue a este punto, el jugador hace clic en dos iconos diferentes, as que empieza el temporizador (que esperar tres cuartos de segundo y, a continuacin, ocultar los iconos) timer1.Start(); } }

5. 6.

El cdigo que se encuentra al principio del mtodo comprueba si el temporizador se inici en la propiedad Enabled. As, si el jugador hace clic en el primer y segundo control Label y se inicia el temporizador, no suceder nada al hacer clic en un tercer control. El cdigo al final del mtodo establece la variable de referencia secondClicked para que realice el seguimiento del segundo control Label en el que hizo clic el jugador, y establece el color del icono de esa etiqueta en negro para que est visible. A continuacin, inicia el temporizador en modo de un disparo de forma que espere durante 750 milisegundos antes de desencadenar el evento Tick. Es entonces cuando el controlador de eventos Tick del temporizador oculta los dos iconos y restablece las variables de referenciafirstClicked y secondClicked de modo que el formulario est listo para que el jugador haga clic en otro icono. Guarde y ejecute el programa. Haga clic en un icono para que se vuelva visible. Haga clic en otro icono. Aparece brevemente y, a continuacin, ambos iconos desaparecen. Repita el proceso varias veces. Ahora, el formulario realiza el seguimiento del primer y segundo icono en los que hizo clic, y usa el temporizador para realizar una pausa antes de hacer que los iconos desaparezcan. Para ir al siguiente paso del tutorial, vea Paso 7: Mantener visibles los pares. Para volver al paso anterior del tutorial, vea Paso 5: Agregar referencias a etiquetas.

Para continuar o revisar

Paso 7: Mantener visibles los pares

Visual Studio 2012 El juego funciona bien siempre y cuando el jugador haga clic solo en los pares de iconos que no coinciden. Sin embargo, piense qu sucedera si el jugador hace clic en una pareja coincidente. En lugar de hacer que los iconos desaparezcan activando el temporizador (con el mtodo Start()), el juego se debera restablecer automticamente para dejar de realizar el seguimiento de cualquier etiqueta mediante las variables de referencia firstClicked ysecondClicked, sin restablecer los colores de las dos etiquetas en las que se hizo clic.

Para mantener las parejas visibles

1. Agregue la siguiente instruccin if al mtodo de control de eventos label_Click(), casi al final, justo encima de la instruccin donde se inicia el temporizador. Observe el cdigo minuciosamente mientras lo agrega al programa. Observe cmo funciona. // Si el jugador obtiene este momento, el temporizador no est funcionando y firstClicked no es nulo, por lo que este debe ser el segundo icono el jugador hizo clic en Set su color a negro secondClicked = clickedLabel;

secondClicked.ForeColor = Color.Black; // Si el jugador hace clic en dos iconos iguales, mantenerlos negro y restablecer firstClicked y secondClicked por lo que el jugador puede hacer clic en otro icono if (firstClicked.Text == secondClicked.Text) { firstClicked = null; secondClicked = null; return; } // Si el jugador consigue a este punto, el jugador hace clic en dos iconos diferentes, as que empieza el temporizador (que esperar tres cuartos de segundo y, a continuacin, ocultar los iconos) timer1.Start(); } }

La primera lnea de la instruccin if que acaba de agregar comprueba si el icono de la primera etiqueta en la que el jugador hizo clic es igual que el icono de la segunda etiqueta. Si los iconos son iguales, el programa ejecuta las tres instrucciones entre llaves en C# o las tres instrucciones incluidas en la instruccin if en Visual Basic. Las dos primeras instrucciones restablecen las variables de referencia firstClicked y secondClicked para que no realicen el seguimiento de ninguna de las etiquetas. (Quizs reconozca esas dos instrucciones por el controlador de eventos Tick del temporizador). La tercera es una instruccin return, que indica al programa que omita el resto de las instrucciones del mtodo sin ejecutarlas. Si programa en Visual C#, quizs haya observado que en una parte del cdigo se usa un solo signo de igualdad (=), mientras que otras instrucciones usan dos (==). Piense por qu se usa = en algunos lugares y== en otros. Aqu tiene un buen ejemplo donde se ve la diferencia. Observe minuciosamente el cdigo que se encuentra entre parntesis en la instruccin if. VB firstClicked.Text = secondClicked.Text C# firstClicked.Text == secondClicked.Text A continuacin, examine con detalle la primera instruccin del bloque de cdigo situado despus de la instruccin if. VB firstClicked = Nothing C# firstClicked = null; La primera de esas dos instrucciones comprueba si dos iconos son iguales. Dado que se comparan dos valores, el programa de Visual C# usa el operador de igualdad ==. La segunda instruccin en realidad cambia el valor (lo que se conoce como asignacin), estableciendo la variable de referencia firstClicked en null para

2.

restablecerlo. Por eso se usa en este caso el operador de asignacin =. Visual C# usa = para establecer los valores y == para compararlos. En Visual Basic se usa = tanto para la asignacin como para la comparacin. Guarde y ejecute el programa, y empiece a hacer clic en el formulario. Si hace clic en una pareja que no coincide, se desencadena el evento Tick del temporizador, y ambos iconos desaparecen. Si hace clic en una pareja coincidente, se ejecuta la nueva instruccin if y la instruccin return hace que el mtodo omita el cdigo que inicia el temporizador, de modo que los iconos se mantengan visibles, como se muestra en la siguiente ilustracin. Juego de formar parejas con pares de iconos visibles

Para continuar o revisar

Para ir al siguiente paso del tutorial, vea Paso 8: Agregar un mtodo para comprobar si el jugador gan. Para volver al paso anterior del tutorial, vea Paso 6: Agregar un temporizador.

Paso 8: Agregar un mtodo para comprobar si el jugador gan

Visual Studio 2012 Ha creado un juego divertido, pero necesita un elemento adicional. El juego debe finalizar cuando el jugador gana, de modo que necesita agregar un mtodo CheckForWinner() para comprobar si el jugador ha ganado.

Para agregar un mtodo que compruebe si el jugador gan

1. Agregue un mtodo CheckForWinner() al formulario, tal como se muestra en el siguiente cdigo. /// <summary> /// Compruebe cada icono para ver si coincide, comparando su color de primer plano a su color de fondo. /// Si todos los iconos se emparejan, el jugador gana /// </summary> private void CheckForWinner() { // Ir a travs de todas las etiquetas de TableLayoutPanel, la comprobacin de cada uno para ver si su icono se corresponde foreach (Control control in tableLayoutPanel1.Controls) { Label iconLabel = control as Label; if (iconLabel != null)

{ if (iconLabel.ForeColor == iconLabel.BackColor) return; } } // Si el bucle no volvi, no se encontr ningn icono sin igual // Eso significa que el usuario gan. Mostrar un mensaje y cerrar el formulario MessageBox.Show("You matched all the icons!", "Congratulations"); Close(); }

2.

El mtodo utiliza otro bucle foreach en Visual C# o For Each en Visual Basic para recorrer cada etiqueta de TableLayoutPanel. Usa el operador de igualdad (== en Visual C# y = en Visual Basic) para comprobar el color del icono de cada etiqueta y si coincide con el fondo. Si los colores coinciden, el icono sigue siendo invisible y el jugador no ha hallado las parejas de los iconos restantes. En ese caso, el programa utiliza una instruccin return para omitir el resto del mtodo. Si el bucle pasa por todas las etiquetas sin ejecutar la instruccin return, indica que se han logrado hallar todas las parejas de iconos. El programa muestra un elemento MessageBox y, a continuacin, llama al mtodo Close() del formulario para finalizar el juego. A continuacin, haga que el controlador del evento Click de la etiqueta llame al nuevo mtodo CheckForWinner(). Asegrese de que el programa comprueba si existe un ganador despus de mostrar el segundo icono en el que el jugador hace clic. Busque la lnea donde estableci el color del segundo icono en el que se ha hecho clic y llame al mtodo CheckForWinner() inmediatamente despus, tal como se muestra en el siguiente cdigo. // Si el jugador obtiene este momento, el temporizador no est funcionando y firstClicked no es nulo, por lo que este debe ser el segundo icono el jugador hizo clic en Set su color a negro secondClicked = clickedLabel; secondClicked.ForeColor = Color.Black; // Revise para ver si el jugador gan CheckForWinner(); // Si el jugador hace clic en dos iconos iguales, mantenerlos negro y restablecer firstClicked y secondClicked por lo que el jugador puede hacer clic en otro icono if (firstClicked.Text == secondClicked.Text) { firstClicked = null; secondClicked = null; return; }

3.

Guarde y ejecute el programa. Reproduzca el juego y halle las coincidencias de todos los iconos. Al ganar, el programa muestra un elemento MessageBox (tal como se muestra en la siguiente imagen) y, a continuacin, cierra el cuadro. Juego de formar parejas con MessageBox

Para continuar o revisar

Para ir al siguiente paso del tutorial, vea Paso 9: Probar otras caractersticas. Para volver al paso anterior del tutorial, vea Paso 7: Mantener visibles los pares.

Paso 9: Probar otras caractersticas

Visual Studio 2012 Para aprender ms, pruebe a cambiar los iconos y colores, y agregue una cuadrcula y sonidos. Para que el juego sea ms desafiante, pruebe a aumentar el tamao del tablero y a ajustar el temporizador.

Para probar otras caractersticas

Reemplace los iconos y colores con los que prefiera. Agregue una cuadrcula para que aparezca alrededor de los iconos. Agregue un sonido para cuando el jugador encuentre una coincidencia, otro sonido para cuando destape dos iconos que no coincidan y un tercer sonido para cuando el programa vuelva a ocultar los iconos. Aumente el tamao del tablero para complicar ms el juego. (Sugerencia: no basta con solo agregar filas y columnas a TableLayoutPanel). Para que el juego sea ms desafiante, oculte el primer icono si el jugador es demasiado lento y no hace clic en el segundo icono a tiempo. Para ir al tutorial siguiente, vea (pendiente de agregar el vnculo). Para volver al paso anterior del tutorial, vea Paso 8: Agregar un mtodo para comprobar si el jugador gan.

Para continuar o revisar

http://msdn.microsoft.com/es-es/library/dd553235(v=vs.110).aspx