07 - La bomba

THE BOMB!

THE BOMB

¡REACCIONA RÁPIDO!

¡Cuidado! El merge cube se ha convertido en una bomba a punto de estallar. Sigue las instrucciones en la pantalla de la cara superior y evita la explosión. Si te equivocas, ¡kaboom!! Usa la aplicación CoSpaces en tu 📱smartphone, para visualizar el proyecto.

+PROBAR

¡prepárate para crear TU PROPIA VERSIÓN!

Índice

SELECCIONA LA MISIÓN

03 - Las palancas

01 - Las tareas

04 - El teclado

02 - Los cables

THE BOMB

01

LAS TAREAS

¿QUÉ SIGUE?

ESCRIBE UNA LISTA DE TAREAS Y MUESTRA UNA AL AZAR

THE BOMB

¿CÓMO FUNCIONA?

En este juego, el Merge Cube tiene 6 caras, las cuales tienen las siguientes funcionalidades:

• Cara 1: Muestra las tareas a realizar y el tiempo restante.
• Cara 2 y 3: Muestra cables de varios colores que hay que desconectar.
• Cara 4 y 5: Tiene palancas que hay que activar.
• Cara 6: Un teclado con números para introducir un código de 3 dígitos.

Curioso...

the bomb

¡A cREAR!

MISIÓN 1:DISEÑA LA pantalla

Ingresa al proyecto pre-diseñado

+ EJEMPLO

Diseña la cara superior a modo de pantalla

the bomb

Funciones globales

Las funciones en programación pueden ser globales o locales, y se diferencian en su alcance y accesibilidad en el código.

FUNCIONES LOCALES

FUNCIONES GLOBLALES

Pueden ser accedidas unicamente desde el script en el que fueron creadas

Pueden ser accedidas desde cualquier script del programa

+ ¿funciones?

un nuevo tipo de estructura

the bomb

timer ygame over

2. Crea la función "gameOver"

Programa un temporizador de al menos 90 segundos, el cual muestre un mensaje de "GAME OVER" cuando finalice.

3. Agrega efectos

1. Crea un script para el timer

Tic, tac, tu tiempo se acaba...

the bomb

NUEVO CONCEPTO

Una lista es una estructura de datos que permite almacenar y organizar elementos de manera secuencial. También se conoce como array o arreglo.

Las listas son mutables, lo que significa que puedes modificar, añadir o eliminar elementos después de haber creado la lista.

Lista de útiles

Tijeras

PEGAMENTO

La longitud de una lista puede cambiar dinámicamente, es decir, puedes agregar o quitar elementos.

LÁPIZ

Cada elemento tiene una posición única en la lista. La posición o índice generalmente comienza desde cero.

GOMA DE BORRAR

Elemento

Índice

Se puede acceder a elementos individuales en una lista utilizando su índice.

Para crear una lista, necesitaremos crear una variable primero.

LAS LISTAS

the bomb

TAREA ALEATORIa

1. Crea una lista de tareas

2. Obtén un item de la lista

Crea una lista de al menos cuatro tareas y asigna una de forma aleatoria al jugador para comenzar el juego.

3. Muestra un item al azar

tres pasos para lograr un objetivo

THE BOMB

02

Los cables

Sigue las instrucciones y desconecta los cables correctos

PERFECCIONA TU CONOCIMIENTO SOBRE LAS LISTAS

the bomb

¡A cREAR!

MISIÓN 2:DISEÑA LAs CARA 2 y 3

+ ideas

+ EJEMPLO

Diseña dos caras con al menos cinco modelos a clicar c/u

the bomb

listandolos cables

1. Una breve explicación

2. Lista los cables

Utiliza el poder de las listas para determinar cuáles son los cables que debes desconectar y termina el juego si el jugador se equivoca.

3. Detecta la activación

4. Verifica el cable

NO TE EQUIVOQUES

the bomb

¿Y CÓMOLO PRUEBO?

5. Llama a la función

El código creado hasta ahora está contenido dentro de una función, pero ésta no ha sido llamada en ningún momento. Entonces, ¿Qué debemos hacer?

6. Crea condiciones

the bomb

8. Modifica la función

7. Conoce los parámetros

¡aún Se puede mejorar!

9. Utiliza el parámetro

La función "verificarCables" funciona bien, pero podemos agregarle mejoras, como que sea capaz de detectar cables de otros colores. Mira cómo conseguirlo.

