Pensamiento computacional: App Inventor

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

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.

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

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

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.

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

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

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.

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.

La pantalla ahora, tendrá el siguiente aspecto:

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

Title                -> Puntos : 0

Ahora necesitaremos un lienzo.

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

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)

Width  -> Fill parent  

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

BackgroundColor  -> Black

(Con el fin de obscurecer el lienzo)

PaintColor  -> White

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

FontSize  -> 40

(El tamaño de las letras)

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 

Cambiaremos algunas propiedades del nuevo componente Ball:

PaintColor  -> White

(Para cambiar color de la pelota "Blanco")

Heading  -> 30

(Para lograr movimiento hacia una dirección)

Radius  -> 8

(Para cambiar tamaño a la pelota)

Speed  -> 20

(Para cambiar velocidad de la pelota)

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:

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:

Agrega este archivo en la biblioteca de medios:

Asigna esta imagen tanto al sprite 1 como al 2:

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

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

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):

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)

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.

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):

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):

Pruébalo en tu móvil:

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

contáctame: 

  • w-facebook
  • Twitter Clean