miércoles, 24 de febrero de 2016

Trivial con App Inventor - Trivial completo (un jugador)

El juego consiste en lo siguiente:

Una ficha se va moviendo por el tablero. Cada vez que cae en una casilla, se hace una pregunta del color correspondiente. Cada pregunta acertada suma 150 puntos, y cada fallo resta 75. Si la ficha está en una casilla de "quesito", se consigue uno de ese color. Cuando se tienen los cuatro "quesitos", el juego finaliza.

1. Componentes:

  • Un lienzo con el tablero y una imagen sprite, en la que se pondrá por defecto la imagen 0.png (todas las imágenes de la ficha con quesitos pueden descargarse aquí. Una plantilla para hacer un tablero de 24 casillas puede descargarse aquí).

  • Un botón para el dado (dadoBoton), y una etiqueta que muestre lo que ha salido en la tirada (dadoEtiqueta)

  • Una etiqueta que diga Puntos: y otra etiqueta para almacenar los puntos conseguidos (puntosEtiqueta)

  • Una etiqueta que diga Pregunta: y otra etiqueta para mostrar la pregunta correspondiente (preguntaEtiqueta)

  • Un selector de lista para elegir la respuesta

  • Un botón para reiniciar



Visión general de la aplicación:



2. Variables:


  • Variable dado, que se inicia a 0

  • Variables de la ficha: variable casilla, que se inicia a 1. Variables de posición X y posición Y, que son listas y que pueden traerse de una de las aplicaciones anteriores. Variables para comprobar si tiene o no un quesito de un determinado color (amarillo, rojo, verde, azul), que son booleanas y que se inician todas a falso.

  • Variables de preguntas y respuestas. Se harán tres listas por cada color: una para las preguntas, otra para las respuestas, y otra para las respuestas correctas. También se iniciarán cuatro contadores (uno para cada color), todos a 1. Además, se iniciará una variable llamada respuestaCorrecta, que almacenará la respuesta correcta correspondiente a la pregunta que se hace en ese momento, y que se iniciará a 0.

  • Para los puntos no se hará una variable, pues se almacenarán directamente en la etiqueta.

3. Botón dado:

Se programa igual que en los ejercicios anteriores:

 4. Procedimiento preguntar:

Este procedimiento comprobará el color de la casilla en la que está la ficha. En función del color, cargará en la etiqueta de preguntas (preguntaEtiqueta) la pregunta correspondiente, en el selector de lista las respuestas correspondientes, y en la variable respuestaCorrecta, la respuesta correcta a esa pregunta. Además, aumentará en 1 el contador del color correspondiente:


5. Selector de lista:

En el selector de lista:

  • Se comprueba si la respuesta es correcta. Si es así, se aumentan los puntos en 150 y se llama al procedimiento quesito (para comprobar si hay que añadir un "quesito", y, en su caso, hacerlo). Si la respuesta no es correcta, disminuye los puntos en 75.

  • Se comprueba si se han conseguido todos los quesitos. Si es así, el juego finaliza. Si no, se habilita el dado para poder seguir jugando.

6. Procedimiento quesito

En este procedimiento se comprueba si se está en una casilla de "quesito" de algún color, así como si la ficha aún no tiene el "quesito" de ese color, para, en su caso, añadirlo.


7. Botón reiniciar

Debe poner todas las variables a sus valores iniciales:

8. Modificaciones

8.1. Distintas ventanas para preguntas y tablero

Si las preguntas que vamos a realizar son muy largas pueden no caber en la pantalla del móvil al tiempo que el tablero. Para evitar ésto haremos dos ventanas. En una de ellas aparecerán el tablero, el dado, los puntos, y el botón reiniciar. En la otra la etiqueta de pregunta y el selector de lista.

Las ventanas pueden hacerse con dos disposiciones verticales. En una, a la que podemos llamar juego,  situaremos el tablero y los botones y etiquetas que lo acompañan. En la otra, a la que podemos llamar preguntas, pondremos la etiqueta de preguntas y el selector de lista. Al iniciar la aplicación haremos visible la ventana juego e invisible la de preguntas:

Cuando vayamos a hacer una pregunta cambiarán las tornas, y habrá que hacer invisible la ventana juego y visible la de preguntas. Ésto se hace al principio del procedimiento preguntar:


Asimismo, tras elegir una respuesta, debe hacerse de nuevo visible la ventana juego, e invisible la de preguntas. Estos bloques se añadirán al principio del de selector de lista:



El problema al hacer ésto es que, inmediatamente después de apretar el botón dado, cambiamos de ventana. No da tiempo ni siquiera a ver en qué casilla hemos caído. Para retardar un poco el cambio de una ventana a otra habrá que añadir un componente reloj, que se programará así:

  • La propiedad time enabled se deshabilitará de inicio, y time interval se pondrá a los milisegundos que deseemos que tarde en cambiar de pantalla (en este caso 1500, o sea, segundo y medio):




  •  Al final del bloque del botón dado se quitará la llamada al procedimiento preguntar, y se sustituirá por un bloque que habilitará el temporizador (pondrá time enabled a verdadero).


  • Por último, llamaremos al procedimiento preguntar cuando lo indique el temporizador, al mismo tiempo que lo deshabilitaremos de nuevo:

Asimismo, del botón reiniciar sobran los siguientes bloques (ya no son necesarios porque cambiamos de ventana):



8.2. Clic involuntario en el botón reiniciar

 Puede ocurrir que, involuntariamente, se apriete el botón reiniciar, por lo que convendría pedir una confirmación de que realmente se desea hacer ésto. Para ello primeramente colocaremos todo lo que hay dentro del botón reiniciar en un procedimiento del mismo nombre:

El botón reiniciar se programará de manera que nos muestre un aviso preguntando si realmente se desea reiniciar el juego:

Finalmente, después de elegir, si se ha elegido SÍ, se llamará al procedimiento reiniciar. En caso contrario continuará el juego:

8.3. Puntuación negativa en color rojo

Añade los bloques necesarios para que los puntos aparezcan en color rojo en caso de ser negativos, y de color negro si son positivos.



Puedes descargarte la aplicación en este enlace.

lunes, 8 de febrero de 2016

Trivial con App Inventor 6 - Trivial: tablero y ficha con "quesitos"

En esta aplicación vamos a:
  1. Subir un tablero para el juego de trivial. Se incluirá en un lienzo como una imagen sprite. Puedes descargarte éste:


  2. Subir una ficha, a la que podrán ir añadiéndose los "quesitos" de distintos colores. Se pondrá en el lienzo como una imagen sprite.

  3. Poner un botón para ir añadiendo los "quesitos" a la ficha. Este botón servirá únicamente para comprobar el funcionamiento, y se eliminará al completar la aplicación.


1. Realización de la ficha

A la ficha podrán añadirse un "quesito" rojo, uno verde, uno azul y uno amarillo. Tendremos en total 16 posibles combinaciones (incluyendo la de que la ficha no tenga ningún "quesito"), y habrá que realizar una ficha para cada una de ellas.

Para poder programar la ficha, daremos a cada color un valor numérico, a cada uno el doble que el anterior: Rojo = 1, Verde = 2, Azul = 4, Amarillo = 8. De esta manera podremos almacenar los "quesitos" en una variable numérica. Por ejemplo, si hemos ganado el verde y el azul, ésta variable valdrá 2 + 4 = 6. No hay ninguna otra combinación de colores que de un valor de 6.

Diseñaremos la ficha con El Gimp:






Jugando con la visibilidad de las capas, iremos guardando cada una de las combinaciones, cada una de ellas numeradas como aparece en la siguiente imagen:


Pondremos como imagen predeterminada de la ficha 0.png. Puedes descargar las imágenes aquí.

2. Programación del botón para cambiar la imagen de la ficha

Almacenaremos el número de quesitos en una variable llamada quesitos, que iniciamos con el valor 0.

Al apretar el botón, hacemos que la variable quesitos aumente en 1, y asimismo hacemos que la imagen de la ficha corresponda con el valor de la variable quesitos seguida del texto ".png":



Por último, añade los bloques necesarios para que si la variable quesitos vale más de 15 vuelva a valer 0, y aparezca de nuevo la ficha sin "quesitos".

3. Programación del botón dado

Tráete de otro proyecto las variables de posiciones X e Y para cada una de las casillas, añade un botón para el dado y prográmalo igual que hemos hecho en ejercicios anteriores. Para ello deberás añadir previamente una variable para la casilla, que se inicia a 1, y una variable para el dado, que se inicia a 0.

4. Procedimiento para añadir "quesitos"



Cuando tiremos el dado y la ficha caiga en una casilla de "quesito", habrá que añadir el del color correspondiente (en este caso todavía no vamos a hacer preguntas). El procedimiento quesito debe comprobar:

  • Si la ficha está en una casilla de "quesito" de algún color

  • Si es así, comprobar si la ficha tiene ya el "quesito" de ese color o no

  • y si no lo tiene, añadir el "quesito".


