Sesión 1: el pensamiento computacional – Lope González Vázquez

Lope González Vázquez > ESO y Bachillerato > Curso avanzado de pensamiento computacional, robótica e internet de las cosas > Sesión 1: el pensamiento computacional

Currículo: aquí encontrarás el desarrollo detallado de los contenidos que forman parte de la primera sesión del Curso avanzado de pensamiento computacional, robótica e internet de las cosas, impartido por el CEP de Huelva – Isla Cristina.

Duración: 3 horas.

Objetivos: el objetivo de esta sesión es practicar el pensamiento computacional en la programación de videojuegos de complejidad creciente.

1. Introducción

Ya tenemos algo de experiencia aplicando el pensamiento computacional. Recordemos que el pensamiento computacional, aunque a veces lo sustanciamos programando, no es saber programar. Supone resolver los problemas pensando de forma lógica, analítica y estructurada aplicando estos cuatro procesos mentales:

Descomposición: romper un problema complejo en partes pequeñas que podamos manejar con más facilidad.

Reconocimiento de patrones: identificar similitudes o tendencias dentro o entre problemas.

Abstracción: filtrar lo irrelevante y centrarse solo en la información relevante.

Algoritmos: crear una serie de pasos finitos y ordenados para resolver el problema.

Por todo lo anterior nos viene tan bien la programación, porque es justo el proceso analítico que realizamos cada vez que construimos un programa.

En el curso anterior vimos un uso avanzado de Scratch programando un videojuego clásico –Space Invaders ↗️- que incluía multitud de conceptos para que nuestros alumnos pudieran avanzar hasta el nivel más alto de esa herramienta.

Sin embargo, Scratch tiene su techo y es posible que en algún momento sientas que se te queda corto. Es verdad que Scratch es una herramienta maravillosa para aprender lógica básica, pero como motor de videojuegos (que es lo que moviliza de verdad a los alumnos) es bastante limitado, por eso es buena idea avanzar a herramientas un poco más completas como Makecode Arcade ↗️.

2. Makecode Arcade

Dar el salto a MakeCode Arcade es más que cambiar de plataforma; es pasar de “hacer animaciones que parecen juegos” a desarrollar videojuegos con una arquitectura semi profesional. Lo que hace a esta plataforma tan interesante para todas las edades de nuestro sistema educativo es la incorporación de estos elementos:

Tiene un motor de física integrado. Puedes definir que un elemento de la pantalla sea de tipo “Jugador” y otro “Pared”, y el sistema gestiona las colisiones y la gravedad de forma nativa.
Incluye un editor de mapas de celdas (Tilemaps o escenarios). Puedes dibujar niveles gigantescos, definir qué paredes son sólidas y gestionar cámaras que siguen al jugador de forma automática. Es arquitectura pura de 8 bits.
Tiene una vista dual de bloque/código. Puedes ver tu juego en bloques y, con un clic, convertirlo a JavaScript o Python. Esto permite aprender sintaxis real viendo cómo tus bloques se transforman en líneas de código profesionales.
Está diseñado para el hardware. Puedes descargar tu código en consolas retro baratas (como la Meowbit, PyBadge o RetroArcade). Ver tu código funcionando en un dispositivo físico que llevas en el bolsillo cambia por completo la percepción de lo que es programar.

Vamos a iniciar nuestro camino con Makecode Arcade programando un videojuego muy sencillo para ir familiarizándonos con la herramienta.

2.1. Videojuego nivel 1 🟨: Peach

El objetivo de este primer programa es conocer los elementos básicos que nos permiten crear algo funcional que podamos ir extendiendo poco a poco.

2.1.1. El encargo

Nuestro videojuego consta de una princesa llamada Peach que tiene que recoger el mayor número de comida posible para su reino. Tiene 60s para lograr la mayor puntuación. Cada comida que recoja suma un punto. La comida aparecerá aleatoriamente cada segundo y desaparecerá cuando la princesa la coja.

