miércoles, 25 de abril de 2018

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

miércoles, 4 de abril de 2018

Ejercicos con App Inventor: Golf

Vamos a hacer un juego consistente en colar una pelota en un agujero. La pelota se moverá al inclinar el teléfono:



1. Damos movimiento a la pelota.


Lo primero que tendremos que hacer será añadir:

  • un lienzo
  • una pelota blanca
  • una pelota negra, algo mayor que la anterior, que será el hoyo.

Además, junto al hoyo he puesto la imagen de una banderita, como en los campos de golf. Puedes descargártela de aquí:






Para mover la pelota hay que comprobar el sensor de orientación; la pelota debe avanzar según la inclinación del teléfono. Por ello hemos de añadir también:

  • el sensor de orientación


Programación:

Al cambiar el teléfono de orientación la aplicación debe:


  • Mover la pelota en la dirección de la inclinación del teléfono
  • Mover la pelota a mayor velocidad cuanto mayor sea el ángulo de inclinación.



El ángulo (magnitud) del sensor de orientación nos da velocidades muy pequeñas, por lo que hay que multiplicarlo por algún número. Cuanto mayor sea el número, mayor será la velocidad. En mi caso lo he multiplicado por 1000.

2. Mejoras


Introduce las siguientes mejoras:

  1. Cuando la pelota llegue al hoyo, que caiga dentro y se pare.

  1. Hay que volver a poner en movimiento la pelota cuando pase algo. Por ejemplo, al pulsar un botón. Habría que añadir un botón en el diseño y programarlo para que al apretarlo la pelota salga del hoyo y se mueva de nuevo con el sensor de orientación.
  1. Añade una puntuación. Cada vez que colemos la pelota en el hoyo obtendremos un punto. Para ello hay que:
    • Crear una variable para almacenar los puntos:

    • Crear una etiqueta para mostrar los puntos en pantalla: 





  1. Añade un temporizador, de manera que cuando pasen 60 segundos el juego se pare. Para ello hay que:

    • Añadir un reloj en el modo diseño

    • Creo una nueva variable, llamada segundos, y la inicio a 60. Esta variable va a almacenar los segundos que quedan para que el juego acabe.

    • En el modo diseño, pongo dos etiquetas más: una en la que ponga "tiempo: ", y otra en la que pongan los segundos que quedan. De esta manera podré ver el valor de la variable tiempo (los segundos que quedan) en la pantalla:


    • Programo el reloj de forma que, cada vez que haga "tic" (en este caso cada segundo, porque está puesto el intervalo a 1000 ms -ver la imagen de arriba-), descuente un segundo al valor de la variable tiempo, y refleje este valor en la etiqueta:

    • Además, por cada "tic" del reloj habrá que comprobar si los segundos han llegado a 0, pues en ese caso el juego ha terminado. Si los segundos han llegado a cero hay que, detener la bola (hacer su velocidad 0), desactivar el sensor de orientación, y desactivar el propio reloj. Además, también deberá desactivar el botón de "nueva tirada", para que no podamos jugar con el reloj a 0.


  1. Finalmente hay que añadir un botón para reiniciar el juego. Lo puedo llamar "reiniciar juego", y al hacer clic en él debe de ocurrir lo siguiente:
    • Se debe llevar la pelota fuera del hoyo, por si acaso estuviera dentro.
    • Se deben poner los puntos a cero, y debe aparecer 0 en la etiqueta "puntuación"
    • Se deben activar el sensor de orientación, el reloj, y el botón de "nueva tirada"