Las casillas de "quesito" del tablero son la 3 y la 15 para el azul, la 5 y la 13 para el rojo, la 8 y la 20 para el amarillo, y la 10 y la 18 para el verde. El procedimiento debe seguir este esquema:

SI (casilla = 3 Ó casilla = 15) Y no tiene "quesito" azul, ENTONCES añade "quesito" azul:

Es fácil comprobar si está en la casilla 3 ó 15, gracias a la variable casilla. Pero, ¿cómo podemos comprobar si la ficha ya tiene el "quesito" azul? Habrá que crear una nueva variable:

En este caso será una variable booleana (que sólo puede tomar dos valores, verdadero o falso). Así pues nuestro procedimiento SI ENTONCES quedaría así:


Así comprobamos si está en una casilla de "quesito" azul y además en la ficha no hay un "quesito" de este color. En caso de que se cumpla esta condición habrá que:

  • Añadir el "quesito" azul, lo que equivale a aumentar en 4 el valor de la variable quesitos (recuerda que dimos un valor 1 al rojo, 2 al verde, 4 al azul y 8 al amarillo)

  • Poner la variable azul a verdadero (la ficha ya tiene el "quesito" azul)

Hay que completar el procedimiento para añadir "quesitos" rojos, verdes y amarillos (para lo que habrá que crear previamente las correspondientes variables booleanas para comprobar si la ficha tiene ya un "quesito" de ese color).

Por último, si se ha añadido algún "quesito", habrá que cambiar la imagen de la ficha.


Además, cuando la ficha tenga todos los "quesitos" deberá acabarse el juego. Para ello deberemos deshabilitar el dado cuando la variable quesitos valga 15. Al final del procedimiento habrá que añadir los bloques correspondientes para hacerlo.


5. Llamar al procedimiento

Retoca la programación del botón dado para que después de apretarlo se llame al procedimiento quesitos


6. Botón de reinicio

Por último, añade un botón para reiniciar la aplicación (poner variables a sus valores iniciales, la ficha, sin "quesitos", en la casilla 1, y habilitar el botón dado).

Trivial con App Inventor 5 - Tablero con dos fichas

En este ejercicio vamos a hacer un tablero con dos fichas (para dos jugadores), de manera que, cuando un jugador tira, se le hace una pregunta. Si la acierta, vuelve a tirar. Si no, pasa el turno al otro jugador.

1- Componentes:

  • Un tablero en su correspondiente lienzo, y dos pelotas para las fichas, una de cada color (en este caso negra y roja). Las posiciones iniciales de las fichas serán x=2 e y=2 para la negra, y x=5 e y=5 para la roja, de manera que la que está encima no cubra por completo a la otra.

  • Un botón para el dado

  • Etiquetas para el dado: Una que ponga "dado" y otra que diga lo que ha salido en la tirada del dado.

  • Etiquetas para casilla: Una que diga "casilla: ", otra que indique el número de casilla en la que está la ficha negra, y otra que indique la casilla en la que está la ficha roja.

  • Etiquetas para aciertos: Una que diga "aciertos: ", otra que indique el número de aciertos del jugador de la ficha negra, y otra que diga los aciertos del jugador de la ficha roja.

  • Una lista de selección para las respuestas, que de inicio estará deshabilitado.

  • Un botón reiniciar.


2- Variables

  • Una variable para el dado, que iniciamos a 0

  • Las variables para las posiciones x e y de las distintas casillas

  • Variables para las preguntas: el contador, que se inicia a 1, la lista de preguntas, la lista de respuestas, y la lista de respuestas correctas, igual que en el ejercicio anterior.

  • Variables de casilla: una (casillaNegra) para guardar el valor de la casilla de la ficha negra y otra (casillaRoja) para el de la casilla de la ficha roja.

  • Los números de aciertos los guardaremos directamente en las correspondientes etiquetas, sin hacer una variable específica para ellos. 

  • También hace falta una variable para saber qué ficha está jugando, la negra o la roja. Debe saberlo tanto el usuario como la aplicación. Una forma de hacer ambas cosas a la vez es guardar esta variable en el color de fondo del botón dado, que será negro si está jugando la ficha negra, y rojo si lo hace la roja. Pondremos de inicio el color de fondo del botón dado en negro.
3- Procedimientos

  • Procedimiento preguntar, igual que en las aplicaciones anteriores.


  • Harán falta, además, otros dos procedimientos: uno para mover la ficha negra, y otro para mover la ficha roja (moverNegra y moverRoja):


4- Programación del botón dado

