Juego de Damas

En esta ocasión haremos una app que consiste en un juego de Damas.

Lo primero que debemos hacer es crear con paint un tablero de Damas, nos vamos a las propiedades de paint y dejamos el alto y el ancho en 320 pixeles. Dibujaremos los cuadros de 40x40 pixeles de la siguiente manera.

Usando la herramienta Circulo de paint crearemos una imagen para las fichas rojas y otra para las azules. Estas deben ser de 40x40 pixeles. Ejemplo de Ficha Roja

Ejemplo de Ficha Azul

Ahora nos vamos al App Inventor y agregamos un Lienzo de 320x320 pixeles, esto lo debemos hacer basandonos en las aplicaciones que hicimos anteriormente.
Además del Lienzo debemos agregar un SpriteImage para cada ficha y debemos nombrarlos según el color de la ficha.

Ahora debemos subir la imagen que creamos del tablero al Lienzo.
Ajustar el tamaño de la imagen a la del lienzo.
Lo mismo haremos con las fichas, para cada fichaRoja subimos la imagen que creamos de la ficha roja y la ajustamos al tamaño de 40x40. Se repite el proceso con las fichas azules.
Luego de haber asignado cada imagen a su lugar correspondiente, alinearemos las fichas modificando sus coordenadas en Propiedades de forma que encajen en los espacios blancos de la siguiente manera.(En esta aplicacion dejaremos las fichas en los espacios blancos para que sea mas práctico, contrario a la version fisica del juego donde las fichas van en los espacios negros)

Una vez tenemos alineadas las fichas en el tablero nos vamos a la seccion de bloques.
Almacenaremos los elementos del juego en dos fichas vacias, una para cada color de ficha como se muestra en la imagen.

Al iniciar el juego deberia crearse una lista con los elementos, para hacer esto organizamos los siguientes bloques de la manera que se muestra a continuacion:

Para que el juego cumpla sus mecanicas originales las fichas solo deben ser capaces de moverse en forma diagonal, ademas al presionar una ficha todas las demas deben permanecer deshabilitadas. Comenzaremos con el bloque que le indica a la ficha que hacer al momento de tocarla.

En la siguiente imagen se muestra el proceso para mover las fichas rojas.

Por ultimo agregamos los bloques que corresponden a la accion de mover la ficha.

Para programar las otras fichas lo unico que debemos hacer es copiar/pegar los siguientes grupos de bloques.

Y cambiar los elementos donde dice fichaRoja1 por la que le sigue de forma consecutiva ej. fichaRoja2, fichaRoja 3 y asi hasta la 8 como se muestra en la siguente imagen.

Para programar el movimiento de las fichas azules el procedimiento es casi el mismo que con las fichas rojas, a ecepcion que ahora el bloque de SpriteImage Y cambia de ser +40 a -40 como indica la imagen. (no olvidar que ahora los bloques son en torno a fichaAzul).

Y para programar las acciones de tocar y mover las fichas azules hacemos lo mismo que anteriormente con las fichas rojas, con la unica diferencia que ahora los bloques son en torno a las fichas azules.

Y listo ya esta completado nuestro juego de Damas.