¿Cómo programan o funcionan los juegos en los que tenemos que presionar en la pantalla un objeto? Hay muchos juegos basados en estas características, en este caso veremos como se puede interactuar con la pantalla y las imágenes transparente.
Aunque es un juego muy básico en el que tendremos que encontrar una mosca apretando diferentes lugares de la pantalla, te puede dar muchas ideas para ir implementando en base a este simple juego.
IDEA:
El objetivo desarrollar una aplicación en la que que toquemos la pantalla para localizar la mosca.
La aplicación está en estado básico por lo que se le pueden agregar muchas opciones.
¿Qué Aprenderemos?
Aprendemos a manejar el Lienzo, a dibujar puntos o círculos, etc.
También aprenderemos a programar en procedimientos como el de Presionar de un objeto Lienzo o Pelota.
DISEÑO:
Los Componentes que utilizaremos será un “Disposición Horizontal” y le agregaremos un “Botón” y una “Etiqueta”.
También, utilizaremos un “Lienzo” y en ella colocaremos un “SpriteImage” y una “Pelota”.
En Medios, tendremos que subir una imagen de una mosca pero tiene que ser transparente y de un tamaño pequeño.
Para el caso de “Disposición Horizontal” te recomiendo ponerle a la propiedad “Ancho” el “Ajustar al contenedor…”
Para Botón, sólo precisamos modificar la propiedad “Texto” y ponerle algo como “REINICIO”.
La Etiqueta, le puedes hacer los cambios que quieras o dejarla tal cual está.
Al Lienzo, es necesario colocar tanto el Alto como el Ancho, en “Ajustar al contenedor…” para que se ajuste a todo lo que da la pantalla y así tenemos más espacio para colocar lo otros objetos.
En SpriteImagen, debemos asignar a la propiedad Foto, la imagen de la mosca; y si es muy grande ajustar las propiedades Alto y Ancho a por ejemplo 50 pixeles.
La Pelota, debemos colocarle la propiedad “Color De Pintura” en “Negro” para empezar a trabajar, y luego al final debemos colocarle “Ninguno”
Componentes:
Al armar el diseño debes tener en cuenta los componentes y la posición de los mismos.
Deberás también ajustar los componentes revisando el diseño por lo que tendrás que cambiar algunas propiedades que no se han especificado como las opciones para el ancho y alto.
RECURSOS:
La Mosca:
La mosca que es una imagen con fondo transparente, deberás cargarla como un archivo en el apartado Medios.
PROGRAMACIÓN:
Deberemos programar los procedimientos para Boton.Clic, Lienzo.Presionar y Pelota.Presionar.
Deberás crear los bloques como se muestra en las siguientes figuras:
Declarar Variables Globales:
Deberemos declarar las variables iniciales: x, y, veces
Códigos en Bloques para Boton.Clic:
Cuando el Botón uno es clikeado, hacemos:
- Llamar a la propiedad Limpiar del objeto Lienzo1, para ponerlo vacío al iniciar.
- Asignamos valor 0 a la variable veces.
- En la variable x, será el resultado de generar un número aleatorio y el ancho de la pantalla (Screen1)
- La variable Y, será el resultado de generar un número aleatorio y el alto de la pantalla (Screen1)
- Moveremos el objeto Pelota1 dependiendo de las variables x e y.
- Ponemos el objeto Pelota1 como visible.
- Ponemos el objeto SpriteImagen1 como oculto.
Códigos en Bloques para Lienzo.Presionar:
Cuando el Lienzo1 está presionado, hacer:
- Poner en la variable veces, la suma del valor de la misma variable veces + 1
- Mostrar en la etiqueta1 el valor de la variable veces. Esto es para saber cuantas veces se ha presionado.
- Llamar a la función DibujarCirculo del Lienzo, para que genere un circulo dependiendo de las variables x e y, más un radio de 5.
Códigos en Bloques para Pelota.Presionar:
Cuando la Pelota esté presionada, hacer.
- Llamar a la función MoverA del SpriteImagen1 tomando los datos para x e y de las respectivas variables
- Poner al objeto SpriteImagen1 como visible.
- Poner al objeto Pelota1 como oculto.
AVANZADO:
Este proyecto de app es una versión básica que se puede continuar, mejorar o modificar con la idea que tengas en mente.
Se podrían hacer muchas cosas, desde contar o avisar cuando coincide y se coloca la mosca, incluso ponerle sonido o modificarlo para darle otras utilidades.
Puedes poner niveles, es decir cuanto más pequeño sea el Radio de la Pelota, más difícil será pulsar sobre ella.
Sugerencia:
Para que la Pelota siempre se cree entera en la Screen, deberíamos de poner en el centro, es decir que el tope derecha/izquierda sea el ancho de la Screen menos el ancho de la pelota y el tope arriba/abajo sea el alto de la Sceeen menos el alto de la pelota.
Deberías remplazar el tramo de código existente por este nuevo en el código del botón.
PROBLEMAS o ERRORES:
En algunos celulares he visto que no reacciona bien o hay que probarlo varias veces.
He detectado que algunos alumnos tienen dificultades y no les funciona correctamente cuando lo ejecutan en sus celulares. Pero a muchos si les funciona, por lo que supongo debe ser algún tema relacionado con la configuración de su equipo.
PROBAR la Aplicación:
Recuerda que para probar la aplicación se recomienda utilizar la APP MIT AI2 Companion, que la puedes descargar de Google Play Store, ya que te permite escanear un código QR y transferir a tu celular la aplicación que haz desarrollado sin que te lo dañe ya que crea una especie de caja en la que se ejecuta sin problemas.
GENERAR Archivo APK
Si quieres tener definitivamente la aplicación en tu celular, deberás generar un archivo para poder instalarla, para la cual debes hacer clic en la opción GENERAR, Android (.apk)
MÁS PROYECTOS:
Si te gustó este proyecto, disponemos de más en el apartado correspondiente a APPInventor2
COMPARTE:
Si este artículo te ha parecido de utilidad, por favor compártelo, y así nos ayudas a difundir nuestro proyecto y a ayudar a más personas que desean aprender!