La idea original está tomada De http://appinventor.mit.edu/explore/ai2/molemash.html

Introducción

El juego consiste en “aplastar” una bomba que aparecerá aleatoriamente por la pantalla antes de que esta explote, si lo conseguimos nos sumará un punto a la puntuación y nos restará 5 si no lo conseguimos.

Vamos a introducir los términos de contador, y sprite en los conocimientos que hemos adquirido a lo largo del curso.

Los componentes

Añade un Canvas, una etiqueta que ponga puntuación y un botón para empezar a jugar de nuevo. Tal y como se ve en la siguiente imagen.

Descarga y añade a tu proyecto la imagen y el sonido.

Selección_170B

Nos faltará el reloj que se encuentra en Sensors / Clock, arrástralo a nuestra pantalla para configurarlo.

Selección_172

Añadimos el Sprite

Un Sprite es una imagen a la que puedes darle movimiento dentro de un canvas. Cada sprite tiene una velocidad y rumbo, así como un intervalo que indica cada cuanto se mueve a una determinada velocidad. Cada vez que el reloj cumpla un tiempo definido moverá la imagen a otra posición.

Añadimos un sprite al canvas, está en Drawing and Animation.

Selección_179b

Los manejadores de eventos

Vamos a introducir una nueva idea en app inventor, se llaman procedimientos. Nos permiten crear un conjunto de acciones definidas bajo un nombre único, de forma que podremos ejecutarlas cuando queramos solo nombrándolo.

Vamos a definir dos procedimientos MoverMole y ActualizaPuntuacion, en blocks iremos al apartado Procedures y arrastraremos el bloque to procedure do y donde pone procedure lo cambiaremos por el nombre de nuestro procedimiento: MoverMole . Dentro de este procedure haremos que la imagen de la bomba se mueva a un punto aleatorio de la pantalla, teniendo en cuenta que no se puede salir de la pantalla (de ahí que lo hagamos en base al tamaño de la pantalla y el sprite).

Selección_180

Selección_181

Generamos una variable global llamada puntos para almacenar la puntuación que tiene el usuario en todo momento.

Después generamos un procedimiento que pinte en pantalla el valor almacenado.

Selección_183

Hacemos que el contador de tiempo llame al procedimiento MoverMole cada poco tiempo.

Selección_184

Añadir un evento al tocar la bomba

Cada vez que toquemos la bomba:

  1. Tenemos que sumar 1 punto al marcador.

  2. Hacer que vibre el teléfono.

  3. Mover la bomba a otro sitio.

Selección_186

TRUCO: typeblocking → si quieres crear un bloque sin pasar por los menús simplemente escribe en la pantalla y verás como se genera un listado de opciones para escoger el nuevo bloque. Si es un número que generará un globo de valor, si es if un condicional, etc.

Selección_189

Reiniciar el marcador

Actualiza el marcador con un cero, este es muy fácil 😉

Selección_190

Ejercicio: Vamos a hacer el juego mas interesante, modifícalo para que:

  1. Nuestro temporizador empezará en 2000 milisegundos.

  2. Si no pulsamos sobre la bomba y lo hacemos en el fondo nos restará 5 puntos.

  3. Partiremos de 10 puntos, si llegamos a 0 puntos el juego se acaba y aparecerá un texto indicando que hemos perdido.

  4. Haremos que cada segundo el tiempo en que se mueve la bomba se decremente en 100 milisegundos hasta llegar a 200 milisegundos entre cambios.

  5. Añade un texto indicando la mayor puntuación que hayamos obtenido en el juego hasta el momento.

Truco: para que sea fácil descontar puntos resta 5 usa la opción touchedAnySprite del canvas

Selección_191

Puede ocurrir que al hacer la aplicación en el emulador las imágenes se vean con fondo transparente y cuando pasas la aplicación al móvil  el fondo de los gif ya no son transparentes. App inventor tiene un problema con los gif con fondo transparente. Para solucionarlo usa imágenes con fondo transparente grabadas como PNG. Si hace falta convierte los gif a png con GIMP 🙂

Mi solución al ejercicio puedes verla en la siguiente imagen o jugar en tu móvil instalando la apk:

Selección_192