Pensamiento computacional

App Inventor

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

Actividad de consolidación.

App Mentimeter

MENTIMETER.jpg

El  programa que realizaremos en esta sesión será el juego del "GATO".

 

De nueva cuenta, ingresa a http://appinventor.mit.edu

e inicia un nuevo proyecto. Ponle por nombre GATO.

gato.jpg

DISEÑO.

Inserta una disposición tabular desde la  Paleta y Disposición:

G01.png

Como es un juego de gato, hay que modificar la disposición a 3 columnas y 3 registros:

G02.png

Agrega un botón en cada una de las disposiciones tabulares, de tal forma que sean las 9 posiciones posibles en el juego:

G03.png

Con el fin de dejar preparado el juego, borra el texto de cada uno de los botones:

REEMPLAZO.jpg

Ahora en Screen, centra la disposición tabular creada tanto horizontal como verticalmente: 

G07.gif

Agrega un botón al que cambiarás el NOMBRE y el TEXTO llamándolo RESET. Desde Sensores agrega un Reloj y desde Interfaz de usuario, un Notificador.

 

NOTA: Estos dos últimos componentes agregados los verás abajo de la pantalla:

G08.gif

PROGRAMACIÓN DE EVENTOS

Agrega dos variables. Asigna el nombre de la primera como TURNO que nos servirá para que cada jugador vaya tomando su turno y, a la segunda variable, asígnale el nombre CASILLA que representará cada uno de los 9 botones agregados.

G09.gif

Inicializa la variable TURNO a 1 y la variable CASILLA a una lista vacía.

G10.gif

Desde Screen1 agrega Cuando Screen1.Inicializar.Ejecutar.

 

Desde la variable CASILLA carga la opción poner global.CASILLAS.to  y construye con construye una lista las opciones de las 9 casillas de nuestro juego:

g11.gif

Desde DisposiciónTabular1 agrega a la lista los 9 botones correspondientes:

G12.gif

Modifica el ancho de cada botón utilizando: 

Desde Control  la opción

para cada elemento en la lista.ejecutar 

combinándolo desde una opción que está hasta abajo

Cualquier componente -> Cualquier botón 

la opción

poner Botón.Alto.del componente.como 

De la variable CASILLA, inserta 

tomar Global CASILLLA y divide entre 3 el ancho de la pantalla para que los botones queden homogéneos.

Duplica este bloque para determinar el Ancho de las casillas. 

G13.gif

NOTA: esto que acabas de realizar es una forma muy eficiente de modificar las propiedades de varios elementos al mismo tiempo.

Utilizaremos el mismo truco anterior para modificar el Tamaño de letra de todas las casillas.

Este estará dividido entre 5 en lugar de 3.

De la misma forma será necesario activar (Habilitado) todos los elementos.

G14.gif

Crearemos un procedimiento RESET repitiendo algunos de los elementos de la pantalla inicializada y, habilitaremos la secuencia del botón RESET que agregamos a la pantalla de inicio:

G15.gif

A continuación programaremos la lógica del clic de cada uno de los botones, que será nuestro juego. Para ello es necesario cambiar la condición de cada botón activado (Habilitado = falso) con el fin de que ya no se pueda elegir. Como somos nosotros los que jugamos, le asignaremos una a nuestro juego. Quitamos de la lista ese botón para jugar y cambiamos el turno al jugador 2, o sea, la computadora.

Finalmente, agregaremos el procedimiento "clave" que momentáneamente solo quedará indicado y que contendrá toda la lógica del juego:

G16.gif

Este mismo código lo replicaremos en los botones restantes, solo ten cuidado en asignar el botón correspondiente en cada caso:

G17.gif

Ahora es necesario construir el módulo COMPROBAR.

Lo primero que habrá que hacer es validar si el turno ya le corresponde a la computadora.

Recuerda que determinamos que TURNO 1 somos nosotros y TURNO 2 es la computadora.

G18.jpg

El proceso de juego es:

1) Elegir al azar uno de los botones sobrantes, ya que nosotros hicimos la primera tirada

2) En la casilla seleccionada escribir la letra "O" que representará el círculo del juego

3) Deshabilitar la opción de elección posterior

4) Eliminar de la lista el botón que seleccionó la computadora

G19.jpg
G20.jpg

Finalmente, hay que agregar la condición de lo que sucedería cuando ya no hay casillas por elegir. De no agregar esto el programa generaría un error.

G21.jpg

Hasta este punto, si haces la prueba con lo ya programado verás que funciona correctamente, lo siguiente entonces es construir la lógica que permita jugar el gato correctamente y determinar el ganador.

Lo primero que haremos es modificar la condición SI - ENTONCES aprovechando las opciones de mutación que tiene app inventor y reacomodar los módulos que ya habíamos construido hacia la parte de abajo para que los módulos que agreguemos se ejecuten primero.

G22.jpg
G23.jpg

Ahora iremos barriendo las posibles combinaciones para ganar en el juego. 

La primera combinación es la de horizontal, línea superior:

horiz01.jpg

Los bloques que habrán de construirse deberán: obtener el texto de los 3 botones y unirlos en una sola cadena y comprobar que el texto unido es igual al texto "XXX" para determinar que hemos ganado. Utiliza la característica "mutante" del bloque unir para concatenar el texto de los 3 botones. Utiliza un notificador para mostrar el texto de que ganaste el juego.

G24.jpg

Necesitaremos en total 9 comprobaciones para determinar que hemos ganado.

 

8 corresponden al juego que estamos haciendo nosotros y una, al juego de la computadora.

 

Al finalizar cada una de estas comprobaciones y la notificación de que hemos ganado, será necesario volver a resetear el juego.

Utiliza la condición "mutante" del si para agregar las condiciones faltantes:

G26.jpg
G25.jpg

Con lo anterior determinamos las formas de ganar. Ahora necesitamos agregar de igual manera las 8 formas de perder, o dicho de otra forma, cuando la computadora nos gana. Para ello utilizaremos nuevamente la opción mutante de la app y copiar y pegar la misma secuencia de bloques como lo hicimos anteriormente, pero ahora en lugar de "XXX" con "OOO".

G27.jpg
G28.jpg

También hay que agregar la opción de empate:

G29.jpg

Finalmente, cambiaremos un poco el diseño de la pantalla ocultando la barra de estado y la barra de título:

G30.jpg
G31.jpg

Haz pruebas par ver como funciona.

Tarea Semana 8

Productos y actividades solicitadas en clase:

  • T17.C2 Participación activa en clase

  • T18.C2 Ejercicio de pensamiento computacional con las especificaciones solicitadas.

Productos DE TAREA A ENTREGAR:

  • T19.C2 Conclusiones del corte publicadas en Facebook

  • T20.C2 Autoevaluación del corte

  • T21.C2 Comentario del Capítulo 8 en Facebook