top of page

Pensamiento computacional: App Inventor

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

color.jpg

Iniciaremos esta clase realizando un programa muy sencillo para cambiar el color del móvil cada vez que lo agitemos.

Ingresa a http://appinventor.mit.edu

Crea un nuevo proyecto y asígnale por nombre: ACELEROMETRO.

00.jpg

A continuación, desde Palette del Disegner, escoge la opción Sensor e incluye el sensor AcelerometerSensor.

01.jpg

En Components y Propierties, es posible cambiar la sensibilidad que tenga nuestro sensor. Te recomiendo que la dejes en moderate

02.jpg

Con lo anterior ya tenemos lista nuestra pantalla. Ahora, en la sección Blocks programaremos las accciones. Primeramente, escoge del componente Screen1 la opción Set.Screen1.BackgroundColor.to con la que se definirá el color de la pantalla.

03.jpg
04.jpg

Ahora del componente AccelerometerSensor1 escoge la opción When.AccelerometerSensor1.Shaking que determinará lo que va a suceder cuando agites el dispositivo.  

05.jpg

Construiremos ahora la sección que permitirá el cambio de colores al agitar el móvil. Del componente Colors elije la opción MakeColor

06.jpg

La resolución que ofrece App Inventor para los colores es de 8 bits para los componentes RGB, esto significa que hay solo una gama de colores determinada que pueden mostrarse en la pantalla cada vez que agites el móvil. Por lo tanto, para esta resolución de 8 bits será necesario crear números aleatorios desde 0 hasta 255.

 

Del componente Math elige la opción random.integer.from y cambia el rango de números aleatorios de 0 a 255.

07.jpg
08.jpg
09.jpg

Con esto ya tenemos el programa terminado. PRUÉBALO !!!

Ejercicio 2.

El segundo programa que realizaremos será  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

Title                -> 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

Width  -> Fill parent  

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

BackgroundColor  -> Black

(Con el fin de obscurecer el lienzo)

09.jpg

PaintColor  -> White

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

10.jpg

FontSize  -> 40

(El tamaño de las letras)

12.jpg
11.jpg

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

De Palette desde la opción Drawing and Animation agregamos el componente Ball 

13.jpg

Cambiaremos algunas propiedades del nuevo componente Ball:

PaintColor  -> White

(Para cambiar color de la pelota "Blanco")

14.jpg

Heading  -> 30

(Para lograr movimiento hacia una dirección)

15.jpg

Radius  -> 8

(Para cambiar tamaño a la pelota)

17.jpg

Speed  -> 20

(Para cambiar velocidad de la pelota)

19.jpg
18.gif

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:

20.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:

22.jpg
21.jpg
23.jpg

Asigna esta imagen tanto al sprite 1 como al 2:

24.jpg

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

25.jpg

Iniciaremos la programación de los elementos, para ello da clic en la sección de bloques Blocks

blocks.gif
00.jpg

Inicializa la Variable Puntos a cero:

Crearemos un Procedimiento que llamaremos Reset, esto con el fin de inici​alizar la pantalla con la posición de la Pelota (Ball) y la posición de las Barras (Sprite1 y Sprite2):

01.jpg

Siguiendo como guía la siguiente imagen, programa el procedimiento Reset, con la inicialización de la Pelota (Ball) y las Barras (Sprite1 y Sprite2).

Este proceso es intuitivo: Identifica primero el componente solicitado (Ball, ImageSprite2, Canvas, etcétera) y después el atributo solicitado (MoveTo, X, Height, Width, etcétera)

02.jpg

Al final del Procedimiento agrega las condiciones que habilitarán tanto a la Pelota (Ball) como para las Barras (Sprite1 y Sprite2) para tener movimiento (Enabled), así como reiniciar la variable Puntos a cero y dibujar el título (Title) Puntos : 0.

03.jpg

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

 

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

05.jpg

Observa que la posición Y de las barras (Sprite1 y Sprite2) 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 Pelota (Ball) rebote en las esquinas (EdgeReached) y en las barras (CollidedWith):

06.jpg

Pruébalo en tu móvil:

07.jpg

Tarea Semana 8

Productos y actividades solicitadas en clase:

  • T10. Participación activa en clase

  • T11. Ejercicio de pensamiento computacional con las especificaciones solicitadas.

Productos DE TAREA A ENTREGAR:

  • T12. Enviar al profesor vía correo electrónico las respuestas del Insumo9.doc

TIC4_Corte2_Insumo9.docx >>

bottom of page