2.1.2. Aplicando el pensamiento computacional

Para resolver este encargo no debemos empezar directamente por los bloques. Primero necesitamos aplicar pensamiento computacional, es decir, analizar el problema de forma ordenada para convertir una idea general —”un personaje recoge comida en un videojuego”— en una solución programable.

Descomposición

La descomposición consiste en dividir el videojuego en problemas más pequeños. Si intentamos programarlo todo a la vez, será difícil saber por dónde empezar; en cambio, si lo separamos en partes, cada una se vuelve más manejable.

En este caso, podemos dividir el juego en varias tareas:

crear el personaje principal,
preparar el escenario,
permitir que el jugador mueva a Peach,
establecer una cuenta atrás de 60 segundos,
hacer que aparezca comida cada cierto tiempo,
colocar esa comida en posiciones aleatorias,
detectar cuándo Peach toca un alimento,
eliminar la comida recogida y aumentar la puntuación.

Cada una de esas tareas se podrá resolver después con uno o varios bloques concretos.

Reconocimiento de patrones

El reconocimiento de patrones nos ayuda a detectar acciones que se repiten o situaciones que siguen una misma lógica. En nuestro videojuego hay varios patrones claros.

La comida aparece cada segundo, así que no necesitamos programar manualmente cada aparición. Basta con definir una regla repetitiva: cada 1000 milisegundos se crea un nuevo alimento.
También se repite el comportamiento de cada comida: aparece, queda en pantalla, puede ser tocada por Peach, desaparece y suma un punto. Aunque haya muchos donuts en la partida, todos siguen el mismo patrón.
También encontramos un patrón en la posición de aparición: no sabemos exactamente dónde saldrá cada alimento, pero sí sabemos que siempre debe aparecer dentro de los límites de la pantalla. Por eso usaremos valores aleatorios dentro de un rango válido.

Abstracción

La abstracción consiste en quedarse con lo importante e ignorar detalles que no afectan a la lógica del programa. Para programar este juego no necesitamos pensar en toda la historia del reino de Peach, ni en el tipo exacto de comida, ni en los detalles decorativos del escenario. Lo más importante es identificar los elementos que intervienen en la mecánica.

Nuestro modelo del juego puede reducirse a cuatro elementos principales:

una protagonista controlada por el jugador,
una comida que aparece en pantalla,
un temporizador que limita la partida,
y una puntuación que aumenta cuando se recoge comida.

Esa simplificación nos permite convertir una idea narrativa en una estructura programable.

Diseño de algoritmos

Una vez descompuesto el problema, reconocidos los patrones y abstraídos los elementos importantes, podemos expresar la solución como un algoritmo. No escribiremos todavía el programa completo, pero sí el razonamiento que después trasladaremos a bloques.

El algoritmo general sería:

Crear a Peach como personaje principal.
Elegir el fondo del escenario.
Activar el movimiento del personaje con los botones.
Iniciar una cuenta atrás de 60 segundos.
Cada segundo, crear un alimento.
Colocar ese alimento en una posición aleatoria de la pantalla.
Comprobar si Peach toca algún alimento.
Si lo toca, eliminar ese alimento.
Sumar 1 punto al marcador.
Repetir el proceso hasta que termine el tiempo.

Con este análisis previo, programar deja de ser una sucesión de bloques colocados por intuición. Ahora sabemos qué problema estamos resolviendo, qué partes tiene, qué comportamientos se repiten, qué elementos son realmente importantes y qué pasos debe seguir el videojuego para funcionar.

A partir de aquí, ya podemos empezar el desarrollo en MakeCode Arcade con una idea clara de la solución.

Así pues, comencemos a desarrollar cada uno de los pasos del algoritmo.

2.1.3. Programando el videojuego

Necesitamos una protagonista para nuestro videojuego, así que vamos a crear una variable llamada PROTAGONISTA y al mismo tiempo le vamos a asignar el aspecto que va a tener. Para ello seleccionamos este objeto (sprite en el argot de los videojuegos).

