App Inventor: juego con imágenes (3)

En este caso nuestra aplicación nos va a mostrar una imagen para que digamos lo que representa. La respuesta la elegiremos de una lista. Una vez elegida la respuesta, se nos mostrará otra imagen, aleatoriamente, para que digamos qué es.

1. Diseño

Para nuestra aplicación necesitaremos:

• Un lienzo


• Una imagen sprite, donde aparecerá la imagen por la que preguntamos


• Un desplegable (spinner), donde aparecerá la lista de posibles respuestas para elegir una.


• Un botón para comenzar el juego


• Una etiqueta en la que se leerá aciertos: , y otra en la que aparecerá el número de aciertos, y en la que en principio pondrá 0. Esta última etiqueta habrá que programarla, por lo que la he renombrado y la he llamado aciertos.


• Un componente de sonido (sound). Lo utilizaremos para que el móvil vibre cuando demos una respuesta errónea.

Asimismo subiré las imágenes (en mi caso, son las mismas cuatro de los ejercicios anteriores):

2. Programación

2.1. Variables

Voy a tener que definir cuatro variables:

• Una para los aciertos, que iniciaremos a 0


• Otra para las imágenes. Será una lista.


• Otra para las respuestas. También es una lista, que es la que aparecerá en el desplegable (spinner). Las respuestas deben ponerse en el mismo orden en el que se pusieron las imágenes. Además, hay que añadir una quinta respuesta, que será la que salga por defecto (en mi caso, he escrito selecciona. Hay que tener en cuenta que si por defecto sale la respuesta correcta, se considera que ya está seleccionada, y no me dejaría seleccionarla de nuevo)


• Otra que va a darnos cuál de las imágenes vamos a preguntar (la 1, 2, 3 ó 4, en mi caso). En este caso la inicio a 1:

2.2. Procedimiento para mostrar una imagen al azar

Ahora vamos a hacer un procedimiento que hará lo siguiente:

• Cargará los elementos de la lista respuestas en el desplegable (spinner)


• Mostrará el elemento de la lista "selecciona" en el desplegable


• Dará un valor aleatorio entre 1 y el número de imágenes (en mi caso 4) a la variable pregunta.


• Hará aparecer la imagen correspondiente al valor de la variable pregunta en la imagen sprite.

2.3. Inicio del juego

Al apretar el botón comenzar:

• Se pondrán los aciertos a 0


• Se llamará al procedimiento preguntar, definido en el paso anterior.

2.4. Tras seleccionar una respuesta:

Una vez se ha preguntado por una imagen y el usuario ha elegido una respuesta, se deberá hacer lo siguiente:

• Comprobar si la respuesta es correcta (la respuesta correcta es la correspondiente a la posición señalada por la variable pregunta en la lista de respuestas).


• Si la respuesta es correcta aumentará en 1 los aciertos


• Si la respuesta no es correcta hará que el teléfono vibre


• Finalmente, se llamará de nuevo al procedimiento preguntar, para que aparezca una nueva imagen y se repita el proceso.

2.5 Mejoras

Como siempre, introduce mejoras en la aplicación. Corrige posibles errores, pon un diseño atractivo, y añade aquello que se te ocurra para mejorar la programación.