11. Una nueva tarea

10. Cuenta los cables

THE BOMB

03

Las palancas

¡Es tu turno de practicar lo aprendido!

DISEÑA Y PROGRAMA LAS CARAS 4 Y 5

the bomb

¡A cREAR!

MISIÓN 3:DISEÑA LAs CARA 4 y 5

+ ideas

Diseña dos caras con al menos cinco modelos a clicar c/u

THE BOMB

Palancas

Cables

RE-UTILICEMOS CÓDIGO

La lógica detrás de las palancas es básicamente la misma que la de los cables, así que relájate y re-aprovecha tu esfuerzo de la clase anterior:

• Crea un nuevo scprit llamado "palancas".
• Copia el código del script "cables" y pégalo en el nuevo script.
• Modifica los datos necesarios.

Sigue estos pasos

LA VERIFICACIÓN DE LAS PALANCAS

THE BOMB

04

el teclado

¿YA LO VISTE?

DISEÑA Y PROGRAMA LA ÚLTIMA DE LAS CARAS

the bomb

¡A cREAR!

MISIÓN 4:DISEÑA LA CARA 6

+ ¿Cómo accedo?

En la cara del fondo del Merge Cube hay un teclado prediseñado.

the bomb

EL TECLADO

¡Más listas!

Es momento de enlistar los botones del teclado y detectar cuando han sido presionados.

• Crea un nuevo script que contenga una lista llamada "números", asigna sólo los modelos de los botones de números.
• Recorre la lista y comprueba si han sido clicados.

ANÁLISIS DE LOS COMPONENTES

the bomb

MOSTRANDO EL CÓDIGO

1. Establece variables

2. Crea condiciones

¿Cómo visualizamos los dígitos que hemos presionado? Crea una programación que modifique el texto de "codedisplay1" cada vez que presionas un botón del teclado.

3. La tecla "delete"

4. La tecla "ok"

ya casi terminas

the bomb

¡HAS GANADO!

¿Cómo saber si has ganado?Pues si has completado todas las tareas. Modifica el código de la función "newTask" y diseña una pantalla de "you win!".

¡LA BOMBA NO HA EXPLOTADO!

the bomb

ENHORABUENA¡has llegado al final del proyecto!

¡Eso ha sido todo por hoy!

Recorrer una lista.

Recorrer una lista significa repasar cada uno de sus elementos y verificar su estado. En esta ocasión, recorreremos la lista "cables" para verificar si uno de sus elementos fue clicado.

2. Verifica la activación de un elemento de la lista

1. Agrega un bloque "siempre" dentro de la función "verificarCables" y dentro de este coloca un bloque "para cada elemento in cables"

El bloque "elemento" lo obtienes de la categoría "variables" e indica cada uno de los elementos de la lista que se está recorriendo.

Con esta combinación de bloques, repasarás la lista "cables" constantemente.

¡Una función global!

Para tener un código organizado, crearemos un script para cada sección del cubo y utilizaremos funciones globales para garantizar la comunicación entre los distintos scripts.

3. Asigna el valor de la variable "cable" como una lista, clica sobre el icono de la ruedita y agrega cada uno de los modelo de los cables.

1. Crea un nuevo script y llámalo "Cables", crea una nueva función llamada "verificarCables" y activa la opción "Esta escena está disponible en todos los scripts"

Añadir posición

2. Dentro de la función, crea una variable llamada "cables"

4. Repite los pasos 2 y 3 y crea una lista con sólo los modelos correctos.

¿Sólo cables?

Aunque el ejemplo muestra cables, puedes innovar y colocar otro tipo de dispositivos, como por ejemplo:

• Botones
• Pokémons explosivos.
• Otros...

Activa la opción "Utilizar en el CoBlocks" todos los modelos o imágenes que agregues.

Primero, una explicación

Para estas dos caras, nuestra tarea será desactivar (clicar), sólo los modelos de un tipo o color específico (cables amarillo, cables rojos...), por lo que es importante diferenciar entre los cables correcto e incorrectos. Para conseguirlo, seguiremos los siguientes pasos:

1. Haremos dos listas:
1. Una lista incluiremos todos los cables.
2. Otra con sólo los cables correctos.

3. Verificaremos si el cable clicado pertenece a la lista "cablesCorrectos":

Si cableClicado pertenece a CablesCorrectos:

Desactivamos el cable y lo sacamos de la lista CableCorrectos.

2. Detectaremos la activación de los cables y verificaremos si ese cable se encuentra en la lista de cables correctos.

Si no:

Llamamos a la función "gameOver"

¿Cuándo?

La función "verificarCables", debe ser llamada únicamente cuando la tarea relacionada aparezca en la cara superior, así que deberíamos verificar el valor de la variable "current_task" y decidir si llamamos a la función o no.

2. Crea una condición que verifique si la variable "current_task" es igual a la tarea de la lista "list_of_tasks" que pide que desconectes los cables.

1. Agrega un bloque "si, además", dentro del script "tareas".

Puedes copiar el bloque con el nombre de la tarea directo de la lista de tareas y pegarlo en el comparador

Llama a la función si la condición se cumple

Asegúrate de agregar el bloque "si, además"

¿Pertenece?

Al estar recorriendo la lista de todos los cables, podríamos haber clicado cualquiera, correcto o incorrecto, por lo que es necesario verificar si el cable clicado está en la lista de los correctos o no.

2. Si el elemento está contenido en la lista de cables correctos, desaparécelo de la escena cambiando su opacidad y elimínalo de la lista de cables correctos.

1. Para verificar si un elemento pertenece a una lista, necesitaremos un bloque "si, además", combinado con el bloque "cables contiene ...." y la variable "elemento"

Combina estos bloques para borrar el elemento de la lista

De lo contrario, llama a la función "gameOver".

Con esto nos aseguramos de comparar el modelo correcto.

¿Cómo hacerlo?

Si decidiste hacer cables, utiliza la figura tridimensional "torus", de la sección "construcción" del catálogo y:

• Modifica y adapta su tamaño.
• Colócalo en la cara correspondiente.
• Asegúrate de adjuntarlo y renombrarlo correctamente.

Elige una tarea al azar

Modifica la declaración de la variable "currentTask" para que se elija un item aleatorio de 0 a el número de tareas -1. Encuentra este bloque en "operadores"

Coloca 0 y no 1, ya que las listas arrancan desde 0.

¿Por qué una función?

El fin del juego, con todo lo que conlleva, será una un fragmento de código que se usará en distintas ocasiones a lo largo del desarrollo del juego, por lo que lo haremos a través de una función "global":

1. Crea un nuevo script llamado "gameOver".
2. Crea una función llamada "gameOver" y activa la opción "Esta escena está disponible en todos los scripts", de modo que podamos llamar a esta función desde cualquiera de los script de nuestro proyecto.

3. Agrega el bloque "reiniciar escena" dentro de la función.

4. Agrega el bloque de llamada en el script del timer.

¿Sólo palancas?

Aunque el ejemplo muestra palancas, puedes innovar y colocar otro tipo de dispositivos, como por ejemplo:

• Botones
• Imágenes
• Bloques de TNT de Minecraft...

Activa la opción "Utilizar en el CoBlocks" todos los modelos o imágenes que agregues.

¿Cómo acceder?

Desbloquea y mueve el Merge Cube tal como se muestra en el vídeo.

Si tus diseños no se mueven junto al cubo, asegúrate de adjuntarlos para que todo quede perfecto.

Analiza la situación actual

Asigna el valor del número presionado a cada variable, según corresponda. Sigue esta lógica:

El código resultante sería el siguiente:

Si el dígito1 es igual a "-", entonces

Dígito1 = elemento presionado

Sino, si el dígito2 es igual a "-", entonces

Dígito2 = elemento presionado

asigna el nombre del elemento

Sino, entonces

Dígito3 = elemento presionado

Lo que se traduce en verificar el contenido de las variables, si se detecta que la primera de ellas contiene un "-", significa que no hay número registrado todavía y procede a asignársele el valor del elemento clicado.

¡Las variables evolucionan!

Hasta ahora, hemos utilizado las variables para contar o tomar decisiones, esta vez funcionarán para registrar la lista de posibles tareas. Crea una lista siguiendo estos pasos:

1. Ingresa a CoBlocks y crea un nuevo script.
2. Crea una variable llamada "tasksList".
3. Asígnale como valor el bloque "Crear lista", de la categoría "datos"
4. Clica el icono en forma de ruedita y selecciona la opción "Añadir posición".
5. Agrega el bloque "ABC" de la categoría "Datos" y escribe la primera tarea.

Añadir posición

