Actividad Inicial

Objetivo: conocer el ambiente de programación en app-inventor y desarrollar una aplicación

básica

En la sección paleta se encuentran los componentes que queremos agregar a nuestra aplicación.
Basta arrástralo a screen1 o pantalla de nuestro móvil virtual

Por ejemplo, agrega un botón y una etiqueta

En el área de componentes se van agregando los elementos del screen1 y al lado aparecen las
propiedades de cada componente. Estas pueden ser modificadas antes de ejecutar la aplicación,
es decir, inicializar sus propiedades o bien cambiar sus propiedades durante la ejecución. Por
ejemplo, ingresar un texto largo a la etiqueta y cambiar el ancho ajustado al contenedor.

Desmarcarlo en Visible para ocultarlo.

Nótese que por el momento no podemos colocar las componentes en la posición que deseamos.
Se necesita dar formato al screen1 mediante componentes de Layout o Disposición que se
encuentran en la Paleta de componentes.
Para cambiar el nombre a una componente o borrarla seleccionarla y pulsar el botón
correspondiente.

Borre todae las componetes para comenzar a desarrollar nuestra primera aplicación.

Nuestra primera aplicación será un juego tipo pong muy simple. Consiste en una pelotita que
rebota en los bordes. Hay que capturar la pelotita con una caja. Debemos capturar 10 pelotitas
para ganar para lo cual se tiene un contador. El problema que se presenta es que cada vez que
capturamos una pelotita la velosidad aumenta. Como es nuestra promera aplicación no haremos
un estudio de la funcionalidad ni el manejo de eventos de la plicación, solamente comensaremos
por lo más simple, que es colocar un elemento que tiene animación.

Todo elemento que tiene animación debe estar contenido en un lienzo. Seleccione en Paleta
Dibujo y animación
Arrate el lienzo al Screen1.

En propiedades del lienzo cambiar el Alto y Ancho por Ajustar al contenedor.

Agregue la Pelota al contenedor Lienzo.

Observe como las componentes dependen de otra.

Cambie el color de la Pelota e ingrese 3.0 para la velocidad

Luego configura el celular y aparecerá lo siguiente

Para volver a ver como se mueve la pelotita selecciónala en Screen1 y cámbiala de posición.

Selecciona nuevamente Reiniciar conexión para volver a nuestro desarrollo

¿Cómo programar?
Estamos en modo de diseño ahora necesitamos agregar bloques de programación a nuestra

aplicación. Selecciona el botón Bloques

Si selecciona la Pelota en el área Bloques se mostrarán todos los bloques de sentencias

predeterminadas para modificar las propiedades de la pelota y su comportamiento.

El comportamiento que queremos de la pelota es: rebotar al tocar el borde.

Selecciona el bloque cuando Pelota TocarBorde Ejecutar

Cuando la Pelota toque el borde queremos que ejecute la acción: Rebotar en una dirección
determinada.

Haz nuevamente clic en Pelota del área Bloques, y selecciona la acción Llamar Pelota y Apuntar En
La Dirección x, y
Y encájalo en el bloque anterior

Queremos que la Pelota rebote en cualquier dirección, por lo tanto la haremos apuntar a una
dirección aleatoria para una coordenada (x,y). Se supone que necesitamos un valor aleatorio, esto
debe ser entregado por una función matemática.

Selecciona el bloque Matemática y busca el bloque entero aleatorio entre

Lo dejaremos para los valores prestablecidos 1 a 100

Duplica el bloque para la variable y encájalos.

Para ver nuestra aplicación en el celular seleccione Conectar y luego Reiniciar conexión

Luego configura el celular y aparecerá lo siguiente

En Diseño seleccionando en Componentes Pelota1 cambia la velocidad a 5.

A continuación, agregaremos una imagen que será una caja. Es importante subir imágenes
pequeñas para la animación de lo contrario la animación se pone lenta.

Estando en modo de Diseño seleccionamos SpriteImagen desde la Paleta y la arrastramos a

nuestro lienzo en Screen1.

Selecciona SpriteImagen en el área de componentes y luego el botón Subir archivo en el área

Medios

Selecciona un archivo desde tu computador y súbelo

En Propiedades de SpriteImagen selecciona Foto y selecciona un archivo.

Programaremos el siguiente evento: Cuando arrastremos el SpriteImagen lo moveremos a otra

posición.

Ativamos el modo Bloques selccionales SpriteImagen y el bloque cuando SpriteImagen1