El botón dado se programa igual que en las aplicaciones anteriores, pero en este caso hay que tener en cuenta cuál de las dos fichas se está moviendo, para llamar al procedimiento correspondiente. Recuerda que es el color de fondo del propio botón el que nos indica qué ficha se mueve:


5- Programación de la lista de selección

En la lista de selección haremos lo siguiente:
  1. Comprobamos qué ficha está jugando (según el color de fondo del botón dado).

  2. Comprobamos si la respuesta es correcta, y si lo es, aumentamos los aciertos de ese color. Si no lo es, cambiamos el color de fondo del botón dado para que juegue la otra ficha.

  3. Aumentamos el contador, y en caso de que el valor del contador sea mayor que el número de preguntas, lo ponemos a 1.

  4. Deshabilitamos la lista de selección y habilitamos el dado.

6- Programación del botón de reiniciar

El botón reiniciar debe:

  • Poner las variables contador, casillaNegra y casillaRoja a sus valores iniciales (1).

  • Poner los aciertos negros y rojos a 0

  • Poner el dado a 0

  • Situar las fichas en sus coordenadas iniciales, (2,2) y (5,5)

  • Habilitar el botón dado

  • Poner el color de fondo del botón dado en negro 

7- Mejoras

  • Tal y como está la aplicación, cuando ambas casillas están en la misma casilla, la negra cubre por completo a la roja. Podemos evitar ésto haciendo que la roja sobresalga un poco, por ejemplo, aumentando sus valores de X e Y en 3 píxeles:

  • Aún así, la ficha negra siempre queda por encima de la roja cuando están en la misma casilla. Podemos hacer que quede por encima la ficha que está jugando en ese momento modificando sus valores de Z:

    • En el procedimiento moverRoja haremos fichaRoja (Z) = 2, y fichaNegra (Z) = 1

    • En el procedimiento moverNegra haremos fichaNegra (Z) = 2 y fichaRoja (Z) = 1

jueves, 4 de febrero de 2016

Trivial con App Inventor 4 - Tablero con dos tipos de preguntas

Vamos a añadir una complicación a la aplicación anterior: Según el color de la casilla en la que esté la ficha (amarillo o azul), se hará un tipo de preguntas distinto.

Elementos:

Los elementos serán los mismos que para la aplicación anterior. Únicamente habrá que añadir otra etiqueta de aciertos, pues llevaremos por un lado la cuenta de los aciertos amarillos y por otro la de los azules:


Variables:

  • Las variables dado y casilla, así como las listas de posiciones x (posx) e y (posy) se mantienen igual que en la aplicación anterior.

  • Serán necesarios dos contadores, uno para las preguntas amarillas (contadorAmarillo) y otra para las azules (contadorAzul). Ambos se inician a 1.

  • También serán necesarias dos variables para llevar la cuenta de los aciertos: aciertosAmarillos y aciertosAzules. Ambas se inician a 0.

  • Asimismo harán falta listas de preguntas, respuestas y respuestas correctas tanto para las preguntas amarillas como para las azules:


Procedimientos:

Harán falta también dos procedimientos: uno para hacer una pregunta azul (preguntarAzul) y otro para hacer una amarilla (preguntarAmarillo), y que son iguales que el utilizado en la aplicación anterior.

Botón reiniciar:

El botón reiniciar debe poner en sus valores iniciales todas las variables (casilla, contadorAzul y contadorAmarillo a 1, dado, aciertosAzules y aciertosAmarillos a 0). Asimismo debe poner a 0 las etiquetas de aciertos amarillos y azules, y a 1 la etiqueta de la casilla. También deberá situar la ficha en la casilla 1, inhabilitar el selector de lista, y habilitar el botón dado, igual que en la aplicación anterior.

Botón dado:

La programación del botón dado es igual que en la aplicación anterior, con una salvedad: antes de preguntar debemos comprobar si estamos en una casilla azul o amarilla, para hacer un tipo u otro de pregunta. Para ello vamos a utilizar un bloque que no hemos empleado hasta ahora: el bloque módulo de que aparece en el apartado de matemáticas, y que nos da el resto de una división.

En nuestro tablero las casillas amarillas son impares, y las azules, pares. Si hacemos el módulo del valor de una casilla azul (un número par) entre dos, siempre va a ser cero. Si la casilla es impar (amarilla), el módulo de dividir por dos será 1. Ésta va a ser la condición que vamos a emplear para comprobar de qué color es la casilla en la que está la ficha:

Después de seleccionar:

El bloque de después de seleccionar también es básicamente igual que en la aplicación anterior, aunque ahora habrá también que comprobar si la respuesta dada es de una casilla amarilla o azul:


Tablero para descargar: