(AppInventor) Juego: Tapando Topos
¿Aprendemos a programar nuestro primer Juego para móviles? Hoy vamos a utilizar AppInventor para crear un sencillo juego que luego podremos instalar y jugar en cualquier dispositivos Android.
Este tutorial esta basado en el juego MoleMash que consiste en tapar con el dedo el topo que va apareciendo aleatoriamente por la pantalla.
Tapando Topos
A continuación un vídeo tutorial con las instrucciones para construir el juego paso a paso, pero si te atreves con el ingles anímate y visita el tutorial original.
Pero como decimos siempre antes de empezar:
¡Vayamos por partes!
Vídeo Tutorial
El siguiente vídeo tutorial contiene las instrucciones completas, paso a paso, para construir y probar el juego de Tapando Topos
Diseñando la interfaz
Lo primero que vamos a hacer es utilizar el Diseñador de AppInventor para componer los elementos de la pantalla. Los componentes que vamos a utilizar son:
-
HorizontalArrangement: de la sección Layout y que utilizaremos para colocar las etiquetas con la puntuación.
- Cuatro etiquetas Label para mostrar las puntuaciones y sus correspondientes títulos explicativos.
-
Canvas o Lienzo: sera el área de la pantalla por donde se moverá nuestra Canica Gravitatoria. Lo puedes encontrar en la sección Dibujo y animación. Acuérdate de marcar el Ancho y el Alto como Ajustar a contenedor para que se expanda a toda la pantalla disponible.
- ImageSprite: también en la sección de Dibujo y animación. La colocaremos dentro del Canvas y la renombraremos a Topo, y le configuraremos la propiedad Picture subiendo la imagen de un topo que puedes descargar de aquí.
- HorizontalArrangement: donde colocaremos el botón Comenzar que usaremos para resetear las puntuaciones
- Clock: que encontraremos en la sección de Sensores y lo utilizaremos como temporizador para cambiar al Topo de posición. El valor preestablecido para el intervalo del temporizador es de 1000 milisegundos, es decir un segundo.
Los Bloques de Instrucciones
En la sección de bloques implementaremos la lógica del juego:
Botón Comenzar: Reseteando las puntuaciones
Al apretar el botón comenzar reiniciamos el texto de la etiqueta que usamos para mostrar las puntuaciones, e iniciamos el intervalo en que queremos que el Topo cambie de posición informando la propiedad o con los milisegundos que queremos que tarde en cambiar de posición.
Temporizador: moviendo el Topo
Cuando se cumple el intervalo que hemos configurado en el temporizador, el evento Clock.Timer se dispara y se ejecutan los bloques de código que contenga. En nuestro caso moveremos la imagen del Topo a una posición aleatoria dentro de las dimensiones del Canvas.
Tocando el Canvas: Tapando el Topo (o no)!
El evento Canvas.Touched se ejecuta cada vez que el usuario pulsa la pantalla e inmediatamente levanta el dedo. El parámetro touchedAnySprite nos indica si además de tocar el lienzo el usuario a tocado encima de uno de los sprites y sera la forma que tendremos de saber si queremos incrementar el numero de aciertos o de fallos:
AI2 Companion
En este momento ya podremos probar nuestra aplicación usando IA2 Companion. Encontraras esta función en la barra de superior en la sección Conectar. Esto mostrara un código que deberás escanear o teclear desde el móvil con la aplicación AI2 Companion que previamente habremos instalado. Si aun no la has instalado puedes revisar estas instrucciones.
Si quieres instalar la aplicación de manera permanente tendrás que generar el archivo en formato .apk desde la sección construir y copiarlo vía USB o WiFi al dispositivo móvil para proceder a instalarla.
Código Fuente
AppInventor no permite compartir código con la comunidad de desarrolladores como la comunidad Scratch. Si quieres importar el código fuente puedes descargar el siguiente archivo: TapandoTopos.aia
Esperamos que hayas disfrutado con este tutorial. Si te ha gustado no dejes de compartirlo con tus amigos…
También puedes visitar otros tutoriales disponibles con AppInventor..
¡Nos vemos en el próximo!
Latest posts by José Manuel Tejeda (see all)
- [Libro] Mindset: La Actitud del Éxito de Carol Dweck - June 20, 2017
- Nuevo Grupo de Desarrollo Personal a través del Entrenamiento Mental - May 19, 2017
- 9 Actitudes Mindfulness para una vida mas plena y consciente… - May 16, 2017
Gracias por el tutorial. Una pregunta, el juego me dura infinitamente. ¿como pude hacer que dure solo 1 minuto o 30 segundos?. Gracias
muchas gracias por tu comentario, me alegro que te sea util el tutorial
a tu pregunta, para que el juego solo dure 30 segundos necesitaras otro temporizador (Clock 2) y establecerle el intervalo a 30.000 milisegundos, asi cuando salte puedes hacer el “game over” (por ejemplo cambiando el fondo del canvas o de alguna otra forma que se te ocurra)
si paras el temporizador uno, tienes que acordarte de volver a activarlo cuando se pulsa el boton comenzar, para que arranque otra vez
Un cordial saludo!
Ivan Garcia.