Arrastrado ejecutar.

Luego seleccionamos llamar SpriteImagen MoverA x, y y lo encajamos en al bloque anterior

Si arrastramos en SpriterImagen a una nueva posición los valores de las propiedades de x e y

deben tomar los nuevos valores, para esto colca el cursor sobre XActual

Selecciona tomar XActual y encaje el bloque para x. Realiza lo mismo para y

Ir a Conectar, Reiniciar conexión y luego Emular . r

Ahora puedes arrastrar la imagen en tu celular a la posición deseada.

Agregaremos un nuevo evento que consiste en lo siguiente: Cada vez que colisione la Pelota1 con
el SpriteImagen1 la pelota debe rebotar apuntando a una nueva dirección

La acci´n que la Pelota1 apunte a una nueva dirección ya la tenemos por lo tanto lo duplicaremos.
Basta agregar el bloque de colisión de SpriteImagen1 quedando de la siguiente manera.

Ir a Conectar, Reiniciar conexión y luego Emular . r

Arrastra la imagen y trata de tocar la pelota.

Le agregaremos un contador de colisiones, para esto necesitamos un campo de texto para ir

mostrando la cantidad de colisiones que se van generando.

Activa el modo de Diseño y agregaremos un campo de texto desde Paleta / Interfaz de usuario.

Es obvio que no podemos agregar el campo de texto al lienzo por lo tanto necesitamos cambiar el
tamaño del Lienzo, Para esto seleccionamos Lienzo desde el área Componentes y cambiaremos el
Ancho y el Alto.

Cambia por 80% el alto y el Ancho.

Seleccionamos el área Paleta /Interfaz de usuario y arrastramos debajo del lienzo el
CampoDeTexto

Observa la jerarquía de componentes. La componente CampoDFeTexto no depende de Lienzo

Necesitamos una variable global llamada contador inicializada en 0, que sea reconocida por todas
las componentes, para esto vamos al modo Bloque y seleccionamos Variables y arrastramos
inicializar global nombre como

En el área Visor haz doble clic en nombre y cámbialo por contador.

Para inicializar el valor necesitamos un valor Matemático 0, Selecciona Matemáticas en Bloques y

selecciona el primer bloque de valor
y encájalo en Inicializar global

El evento de colisión es el siguiente: Cada vez que colisiona SpriteImagen1 con la Pelota1 debemos
incrementar el contador y escribir su valor en el Campo de Texto.

Para incrementar en 1 el valor del contador necesitamos poner el contador al valor de la suma del
valor actual del contador más 1

Para sumar seleccionamos el bloque + de Matemática y lo completamos con:

Tomar el valor de la variable global de contador más el valor 1 de un bloque de Matemática

Más

Uno

Quedando lo siguiente

Este valor obtenido debe cambiar el valor de la variable global contador. Es decir, poner en la
variable un nuevo valor
Asigna el nombre al bloque poner y encaja el bloque de la suma, obteniendo lo siguiente

Como queremos actualizar el campo de Texto debemos poner en el CampoDeTexto un Texto con
el valor de la variable global contador.

Seleccionamos en el área de Bloque el CampoDeTexto y seleccionamos el bloque poner

CampoDeTexto el Texto

Para obtener el valor de la variable global contador, lo obtenemos de

duplicando el bloque tomar y lo encajamos

en el bloque del CampoDeTexto

Agregamos los bloques al evento Colisión obteniendo lo siguiente

Ir a Conectar, Reiniciar conexión y luego Emular . r

Le agregaremos una pequeña dificultad al juego. Cada vez que se realice la colisión le
aumentaremos la velocidad a la Pelota1 en un 20%, es decir, la velocidad anterior la
multiplicaremos por 1,2

Seleccionamos el bloque poner Pelota1 a Velocidad como y le agregamos el bloque de

multiplicación de la Pelota1, es decir

Agregar este nuevo bloque al evento colisión

Ir a Conectar, Reiniciar conexión y luego Emular . r

Le agregaremos una nueva dificultad al juego. LA caja siempre va permanecer abajo del Lienzo y le
aumentaremos la velocidad a la pelota, esta última condición va a depender de la velocidad del
procesador del celular.

Para cambiar la posición de la caja hay que arrastrar a una posición deseada en el Lienzo, en el
modo Diseño, y ver el valor de la propiedad Y

En modo Bloques cambiar el valor de Y en moverA a tomar el valor de Y inicial como indica la
figura.