jueves, 28 de enero de 2016

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.

jueves, 21 de enero de 2016

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.

miércoles, 13 de enero de 2016

Trivial con App Inventor 1 - Tablero de juego

Este ejercicio consiste en lo siguiente:
  1. Crear un tablero de juego con El Gimp

  2. Poner el tablero en App Inventor. Añadir una ficha que pueda moverse con el dedo

  3. Hacer que la ficha  se mueva aleatoriamente a una casilla del tablero

  4. Hacer que la ficha se mueva un número determinado de casillas según la tirada de un dado.
1. Crear el tablero con El Gimp

Se creará un tablero como el de la figura, de 300 x 300 píxeles, siendo cada casilla de 50 x 50 píxeles:

2. Añadir una ficha que pueda moverse con el dedo

Se añadirá una ficha redonda (mediante el componente pelota), a la que se dará un radio de 20 píxeles, y se programará de manera que pueda moverse al arrastrarla con el dedo.

Código:



3. Programar la ficha para que aparezca en una casilla aleatoria

Se añadirá un botón a la aplicación, de manera que al apretarlo la ficha se mueva a una casilla aleatoria. Para ello hemos de tener en cuenta las coordenadas de cada casilla:

Para que la ficha quede centrada dentro de la casilla habrá que situarla un par de píxeles hacia la derecha y hacia abajo:

Así pues las coordenadas en las que puede aparecer la ficha serán (2,2), (52,2), (152,2), etc. Al apretar el botón habrá que hacer lo siguiente:

  1.  La posición X de la ficha deberá ser un número aleatorio entre 2, 52, 102, 152, 202 y 252. Para ello podemos decir al programa que nos de un número aleatorio, A, entre 0 y 5, y hacer X = 50 x A + 2.

  2.  Si X = 2 ó X=252 la posición Y de la ficha también puede tomar como valores 2, 52, 102, 152, 202 y 252. Entonces diremos: SI X=2 ó X=252, Y = 50 x A + 2, siendo A un número aleatorio entre 0 y 5.

  3. Si no es así, es decir, si X toma un valor de 52, 102, 152 ó 202, Y sólo puede valer 2 ó 252. Entonces diremos: SI NO buscar un número aleatorio entre 1 y 2. SI el número aleatorio vale 1, entonces Y=2, y SI NO, Y=252.
Se añadirán etiquetas que nos muestren los valores de X e Y en cada tirada:


Código:


4. Programar un dado para mover la ficha:

En este caso añadiremos un botón que hará de dado. Para ello haremos lo siguiente:

  1. Crearemos dos variables, una para el valor del dado, y otra para el valor de la casilla. La primera se iniciará con el valor 0, y la segunda con el valor 1, pues la ficha está situada al principio en la casilla 1. Para ello daremos a cada casilla un número:


  2. Crearemos dos listas, una para los valores X de la ficha en cada casilla, desde la 1 a la 20 (2 -casilla 1-, 52 -casilla 2-, 102 -casilla 3-, 152 -casilla 4-, 202 -casilla 5-, 252 -casilla 6-, 252 -casilla 7-, 252 -casilla 8-, etc.), y otra para los valores Y.

  3. Al apretar el botón la variable dado tomará un valor aleatorio entre 1 y 3, por ejemplo.

  4. La variable casilla aumentará en el valor de la variable dado (casilla = casilla + dado). SI la variable casilla vale más de 20, habrá que hacer casilla = casilla -20. De esta manera la variable casilla siempre tomará valores entre 1 y 20.

  5. La posición X de la ficha valdrá lo que indique la lista de valores X en la posición que indique la variable casilla, e igualmente sucederá con la posición Y.
Finalmente se añadirán las etiquetas correspondientes para indicar el número que ha salido en el dado y el número de casilla:


Código: