[Colortest — Pt3] Programando… sobre el papel.

** Este post forma parte de una serie de artículos que muestran el proceso que he seguido para crear el juego Android Colortest. Puedes leer los artículos anteriores aquí: parte 1 y parte 2 **

Bienvenidos a la 3 entrega del juego colortest. En este artículo nos meteremos de lleno en la lógica más compleja del juego.

Como vimos en el post anterior planteamos el diseño. Hoy nos toca dibujar el pseudocódigo del juego. Pero antes vamos a recordar los requisitos:

Cuadrícula.
El juego comenzará con una cuadrícula de 3x3. Cada vez que el usuario acierte el juego irá incrementando el tamaño de la cuadrícula, hasta alcanzar 10x10.

Color.
Siempre habrá un cuadrado distinto al resto. El mismo color, pero distinta tonalidad. Cada vez que el usuario avance (desde la cuadrícula 3x3), el juego hará que el color se parezca más al resto. El color del cuadrado irá cambiando hasta conseguir casi 100% de la tonalidad del resto. En este punto, el usuario habrá ganado.

Puntos.
El usuario irá acumulando puntos cada vez que acierte con el cuadrado que tenga el color distinto al resto. La cantidad de puntos que sumará, será igual al número de cuadrados que tenga un lado de la cuadrícula. Bla bla bla. En definitiva: 3puntos = 3x3, 4puntos = 4x4,.. hasta 10puntos = 10x10. De manera que cuando el usuario esté en la cuadrícula de 4x4 tendrá un total de 7 puntos.

Vidas.
El número de vidas se sumará de igual manera que los puntos. Y restará cada vez que el usuario falle. Si el usuario llega a 0 vidas, el juego habrá terminado y tu puntuación será los puntos que hayas conseguido.

Siguiendo estos requisitos, nos quedaría un pseudocódigo parecido a este:

Como se puede observar en el pseudocódigo superior, falta definir cuando cambia el color. Esta tarea pertenece al procedimiento “dibujar grid”. Ya que en cada plataforma se haría de forma distinta, lo he englobado en esta tarea. Pero como estos artículos están relacionados con el desarrollo de Android, vamos a ver a continuación los pasos del procedimiento “dibujar grid”:

  1. Primero debemos calcular el número total de cuadrados que tendrá el GridView. Para esto bastará multiplicar NxN. Ejemplo: 4x4 = 16. En este ejemplo, crearemos un array con 16 posiciones, donde irán almacenados los colores en formato hexadecimal.
  2. Después obtendremos un color aleatorio de una lista de colores cargados con anterioridad. Para que sean colores fuertes y no suaves, utilizaré los siguientes colores: Cyan, Fuscia, Rojo, Verde, Azul.
  3. Ahora toca restar transparencia a ese color hasta que se parezca al color principal generado en el paso numero dos. Para ello, partiremos desde una transparencia del 50% hasta alcanzar una transparencia mínima. Eso se traduce en lo siguiente. 50% de transparencia entre el numero de niveles (más 1) que nuestro juego tendrá. Debe ser el numero de niveles más uno, para evitar que en el último nivel, obtenga un 0% de transparencia, lo que sería inapreciable por el ojo humano. Por ejemplo, 50/19 = 2,77. Esto quiere decir, que cada vez que el usuario pase un nivel, se restará 2,77% de transparencia, a la transparencia aplicada anteriormente. Podemos calcular la disminución de la transparencia y almacenarla en una constante para evitar repetir la misma operación con el mismo resultado.
  4. Una vez hecho esto, aplicaremos la transparencia resultante a una posición de las que calculamos en el paso 1.
  5. Creamos e inicializamos el adaptador para el GridView solo la primera vez. El resto de veces, lo vaciaremos con el método clear() y lo volveremos a rellenar con el método addAll().
  6. Por ultimo, notificaremos al adaptador que tiene cambios nuevos que dibujar, y Android hará el resto.

Siguiendo los pasos anteriores conseguiremos dibujar el GridView con los colores. Y con el pseudocódigo de arriba, conseguiremos darle la lógica al juego. Nos faltaría suscribir un listener al GridView que reciba los eventos para cuando pulse el usuario sobre una cuadrado, saber cual ha sido y si es correcto o incorrecto. Con esto, tendremos el juego funcional, a falta de algunos efectos visuales y algunas animaciones.

Hasta aquí este artículo, ahora toca picar el código y probar si funciona. En el siguiente post, veremos si todo ha funcionado como se esperaba, en que me he equivocado y como lo he solucionado. También algo de código y las librerías que he utilizado.