Repite los pasos 4 y 5 hasta tener una lista con al menos cuatro tareas.

Llama a la nueva función

Regresa al script "tareas" y programa la llamada a la nueva función.

2. Crea las condiciones correctas y llama la función enviando el parámetro del color.

1. Añade más condiciones al bloque "si"

Dale más emoción

Agrega efectos especiales como:

2. Un mensaje de GAME OVER:

1. Fuego o humo que aparezca tras la explosión:

Incorpora este bloque a la función para mostrar un panel de información

3. Efectos de sonido:

3. Establece la opacidad del modelo al 100% dentro de la función

Descarga audios de pixabay.com

2. Establece su opacidad a 0%

Incorpora este bloque a la función para reproducir el sonido

1. Dirígete a "construcción" y agrega un modelo de fuego o humo

¡Crea un nuevo script!

Para modular, es decir, dividir inteligentemente nuestro proyecto, haremos que la funcionalidad de las distintas caras se ubiquen en funciones creadas en scripts independientes del resto. Sigue estos pasos para avanzar:

Modifica el nombre de la función, el parámetro, las variables y listas de modelos.

1. Crea un nuevo script y llámalo "palancas".

2. Copia la función "verificarcables" y pégala en el script "palancas"

Valor del contador

¿Cuál dígito?

La parte del código que borra los dígitos presionados debe verificar el valor de las variables e identificar cuál es la última que ha cambiado su valor por un número, para así reemplazarla por un guion.

Si los dígitos 2 y 3 tienen como valor "-", quiere decir que el último dígito modificado fue el 1

Por lo que asignamos el valor "-" al dígito 1

Si sólo el dígito 3 tiene cómo valor "-", quiere decir que el último dígito modificado fue el 2.

Por lo que asignamos el valor "-" al dígito 2

S ninguno de los dígitos tiene asignado el valor "-", significa que el último dígito modificado fue el 3

Por lo que asignamos el valor "-" al dígito 3

¿Cómo y dónde?

Sabemos que toda función tiene dos bloques: el de declaración (el contenedor del código) y el de llamada (el que ejecuta el código), y que esta no funcionará a menos que hagamos la llamada. Pero, ¿cómo y donde llamamos a la función "verificarCables"?

1. ¿Recuerdas el script que muestra tareas al azar? Ingresa a él y coloca el bloque de llamada al final de todo.
2. Prueba la codificación y verifica que los cables desaparezcan y la llamada a la función "gameOver" funcione.

Una pequeña modificación...

Si queremos volver a obtener una nueva tarea aleatoria, debemos regresar al script tareas y hacer estas modificaciones:

3. Llama a la función en el script "tareas".

1. Crea una nueva función global llamada "newTask"

Activaesta opción

Clic derecho

4. Llama a la función dentro de la condición del script "verificarCables".

2. Coloca todos los bloques del script dentro de la nueva función.

Clic para ver el resultado

Parámetros, inputs o entradas

En programación, los parámetros son variables que se utilizan para pasar información a la función cuando esta es llamada o invocada. Los parámetros permiten que una función acepte datos externos y los utilice en su lógica interna. Estos valores externos se denominan argumentos y son proporcionados cuando la función es llamada.

Cuando defines una función, puedes especificar uno o más parámetros. Estos actúan como nombres de variable dentro de la función y representan los valores que se esperan recibir al llamar a la función.

Definición de la función

nombre del parámetro a enviar

Llamada a la función

valor del parámetro recibido

¿Por qué crear funciones?

Crear funciones en el código tiene varias ventajas que contribuyen a la eficiencia, claridad y mantenibilidad del programa.

• Permiten encapsular un conjunto de instrucciones relacionadas en un bloque único. Esto facilita la reutilización del código en diferentes partes del programa, evitando la duplicación.
• La creación de funciones ayuda a dividir el código en componentes más pequeños y manejables. Esto mejora la claridad y la legibilidad del código al reducir la complejidad y facilitar la comprensión de la lógica del programa.
• Las funciones permiten segmentar el código en bloques lógicos, lo que facilita la identificación y corrección de errores. Además, si es necesario realizar cambios, se puede hacer en una función sin afectar otras partes del programa.

Enviar, recibir y emplear parámetros

Envía el valor del parámetro en el bloque de llamada de la función y emplealo para tomar decisiones en la declaración.

