top of page

App Inventor

//////////////////////////////////////////////////////////////////////////

Actividad de consolidación.

App Mentimeter

MENTIMETER.jpg

Progresión: utiliza herramientas de comunicación digital en forma directa, o emisión y descarga continua, transmisión por secuencias, lectura y difusión continuo para difundir información, conocimientos, experiencias y aprendizajes de acuerdo a su contexto personal, académico, social y ambiental.

Meta específica: identifica y clasifica redes de comunicación, ampliando así su conocimiento de la comunicación digital.

DISEÑO.

En esta sesión realizaremos el inicio del juego de PING-PONG y en la siguiente clase lo terminaremos.

​

De nueva cuenta, inicia un nuevo proyecto y ponle por nombre PONG.

​

Para iniciar, del componente SCREEN1, cambia la propiedad THEME a Device Default.

pong.jpg
00.jpg
01.jpg

La pantalla ahora, tendrá el siguiente aspecto:

02.jpg

Esta sección la utilizaremos como título del marcador, es decir, el registro de los puntos que vamos realizando. Para ello cambia las siguientes propiedades con los atributos especificados:

PrimaryColor  -> Black

03.jpg

Título                -> Puntos : 0

04.jpg
05.jpg

Ahora necesitaremos un lienzo.

De Paleta desde la opción Dibujo y Animación agrega el componente Lienzo

app01.png

Cambia las propiedades del nuevo componente Lienzo como se muestra a continuación:

Alto  -> Ajustar al contenedor  

(Hará que se ocupe todo lo alto de la pantalla)

app02.png

Ancho  -> Ajustar al contenedor  

(Hará que se ocupe todo lo ancho de la pantalla)

ColorDeFondo  -> Negro

(Con el fin de obscurecer el lienzo)

01.jpg

ColorDePintura  -> Blanco

(Esto porque posteriormente mostraremos la palabra "REINICIAR"  sobre el lienzo negro, para volver a jugar)

02.jpg

Tamaño de letra  -> 40

12.jpg
03.jpg

Y sobre el lienzo queremos la pelota que va a rebotar de un lado a otro.

​

De Paleta desde la opción Dibujo y animación agregamos el componente Pelota

04.jpg

Cambiaremos algunas propiedades del nuevo componente Pelota:

ColorDePintura  -> Blanco

(Para cambiar color de la pelota a "Blanco")

05.jpg

Dirección  -> 30

(Para definir la dirección de la pelota)

06.jpg

Radio  -> 8

(Para cambiar tamaño a la pelota)

07.jpg

Velocidad  -> 20

(Para cambiar velocidad de la pelota)

19.jpg
08.jpg

Con estos elementos puedes probar en tu móvil que la pelota ya tiene movimiento, sin embargo, aún no rebota.  

​

A continuación inserta dos imágenes sprite que servirán como las barras donde rebotará la pelota:

09.jpg

Es necesario cargar la imagen que representará las barras donde va a rebotar la pelota.

​

Puedes utilizar alguna propia que quieras crear o puedes utilizar la siguiente imagen que yo te propongo. Descárgala en tu equipo como barra.gif:

barra.gif

Agrega este archivo en la biblioteca de medios:

10.jpg
11.jpg

Asigna esta imagen tanto al sprite 1 como al 2:

12.jpg

Nuestra pantalla se verá más o menos de esta forma:

13.jpg

Iniciaremos la programación de los elementos.

PROGRAMACIÓN DE EVENTOS.

Inicializa la Variable Puntos a cero:

15.jpg

Crearemos un Procedimiento que llamaremos Reiniciar, esto con el fin de inici​alizar la pantalla con la posición de la Pelota1 y la posición de las Barras (SpriteImagen1 y SpriteImagen2):

16.jpg

Siguiendo como guía la siguiente imagen, programa el procedimiento Reiniciar, con la inicialización de la Pelota1 y las Barras (SpriteImagen1 y SpriteImagen2).

​

Este proceso es intuitivo: Identifica primero el componente solicitado (Pelota1, SpriteImagen2, Lienzo1, etcétera) y después el atributo solicitado (MoverA, X, Alto, Ancho, etcétera)

17.jpg

Al final del Procedimiento agrega las condiciones que habilitarán tanto a la Pelota1 como para las Barras (SpriteImagen1 y SpriteImagen2) para tener movimiento (Habilitado), así como reiniciar la variable PUNTOS a cero y dibujar el Título "Puntos : 0".

18.jpg

NOTA: Si al hacer pruebas observas alguna anomalía, probablemente se deba a que tienes intercambiados los nombres de las barras (SpriteImagen1 y SpriteImagen2).

 

Programa el movimiento de las barras para realizar el movimiento de izquierda a derecha con el dedo, es decir, arrastrarlas (Arrastrado):

19.jpg

Observa que la posición Y de las barras (SpriteImagen1 y SpriteImagen2) tienen la misma posición, esto permitirá que el movimiento de las mismas solo se haga de izquierda a derecha sin moverse de la misma posición Y.

​

Finalmente en esta sesión, haremos que la Pelota1 rebote en las esquinas (TocarBorde) y en las barras (EnColisiónCon):

20.jpg

Pruébalo en tu móvil:

07.jpg

Tarea Semana 8

Productos y actividades solicitadas en clase:

  • T06.C02 Participación activa en clase, 7 oct

  • T07.C02 Participación activa en clase, 9 oct

  • T08.C02 Programa generado en App Inventor.

Productos DE TAREA A ENTREGAR:

  • T09.C02 Adjuntar al portafolio de evidencias las respuestas del Insumo3.docx.

CD3_Corte2_Insumo3.docx >>

HRASSO.jpg
bottom of page