App Inventor: juego con imágenes (2)

Este trabajo consiste en un juego en el cual se nos hace una pregunta sobre varias imágenes que aparecen en pantalla. Hay que contestar pulsando sobre la imagen correcta:

Pasos a seguir:

1. Componentes

En la ventana de diseño hay que añadir:

• Un lienzo


• Dentro del lienzo, tantas imágenes sprite como queramos (en este caso 4). Las imágenes se deshabilitan, de forma que no puedan pulsarse hasta que se haga la pregunta:

• Un arreglo horizontal, con dos etiquetas dentro. En una se va a hacer la pregunta ("di cuál es "), y en la otra aparecerá el nombre de la herramienta que preguntemos ("la segueta", por ejemplo). Esta segunda etiqueta, a la que he llamado pregunta, se deja con el texto en blanco de primeras:

• Un botón para jugar


• Otra etiqueta, en donde pondrá "ACERTASTE" o "FALLASTE" cuando se haya elegido una respuesta. El texto de esta etiqueta (a la que he llamado notificación) también se deja en blanco de principio.

2. Bloques:

• Declaramos una variable, a la que yo he llamado herramientas, como una lista con todas las respuestas:

• Al hacer clic en el botón jugar, se habilitan las cuatro imágenes. De esta manera podemos pulsarlas para elegir la respuesta que creamos correcta:

• Declaro otra variable, a la que llamo pregunta. Es la que va a almacenar cuál de las cuatro herramientas he preguntado. Puede tomar, por tanto, los valores 1, 2, 3 ó 4. Cuando aprieto el botón jugar, tomará uno de estos cuatro valores al azar:

• Por último, al pulsar el botón jugar, deberá aparecer la herramienta que pregunto en la etiqueta pregunta. Para ello pondré en la etiqueta el nombre que aparece en el lugar indicado por la variable pregunta (1, 2, 3 ó 4) en la lista herramientas:

• Una vez que el usuario elija una respuesta (pulsando en una imagen), habrá que comprobar si ha acertado o no. Si hubiera pulsado en la imagen 1...

• ... habrá que comprobar si ha acertado o no, para poder actuar en consecuencia:

• Si ha pulsado en la imagen 1, habrá acertado si la pregunta era la correspondiente a esta imagen, es decir, la primera que sale en la lista herramientas:

• Si ha acertado, haremos aparecer la palabra "ACERTASTE" en la etiqueta notificación. Si no, aparecerá la palabra "FALLASTE":

• Y, además, habrá que deshabilitar todas las imágenes de nuevo, para que no se pueda pulsar ninguna hasta que no se apriete de nuevo el botón jugar:

• Hay que hacer lo mismo con las otras tres imágenes:

3. Mejoras:

3.1. Simplificación del código:

Fíjate en la imagen anterior, y observa cómo el código para inhabilitar las imágenes (los cuatro últimos bloques verdes), se repite para cada imagen. Si en lugar de cuatro imágenes fueran más, más se repetiría. Hay una forma más elegante de hacer esto, y es definiendo un método. En este caso lo he llamado inhabilitar:

El método deshabilitar me deshabilita las cuatro imágenes. Cada vez que quiera hacerlo, en lugar de deshabilitar las imágenes una por una, haré una llamada a este método:

3.2. Otras mejoras:

Añade otras mejoras como:

• Haz un diseño atractivo


• Añade un marcador que lleve la cuenta de los aciertos