3. Modifica la función "verificarCables" para crear una lista "cablesCorrectos" de acuerdo al parámetro.

1. Modifica el bloque de llamada y agrega el valor del parámetro.

Condición que verifica el valor del parámetro

2. Modifica las condiciones del script "tareas" y llama a la función con el parámetro adecuado.

Si el parámetro es "rojo", la lista "cablesCorrectos", contendrá sólo los cables rojos

"Tarea: "Desconecta los cables ROJOS"

Parámetro: Rojo

"Tarea: "Desconecta los cables AZULES"

Parámetro: Azul

Sino, la lista "cablesCorrectos, contendá sólo los cables azules.

Obtén y muestra un item de la lista

Para obtener un item de la lista "tasksList" sigue estos pasos:

• Crea una variable llamada "currentTask" y asígnale como valor inicial el bloque "item 0 de taskList" de la categoría "Datos".
• Muestra el valor de la variable en el texto "tasksText" con el bloque "Establecer texto de..." de la categoría "Acciones" y el bloque con el nombre de la variable..

¿Es correcto?

¿Cómo verificar si los dígitos ingresados por el usuario son correctos y coinciden con el valor que indica la tarea? ¡Enviando el valor esperado a través de parámetros!... Convierte tu código en una función, llámala desde el script de tareas y envía parámetros.

4. Verifica el código

1. Crea una función global llamada "teclado" que incluya un parámetro llamado "código"

Detecta la activación del botón

Compara el código (parámetro) con la cadena conformada por los tres dígitos

2. Coloca todo tu código dentro de la función.

Si son iguales, muestra un pánel indicando que es correcto.

Y llama a la función "nueva tarea"

3. Llama a la función desde el script de tareas, enviando el código como parámetro.

Sino, llama a la función "gameOver"

Ingresa a CoSpaces

Ubica el proyecto "The bomb" y diseña la pantalla donde se desplegarán las tareas en la cara superior del cubo, agregando lo siguiente:

• Decoraciones.
• Un texto para las tareas llamado "tasksText".
• Un texto para el tiempo llamado: "timeText"

Activa la opción "Utilizar en el CoBlocks" de ambos textos.

Cómo contabilizar el tiempo

El tiempo se medirá en segundos, se mostrará en la cara superior y desencadenará una animación de explosión al terminar. Prográmalo de la siguiente manera:

1. Ingresa a CoBlocks y crea un script llamado "timer".
2. Crea una variable llamada "time" y asígnale como valor inicial la cantidad de segundos que consideres necesaria, por ejemplo, 90.
3. Agrega un bloque "repetir", que se ejecute la misma cantidad de veces que de segundos, dentro del cual:
1. Muestras el valor de la variable en el texto que agregaste antes (timeText).
2. Cambias el valor de la variable por -1.
3. Haces una pausa de un segundo.

Mismo valor

El texto mostrará el valor de la variable

No olvides hacer una pausa

¿Cómo continuamos?

Es momento de verificar que todos los cables de la lista "cablesCorrectos", han sido clicados y llamar a la siguiente tarea.

Dentro del bloque "siempre", crea una condición que verifique si el valor del contador es igual a la cantidad de cables a clicar.

Para verificar la cantidad de cables clicados, usaremos un contador, es decir, una variable que se incrementa con cada cable clicado.

Declara la variable "contadorDeCables" antes del bloque "siempre" y dale un valor inicial de 0

Cantidad de cables a clicar

Valor del contador

Cambia el valor del contador por 1

Agrega un parámetro a la función

En la función "verificarCables", usaremos los parámetros para enviar el valor del color del cable a desconectar.

Clica la opción "Añadir entrada" y agrega un parámetro con el nombre "color" y el tipo "cadena" (texto). Clica en "Actualización"

Modifica la función haciendo clic derecho sobre el bloque de declaración y selecciona "Editar bloque"

Clic derecho

Tipo de parámetro

Selecciona "editar bloque"

Nombre de parámetro

Divide y vencerás

El código que debemos introducir en esta tarea está compuesto por tres dígitos. Para poder componer un número similar, armaremos una cadena de caracteres formada por tres variables:

1. Crea tres variables, cada una almacenará uno de los dígitos que conforman el código:

2. Crea una cadena de caracteres compuesta por los tres dígitos y muéstrala en el texto "displayText1"

Asígna como valor inicial un guión, de modo que en la pantalla se muestre: "---"