Así creamos la variable y le damos el nombre que queremos:

Pinchando sobre el recuadro gris podemos dibujar nuestro personaje o elegirlo de la Galería disponible que ofrece la herramienta:

Ahora vamos a cambiar el color de fondo seleccionando este bloque de la categoría Escena:

Simplemente pulsamos en el color y elegimos el que más nos guste:

Tenemos un escenario y un personaje. Lo que debemos hacer ahora es mover nuestro personaje.

En esta herramienta, y a diferencia de Scratch, no tenemos que programar el movimiento en cada dirección usando cuatro teclas distintas, ya que es una funcionalidad que ya viene recogida por defecto.

Seleccionamos este bloque de la categoría Mando:

Y simplemente asociamos el personaje que queremos que se mueva con los botones. Desde este momento ya puedes usar los cursores para mover al personaje, o incluso las teclas W A S D si prefieres la parte izquierda del teclado. Todo esto con un único bloque.

Para limitar el tiempo de nuestra partida también usaremos un único bloque, este:

Ya que su funcionamiento es precisamente el que buscamos, que al finalizar la cuenta atrás, nuestro juego termine.

¿Cómo hacemos para que aparezca en pantalla un DONUT cada segundo? Esto también es un bloque muy potente que ofrece la herramienta. De la categoría Juego, selecciona este bloque y cambia a 1000ms o 1s. Todo lo que coloquemos ahí dentro será ejecutado cada vez que pase un segundo de juego.

Como lo que queremos es que aparezca un DONUT, simplemente añadimos una variable con ese nombre, le asociamos un sprite de la galería y le decimos que es de tipo Comida. De esta manera, la lógica interna de la herramienta, entenderá que es un recurso que consumirá algún personaje y le asociará bloques compatibles.

Si dejamos el bloque como está, siempre aparecerá en el mismo sitio, por lo que después de cada actualización del juego, cuando aparezca un DONUT lo vamos a colocar en una posición concreta:

Para hacer que esa posición sea aleatoria, nos vamos a apoyar en el bloque de matemáticas que escoge al azar entre dos números: la posición X de 0 a 160 (que es el ancho máximo de pantalla) y la posición Y de 0 a 120 (que es el alto máximo de pantalla).

Como podrás comprobar en el simulador, ahora sí que aparece la comida de manera aleatoria por la pantalla.

Lo que ocurre ahora es que nuestro personaje se mueve y atraviesa la comida, tenemos que hacer que cada vez que alcance un DONUT el programa “lo sepa” para poder hacer que esa comida desaparezca y también para sumarnos 1 punto.

Con este bloque hacemos que el programa detecte que nuestro personaje ha alcanzado una comida:

Es importante que no cambies sprite y otherSprite porque así es el funcionamiento del bloque. Lo único que tienes que cambiar es el tipo del sprite; en el primer caso es Player y en el segundo Food. De esta manera, le estás diciendo al motor del juego: cuando un objeto de tipo jugador toque a uno de tipo comida, haz [lo que tú le pongas].

En nuestro caso le pondremos que destruya al sprite relacionado con la comida:

Y también, que aumente los puntos en 1.

Nuestro primer videojuego estaría terminado.

2.1.4. Retos adicionales

Vamos a intentar modificar lo que ya tenemos para aportar un poco más de funcionalidad.

Reto 1. Aparecen dos tipos de comida: hasta ahora Peach solo recoge donuts. Vamos a hacer el reino un poco más variado. Además de donuts, debe aparecer otro alimento distinto (por ejemplo una manzana, una pizza o una fresa) en posiciones aleatorias.

Reto 2. La comida aparece cada vez más rápido: Ahora Peach ya domina el reino… así que vamos a subir un poco la dificultad. Durante los primeros segundos la comida aparece cada segundo, pero después debe empezar a aparecer más rápido.

Por ejemplo:

Del segundo 0 al 20 → cada 1000 ms.
Del segundo 20 al 40 → cada 700 ms.
Del segundo 40 al 60 → cada 400 ms.

