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.

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

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:

Trivial con App Inventor 3 - Tablero con dado + preguntas

Vamos ahora a unir las dos aplicaciones anteriores: Un tablero con una ficha que se mueve al tirar un dado, de manera que después de cada tirada nos haga una pregunta.

Elementos:

Debe tener los siguientes elementos:

• Un lienzo con el tablero y la ficha


• Etiquetas: para dado y el número que sale en el dado, casilla, y el número de casilla, acierto y número de aciertos, y otra para las preguntas. 


• Un selector de lista, que de principio está inhabilitado


• Un botón para el dado y otro para reiniciar el juego.

Variables:

Hay que incluir todas las variables de las dos aplicaciones anteriores:

Botón reiniciar:

Cuando se apriete el botón reiniciar habrá que:

• Poner las variables (dado, casilla y contador) en sus valores iniciales.


• Poner los textos de las etiquetas de casilla, contador y dado a sus valores iniciales (1, 1 y 0).


• Poner la ficha en la casilla 1.

Procedimiento preguntar:

 Queda exactamente igual que en la aplicación anterior:

Botón dado:

Lo hecho anteriormente para programar el botón dado vale para esta aplicación:

Únicamente hay que añadir un último bloque para que, después de apretar el dado y avanzar la ficha haga una pregunta. Es decir, hay que añadir un bloque para llamar al procedimiento preguntar.

Después de seleccionar de la lista:

Parte de lo programado anteriormente para el selector de lista también nos vale ahora:

De este bloque habrá que eliminar la finalización del juego cuando el contador vale más de 3 (lo sombreado en la figura), ya que el juego no va a finalizar, sino que va a seguir hasta que se apriete el botón reiniciar. Tampoco vamos a llamar al procedimiento preguntar, pues éste se llama sólo después de una tirada del dado.

En cambio, habrá que añadir los bloques necesarios para hacer que, cada vez que el contador valga más de 3, éste vuelva a valer 1 (con un bloque SI - ENTONCES), y de esta manera comience de nuevo por la primera pregunta.

Modificaciones:

Tal y como está planteada la aplicación tiene un fallo: el dado está siempre habilitado, y podemos tirar de nuevo antes de haber respondido a la pregunta. Habrá que modificar la programación añadiendo bloques para:

• Inhabilitar el dado después de haber hecho una tirada.


• Volver a habilitar el dado después de haber elegido una respuesta del selector de lista


• Habilitar el dado al apretar el botón reiniciar.

Trivial con App Inventor 2 - Juego de preguntas y respuestas

Vamos a hacer una aplicación que nos pregunte por las capitales de varios países. Deberemos elegir la respuesta correcta de una lista que nos ofrecerá la aplicación. Estos son los componentes que debe tener:

• Un botón para comenzar


• Dos etiquetas (label) para el país: una que diga Di cuál es la capital de, y seguidamente otra para poner el país, que inicialmente dejaremos vacía.


• Un selector de lista (list picker), en el que aparecerán todas las respuestas posibles.


• Dos etiquetas: una en la que ponga Aciertos, y otra en la que ponga el número de aciertos, que inicialmente será 0.


• Un notificador, para poder mostrar un mensaje cuando se ha acertado, otro cuando se ha fallado, y otro cuando el juego ha finalizado.

PROGRAMACIÓN:

1. Definir las VARIABLES:

• Una lista que contendrá cuatro países por los que vamos a preguntar la capital


• Otra lista que deberá contener  las capitales de los cuatro países anteriores, y en el mismo orden.


• Un contador, que nos indicará cuál de los cuatro países estamos preguntando. Lo iniciaremos a 1.


• La variable aciertos, que llevará la cuenta de las veces que hemos acertado. La iniciaremos a 0.

2. PROCEDIMIENTO para preguntar (al que podemos llamar preguntar):

• Deberá tener un bloque para poner los elementos del selector de lista igual a los elementos de la lista de las capitales


• Deberá asimismo tener un bloque para poner el texto de la etiqueta del país. Deberá indicar el país de la lista de países correspondiente al índice marcado por el contador.

3. El bloque DESPUÉS DE SELECCIONAR del selector de lista

• Debe incluir un bloque SI ENTONCES - SI NO, en el que, tras comprobar si la respuesta es correcta hagamos:

• Las notificaciones se hacen con el siguiente bloque del notificador:

• Después de ésto debemos aumentar el contador en 1


• Y, por último, hemos de comprobar si el contador vale más de 4, en cuyo caso el juego ha finalizado. Si no es así, el juego debe continuar y debemos llamar al procedimiento preguntar:

 4. Por último hemos de programar el botón COMENZAR:

 Al hacer clic en comenzar deberemos:

• Poner el contador a 1


• Poner los aciertos a 0


• Poner el texto de la etiqueta del número de aciertos al valor de aciertos


• Llamar al procedimiento preguntar.

5. Depuración de errores:

Tal y como está programada, la aplicación da estos fallos:

• Antes apretar el botón comenzar para iniciar el juego puede desplegarse el selector de lista, aunque no tenga ningún elemento.


• Cuando se ha terminado el juego, el selector de lista puede seguir desplegándose, y en él aparecen las capitales.

Corrige estos errores utilizando la propiedad habilitado (enabled) del selector de lista. Deberá estar en falso al abrir la aplicación. Al apretar el botón comenzar deberá ponerse en verdadero, y cuando el juego finalice (porque el contador es mayor que 4) debe volver a ponerse en falso.

6. Mejoras:


1.-

Introduce un componente sonido (se encuentra en la pestaña medios), y utilízalo para que el teléfono vibre si la respuesta dada no es correcta. Para ello deberás utilizar el bloque llamar al sonido vibrar (call sound vibrate), y decir durante cuántos milisegundos quieres que lo haga.

2.-

Tal y como se ha planteado, el juego es muy fácil, porque sabemos que al primer país que nos pregunta le corresponde la primera capital de la lista, al segundo la segunda, y así sucesivamente. Programa el juego de manera que las capitales no aparezcan en el mismo orden que los países.

Una manera de hacerlo es desordenar la lista de las capitales, y hacer una nueva lista, a la que podemos llamar correctas, por ejemplo, en el que las capitales estén ordenadas. La primera lista se utilizará para rellenar el selector de lista, y la segunda para comprobar si la respuesta elegida es la correcta.

3.-

En este juego las respuestas que aparecen en el selector son las mismas para todas las preguntas. Vamos a hacer una nueva aplicación en la que para cada pregunta aparezcan diferentes opciones de respuesta. La programación es muy parecida, siendo éstas las principales diferencias:

• La lista de respuestas será una lista de listas. Cada elemento de la lista contendrá todas las posibles respuestas a una pregunta, es decir, otra lista:

• Igual que en la mejora anterior, será necesario hacer una lista que contendrá únicamente las respuestas correctas, y que servirá para comprobar si la respuesta elegida por el jugador es o no correcta.

4.-

¿Es realmente necesaria la variable aciertos? Una variable no es más que un "almacén" donde guardamos algo. El número de aciertos podríamos guardarlo directamente en el texto de la etiqueta "número de aciertos", y así ahorraríamos algunos bloques.