Juego del gato

    Bienvenid@ lector/a, en esta nueva entrada mostrare como crear el juego del gato o tres en línea, es un juego de lápiz y papel bastante sencillo jugado entre 2 jugadores y estos son representados por X o O, los cuales van dejando su marca por los espacios vacios de un tablero de 3x3.

    Para mas información al respecto http://es.wikipedia.org/wiki/Tres_en_l%C3%ADnea

    A continuación se verá el paso a paso para crear el mini-juego con VisualC# en la plataforma Visual Studio 2013 con la tecnología WPF.

    Primero que todo debes de crear una nueva solución, en el siguiente link encontraras el paso a paso de cómo crear una nueva aplicación o solución wpf con VisualC# Primera aplicacion WPF.

    A continuación en nuestro escritorio de desarrollo debemos de dar la resolución mínima y máxima de la ventana, para este prototipo será de 330 x 350, esto es para que la grilla pueda dividirse en regiones iguales.

Imagen 1

    Una vez hecho lo anterior, procederemos a dividir la grilla que viene por defecto en 9 regiones iguales, si dejaste del tamaño indicado anteriormente, la división será de 100 x 100 cada cuadrado o región.

    Agregar la carpeta de recursos donde se almacenaran las imágenes de X y O es opcional integrarla en este paso.

Imagen 2

    Una vez que se dividió la grilla en regiones igual se procede a Agregar un UIelement Image, el cual mostrara los recursos antes precarga dos en la aplicación (imágenes de equis y circulo), cabe destacar que se debe de agregar un elemento Image en cada región de la grilla con las propiedades que se remarcan en la imagen 3, debes de agregar un nombre que identifique  a cada elemento Image.

Imagen 3

    Luego de agregar el elemento Image a cada región de la grilla, se procede a agregar un botón a cada una de estas regiones para que se pueda pulsar.

Imagen 4

    Cada vez que agregues un botón dale de inmediato el evento click como se muestra en la imagen 5

Imagen 5

    Una vez completadas con todos los pasos anteriores debería  la interfaz grafica debe de quedar como en la imagen 6, bastante sencilla pero esa es la idea el juego del gato o tres en linea.

Imagen 6

    A continuación se procede a implementar la lógica de juego. El primer paso es implementar el mapa del juego, en este caso todas las celdas o regiones estarán representados por un array bidireccional, con números diferentes y un contador que servirá para determinar que usuario está haciendo clic en el instante que se pulsa cualquier botón.

Imagen 7

    Como cuando estabas agregando los botones le asignaste un evento a cada botón, es hora de agregar a cada evento una llamada a unos métodos que posteriormente serán implementados, no debes de asustarte si te da error, es porque los métodos que se implementan aun no han sido creados.

Imagen 8

    A continuación se crea el primer método que se implementa en cada evento de un botón, el procedimiento evento  recibe como parámetro dos variables, el numero de fila y el numero de columna los cuales servirán para determinar donde se saeteara la imagen de X o  O correspondientes.  Los parámetros que recibe también sirven para modificar el mapa del juego asignado el numero de jugador que pulsa sobre el botón.

    El método seteoImagen() que aun no se implementa, como lo dice su definición setea la imagen correspondiente ya sea X o O cuando corresponda, además de devolver el nombre (id) del jugador que pulso sobre el botón..

 Imagen 9

    El método seteoImagen recibe por parámetro un elemento Image al cual se le cambiara el recurso de imagen a mostrar, y el botón que se presiono con el objetivo de ocultar dicho botón evitando que se vuelva a pulsar y para hacer visible el elemento Image el cual contendrá el nuevo recursos de imagen seteado (X o O ).

 

Imagen 10

    Metodo comprobar, verifica si se cumplió con la meta del juego, el cual es tener 3 elementos alineados ya sea de forma vertical, horizontal o diagonal, si alguna de esta condición se cumple muestra un mensaje haciendo visible el nombre (id) del jugador ganador y resetea el juego para empezar nuevamente. Si por alguna casualidad ninguno jugador cumplió con la meta de alinear sus tres elementos se considera un empate y se reseta el juego.

Imagen 11

    Método reset, como dice su nombre resetea el juego volviendo a cero todos los elementos y levantando nuevamente un juego nuevo.

 

Imagen 12

NOTA: Si quieres compartir esta aplicación con algún amigo puedes crear un instalador del juego.

LINK DE INTERES:

 

Integrar installShield Limited Edition For Visual Studio (Crear Setup) 

Crear instaldor para un proyecto WPF VisualC#

LINK DE DESCARGA desde GIT

APLICACION DESARROLLADA CON VISUAL STUDIO 2013

    Si tienes alguna duda, sugerencia o simplemente deseas dejar tu apoyo escríbelo en la caja de comentario  y responderé a la brevedad.