Reto 3. Algunos alimentos valen más puntos: No toda la comida tiene el mismo valor. Hacer que algunos alimentos normales sigan sumando 1 punto, pero crear un alimento especial (por ejemplo una tarta o una corona real) que sume 3 puntos cuando Peach lo recoja.

2.2. Videojuego nivel 2 🟧: Campo de Asteroides

En el ejercicio anterior desarrollamos un videojuego bastante sencillo en el que un personaje debía recoger comida antes de que terminara el tiempo. Ahora vamos a subir un poco el nivel.

2.2.1. El encargo

En esta ocasión nos han encargado desarrollar un videojuego arcade de naves espaciales llamado Campo de Asteroides. La mecánica del juego consiste en controlar una nave espacial que debe sobrevivir en mitad de un campo lleno de asteroides. Los asteroides aparecen continuamente desde la parte derecha de la pantalla y avanzan hacia la izquierda a distintas velocidades. Nuestra nave podrá moverse libremente por el escenario y disparar proyectiles para destruirlos. Cada asteroide destruido nos dará un punto. Sin embargo, si un asteroide golpea nuestra nave, perderemos una vida. Empezamos con tres vidas, y cuando las perdamos todas, la partida terminará. Además, el escenario estará decorado con estrellas que cruzan el fondo para aumentar la sensación de movimiento espacial. Todo esto aparece descrito y posteriormente implementado en el tutorial del proyecto.

2.2.2. Aplicando el pensamiento computacional

Igual que hicimos en el proyecto anterior, antes de empezar a colocar bloques en Microsoft MakeCode Arcade, vamos a pensar como desarrolladores. No empezamos programando: primero pensamos. Y para eso vamos a aplicar las cuatro habilidades fundamentales del pensamiento computacional.

Descomposición

La descomposición consiste en dividir un problema complejo en partes más pequeñas.

Si intentáramos construir este videojuego de una sola vez, sería fácil perderse. Por eso, lo primero que hacemos, una vez más, es dividir el problema en tareas independientes.

En este videojuego podemos identificar claramente varios subproblemas:

Primero necesitamos crear la nave del jugador y permitir que se mueva con los controles.
Después debemos permitir que dispare proyectiles.
Más tarde tendremos que generar asteroides enemigos, hacer que aparezcan desde el margen derecho, situarlos en alturas aleatorias y hacer que se desplacen hacia la izquierda.
Después tendremos que programar qué ocurre cuando un proyectil golpea un asteroide y qué ocurre cuando un asteroide golpea a la nave.
También necesitaremos gestionar el marcador, el sistema de vidas y finalmente añadir elementos decorativos como estrellas de fondo que aporten dinamismo visual.

Ahora ya no tenemos por delante un videojuego complejo, sino una serie de problemas pequeños que son mucho más fáciles de resolver.

Reconocimiento de patrones

Una vez dividido el problema, debemos buscar comportamientos que se repiten.

En este videojuego aparecen muchos patrones.

Todos los asteroides comparten el mismo comportamiento: nacen en la parte derecha, aparecen a una altura aleatoria, avanzan hacia la izquierda y desaparecen al salir de la pantalla o al ser destruidos. Aunque aparezcan cientos de asteroides, todos siguen el mismo patrón.
También ocurre lo mismo con los proyectiles: cada vez que el jugador pulsa disparar, se crea un proyectil que sale desde la posición de la nave y avanza en línea recta.
Incluso las estrellas del fondo siguen un patrón repetitivo: aparecen periódicamente, avanzan hacia la izquierda y desaparecen al abandonar el escenario.

Detectar estos patrones nos permite programar reglas generales, en lugar de programar cada objeto de forma individual.

Abstracción

La abstracción consiste en identificar qué elementos son importantes para la lógica del programa e ignorar aquello que no afecta a su funcionamiento.

