Pensamiento computacional

App Inventor

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

Actividad de consolidación.

App Mentimeter

DISEÑO.

En esta sesión realizaremos 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

Título -> 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)

Ancho -> Ajustar al contenedor

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

ColorDeFondo -> Negro

(Con el fin de obscurecer el lienzo)

ColorDePintura -> Blanco

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

Tamaño de letra -> 40

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

Cambiaremos algunas propiedades del nuevo componente Pelota:

ColorDePintura -> Blanco

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

Dirección -> 30

(Para definir la dirección de la pelota)

Radio -> 8

(Para cambiar tamaño a la pelota)

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

PROGRAMACIÓN DE EVENTOS.

Inicializa la Variable Puntos a cero:

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

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)

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

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

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

Pruébalo en tu móvil:

Tarea Semana 5

Productos y actividades solicitadas en clase:

T01.C2 Participación activa en clase
T02.C2 Ejercicio de Pensamiento computacional con las especificaciones solicitadas.

Productos DE TAREA A ENTREGAR:

T03.C2 Enviar al profesor vía correo electrónico las respuestas del Insumo6.doc

Descargar

TIC4_Corte6_Insumo6.docx>>

T04.C3 Comentario de la Lectura05 en Facebook