Taller 4: Juego de Damas

 ¡Hola! Bienvenido al cuarto y último taller. El día de hoy como pueden ver en el título vamos a programar una aplicación móvil que permita jugar a las damas.

La principal herramienta que ocuparemos serán SpriteImagen.

Para empezar con el taller es necesario que tengas una imagen de un tablero de 8x8 celdas, junto a 8 fichas rojas y 8 fichas azules. Las puedes descargar de aquí mismo, de internet o hacerlas tú en Paint. Como tú elija, aunque procura que las fichas sean imágenes con fondo transparente para que se vea mejor estéticamente.





Procura que el tablero sea de 320x320 píxeles, esto puedes cambiarlo en la imagen original o bien ya dentro de app inventor, al igual que las fichas rojas y azules, las cuales deben ser de 40x40 píxeles.

Para facilitar la programación más adelante cambia el nombre de cada SpriteImagen por fichaRoja o fichaAzul según corresponda.

Luego de ello, con un lienzo en Screen1 y Spriteimagen disponelas de la siguiente manera:



Ya ordenadas la fichas en su lugar es momento de programar el movimiento. Para ello primero es necesario crear dos listas que contengan a cada color de ficha.


Luego de esto, el movimiento de las fichas debe ejecutarse cuando se presione la ficha y se arrastre en diagonal, para ello, las demás fichas deben deshabilitarse.

El algoritmo es el siguiente:

  • Cuando fichaRojaN es presionada
  • Para cada elemento de la lista de fichas rojas  HACER
  • Poner cualquierSpriteImagen del elemento de la lista la habilitación como falso
  • Fin Para
  • Poner la fichaRojaN su habilitación como cierta. 


Para las fichas restantes rojas y azules es el mismo algoritmo, por lo que tú lo tendrás que realizar.

Luego de ello, debemos realizar un procedimiento que dependiendo hacia donde arrastremos el dedo la ficha avance diagonalmente hacia izquierda o derecha.

El algoritmo es el siguiente:


En este caso el que se realizó fue el procedimiento para mover las fichas azules, el procedimiento para las fichas rojas no es igual, pero es muy similar, por lo que lo debes realizar tú.

Ya realizado ambos procedimientos hay que presentar un algoritmo que lo utilizé:


Al igual que antes, debes replicar este algoritmo a las demás fichas.

Ya programado el moviemiento de las fichas, vamos a realizar un contador, en el que se le de un punto a cada equipo cada vez que una ficha toqué a una contraria.

Para ello cuando la screen 1 se inicie debes poner dos campos de texto en valor 0.

Y luego cada vez que se toquen fichas contrarias irá aumentando el contador correspondiente.

Nótese que el algoritmo para las demás fichas es el mismo.
Además la idea es que cuando una ficha "se coma" a otra, esta quede deshabilitada y desaparezca, entonces agregaremos los siguientes bloques a los presentados anteriormente.


Para terminar, agregaremos un notificador al lienzo, y si la ficha con la que colisiona nuestra ficha es del mismo color, está no debe desaparecer pues no te la podrías "comer", entonces mandaremos un mensaje que diga que aquel espacio ya está ocupado.

Lo cual quedaría de la siguiente manera:




 





Comentarios

Entradas populares de este blog

MIT App Inventor