Por ejemplo, a nivel visual podemos decidir si nuestra nave es roja, azul o verde. Podemos elegir si el asteroide tiene una forma u otra. Podemos incluso cambiar el diseño de las estrellas. Sin embargo, nada de eso afecta realmente a la lógica del juego.

Lo importante desde el punto de vista computacional es identificar los tipos de objetos que existen y cómo interactúan:

Tenemos un objeto de tipo jugador, que es la nave.
Tenemos objetos de tipo proyectil, que son los disparos.
Tenemos objetos de tipo enemigo, que son los asteroides.
Y tenemos objetos de tipo fondo, que son las estrellas decorativas.

También identificamos variables importantes: la puntuación, el número de vidas y la velocidad de los enemigos.

Al abstraer el problema de esta forma, ya no “vemos” dibujos sino objetos que tienen propiedades y comportamientos, que es exactamente como piensa un motor de videojuegos.

Diseño de algoritmos

Después de analizar el problema, podemos definir una secuencia lógica de pasos para resolverlo.

Nuestro algoritmo general podría ser el siguiente:

Crear la nave del jugador y colocarla en pantalla.
Configurar su movimiento con los controles.
Inicializar el marcador a cero.
Inicializar el número de vidas a tres.
Esperar la pulsación del botón de disparo.
Cuando se dispare, crear un proyectil y hacerlo avanzar.
Cada cierto tiempo, crear un nuevo asteroide.
Asignar al asteroide una posición vertical aleatoria.
Asignar al asteroide una velocidad horizontal aleatoria.
Comprobar continuamente si un proyectil toca un asteroide.
Si ocurre, destruir ambos objetos y sumar un punto.
Comprobar continuamente si un asteroide toca la nave.
Si ocurre, destruir el asteroide y restar una vida.
Si las vidas llegan a cero, finalizar la partida.
Paralelamente, generar estrellas decorativas para el fondo.

Ahora sí tenemos una estrategia muy bien definida con pasos claramente marcados por orden. Sabemos cómo empezar y también cuándo terminamos.

Con este análisis completado, ya estamos preparados para empezar el desarrollo del videojuego.

2.2.3. Programando el videojuego

Bueno pues hagamos igual que antes. Ahora ya conoces donde están los bloques y cómo construir elementos gráficos, así que iremos un poco más rápido.

Empecemos por crear nuestro jugador protagonista, yo le he llamado Nave.

Vamos a hacer que el jugador pueda moverlo, como ya sabemos. Pero ahora, además, vamos a hacer que el movimiento sea más rápido “que tenga más nervio“. Para eso modificamos la velocidad x e y cada vez que se pulsa un botón.

Si rescatas el videojuego de Peach podrás comprobar cómo el protagonista podía desaparecer del escenario si lo movías más allá de la zona visible de juego. Para evitar eso con nuestra Nave usaremos un bloque que no le permite salir del área de juego:

Dejemos por ahora así, nuestro bloque principal que se ejecuta al iniciarse el juego (luego volveremos aquí para ajustar un par de cosas):

Hagamos ahora que nuestra Nave lance proyectiles cuando se pulse un botón:

El proyectil lo vamos a dibujar nosotros teniendo en cuenta que debe ser más pequeño que el resto de sprites:

Además, como el proyectil viaja en horizontal, hemos modificado su velocidad para que no se desplace verticalmente.

⚠️ Si te fijas, como la A ya está ocupada por la tecla de dirección Izquierda, la nave disparará cuando pulses la barra espaciadora.

Tenemos nuestra nave lista para destruir asteroides.

Vayamos con los asteroides.

Queremos que aparezca uno cada 500ms por lo que usaremos el bloque que ya conocemos:

Añadimos el sprite de nuestro asteroide (elegimos algo parecido de la galería) y lo configuramos como Enemigo.

Siguiendo las instrucciones del enunciado vamos a intentar conseguir que cada asteroide viaje a una velocidad aleatoria, pero no queremos que haya mucha diferencia entre ellos. Así que, crearemos una variable que estableceremos una velocidad por defecto de -50. Y lo colocaremos en el bloque de inicio para que tome el valor desde el principio:

↩️Volviendo a nuestro bloque que controla a los asteroides, vamos a decirle al asteroide que tome una velocidad aleatoria entre -50 (la que tiene por defecto) y -40. Así que combinamos los bloques de matemáticas para obtener:

Fíjate que como el asteroide se va a mover horizontalmente, no necesitará velocidad en el eje vertical (Y).

💡Como el asteroide se mueve siempre hacia la izquierda, necesitamos una velocidad negativa. Si se moviera a la derecha tendríamos que elegir una velocidad positiva.

Igualmente, debemos decirle desde dónde debe partir. Como esto también es aleatorio, crearemos este bloque que se entiende por sí solo:

Por último, usaremos un bloque adicional para que el asteroide se auto destruya cuando abandone el escenario (para no desbordar la memoria del programa):

Bueno, pues asteroide terminado.

Nuestros personajes están listos, ahora necesitamos programar sus interacciones.

Comencemos por la destrucción de un asteroide, que se producirá cuando el proyectil “toque” al asteroide:

Observa que primero destruimos al enemigo y después también destruimos al proyectil (con un efecto fuego que dura 100ms). Prueba distintos efectos y quédate con el que más te guste. Además, ganamos un punto.

De la misma manera programamos la pérdida de una vida, que se produce cuando el jugador “toca” al enemigo:

El único detalle que queda es proporcionarle 3 vidas al protagonista. Para hacerlo volvemos al bloque de inicio y configuramos el número de vidas, dejando el bloque inicial también completo:

La lógica principal de nuestro juego está terminada. Pero si revisamos el enunciado todavía nos quedaría un detalle más: decorar el fondo con estrellas que viajan por el escenario y con las que ningún otro objeto interactúa. Haremos que una de ellas aparezca cada 500ms y la otra cada 200ms:

Ahora sí, nuestro programa está listo.

2.2.4. Posibles extensiones

Genial, tienes un videojuego funcional.

Sin embargo, me pregunto: ¿serías capaz de implementar por tí mism@ alguna mejora del juego?

Vamos a comprobarlo. Te dejo 4 posibles modificaciones con las que podríamos mejorar el juego.

🫵 TE RETO A QUE LAS CONSIGAS TODAS🫵

Reto 1. Asteroides cada vez más peligrosos: cada vez que el jugador alcance 5 puntos, los asteroides deben moverse un poco más rápido.

Reto 2. Bonus de vida: cada cierto tiempo debe aparecer un objeto especial (por ejemplo, un corazón). Si la nave lo toca, gana una vida.

Reto 3. Asteroides gigantes: no todos los enemigos tienen por qué ser iguales. Algunos asteroides deben aparecer con un tamaño más grande y quitar 2 vidas en lugar de 1.

Reto 4. Disparo doble: queremos mejorar el armamento, así que cuando el jugador pulse disparar, deben salir dos proyectiles a la vez en lugar de uno (uno ligeramente por encima de la nave y otro ligeramente por debajo, o de la manera que te guste a tí).

2.3. Videojuego nivel 3 🟥: Mario

Como podrás comprender en una sesión de 3h no es posible llegar a exprimir todos los conceptos que ofrece una plataforma tan rica como Makecode Arcade.

Por ejemplo, es tremendamente interesante programar escenarios que son más grandes que la pantalla, para que el personaje se vaya desplazando por un mundo que previamente hemos programado pero que el jugador va descubriendo conforme va jugando: son los tilemaps. También es muy interesante programar laberintos o bloques prohibidos en los que el personaje choca, no los puede atravesar. O el bloque que nos permite hacer seguimiento de cámara al jugador en su movimiento a través del mundo que le hemos creado.

Todo lo anterior daría para un curso monográfico de programación de videojuegos, pero si quieres investigarlo y programarlo por tu cuenta, aquí te dejo un excelente ejemplo que puedes seguir: