Aprendiendo a programar con peques usando DIABLO… digo CODE COMBAT

Aquí sí que podríamos usar el famoso lema "Serious Play" de Lego.

0
555
Imagen de portada del artículo sobre Code Combat, se muestra un mapa de su mazmorra y el logo
Imagen de portada del artículo sobre Code Combat, se muestra un mapa de su mazmorra y el logo

Índice de contenidos

  1. Introducción
  2. Requisitos
  3. Primeros pasos
  4. Desarrollo del juego
    1. Los niveles
    2. Las recompensas
    3. Los mundos
  5. Mi opinión
    1. Coste del juego
    2. Traducciones
    3. Autonomía
  6. Conclusión

1. Introducción

Esto surge el verano pasado (2023) cuando, paseando por Zarautz, vi una academia de programación orientada a niños: MindHub. He de decir que me encantó la idea. Entre las herramientas y tecnologías que usaban me encontré Scratch, Roblox, Wonder Workshop, Micro:bit, Tynker, MIT App inventor, Hopscotch… No eran pocas opciones y su programa parecía muy cuidado y bien diseñado.

Recordé que en su momento yo había empezado a programar con un par de años más que mi hijo (6). Desde luego estas herramientas no tienen nada que ver con las que yo usé en su momento. Yo empecé con GW-Basic, trabajando con strings… la frase «El cura de Alcañíz no tiene iglesia» se me grabó a fuego en la cabeza después de hacerle mil y una combinaciones, y he de confesar que en su momento me costaba entender la finalidad de estas transformaciones.

Es cierto que mi hijo ya llevaba todo el año viendo algunas cosas de lógica y secuencias en robótica (usan MRT Goma Brain de Logix5). Viendo que le gustaba, empecé a darle vueltas a como «picarle» con la programación.

El caso es que con el verano la cosa se quedó ahí, y no fue hasta octubre en la TRGCON donde retomamos el tema. Allí David Bonilla dió un taller de programación orientado a niños usando Cubetto. En ese momento me di cuenta de lo que quería, necesitaba algo que jugando le permitiese aprender algunos principios de programación, pero pensando más en el juego que en la programación en sí.

Sinceramente me flipó la facilidad con la que David les enseñó lo que era una función, cómo empezar a pensar en resolver «puzzles» y cómo esas bases se quedaron grabadas en su memoria.

Yo ya conocía por referencias alguna opción como Scratch, pero empecé a buscar alternativas por entender qué ofrecía cada una. «Googleando» di con algo diferente, Code Combat.

Desde el minuto uno me enganchó (sí, a mi), azares del destino, o en este caso del posicionamiento SEO. No había llegado a su home (donde ofrecen clases online y más recursos) sino que había llegado directamente a su Mazmorra (este es el enlace que os interesa), que era literalmente un juego donde te decía que avanzarías programando.

2. Requisitos

Code Combat Dungeon se juega desde el navegador, en mi caso lo hemos usado con dos equipos muy diferentes y la experiencia de uso es idéntica:

  • Configuración Básica: HP Laptop 15s-eq2090ns Windows 11
  • Configuración Pro: MacBook M1 Pro 32GB Sonoma 14.4.1

También hemos probado con varios navegadores e igualmente, sin problema:

  • Windows: Edge, Chrome, Firefox
  • macOS: Safari 17.4.1 (19618.1.15.11.14), Chrome 123.0.6312.87 (Build oficial) (arm64), Firefox 124.0.2 (64-bit)

3. Primeros pasos

Accedemos a la dirección https://codecombat.com/play/dungeon, esto nos permitirá jugar gratis varias pantallas (sí, es de pago. Un trabajo como este es difícil de crear y de mantener y eso hay que asumirlo).

Lo primero que veremos es el mapa de la mazmorra de Kithgard, que cuenta con 44 niveles (también he visto 49 y ahora mismo al revisar este texto 55…). Se muestra un recorrido a través de la mazmorra en el que según resolvamos un nivel, nos aparecerán nuevos para ir avanzando.

La imagen muestra el mapa de la mazmorra en perspectiva, parece un laberinto ambientado con cofres, torres, lava, zonas derruidas...
Imagen del mapa vacío de la Mazmorra de Kithgard en Code Combat
Esta imagen muestra la misma visión que la anterior, pero el recorrido aparece desvelado con todos los niveles que se han resuelto en la mazmorra.
Imagen del mapa con todos los niveles de la Mazmorra de Kithgard en Code Combat

Al comenzar a jugar se percibe que la estética estaba muy cuidada, siendo algo en lo que las plataformas educativas suelen fallar (perdón por la generalización), y eso me motivó aún más a probarlo para entender cómo se «jugaba» o se «programaba» (no estoy seguro de qué término usar, así que creo que voy a usarlos indistintamente).

Al empezar, lo primero que te pedía era seleccionar una heroína o un héroe. Yo aún no sabía que dependiendo del tipo de personaje que selecciones, va a cambiar la forma en la que tienes que resolver los retos después, aunque las bases de juego/programación sean las mismas. No es lo mismo usar un personaje de cuerpo a cuerpo que otro que ataque a distancia.

La imagen muestra una pantalla con una lista de avatares de diferentes personajes que podemos seleccionar para jugar.
Pantalla de selección de heroína o héroe.

Además como se puede ver en la imagen anterior, al elegir el personaje puedes seleccionar entre 5 lenguajes de programación (Phyton, JavaScript, Lua, C++ o Java), siempre he sido más frontend que backend (perdón a todos mis compis backenders de Autentia ?), así que decidí probar con JavaScript.

La siguiente pantalla fue la que «me voló la cabeza», no me lo esperaba, una pantalla de personaje con inventario tipo Diablo (con el permiso de Blizzard). Lo primero que me invadió fueron los recuerdos de las horas y horas invertidas en el juego Diablo y sus secuelas. Parte de mi «niñez» vino a mi.

Imagen que muestra los inventarios de héroe de Code Combat a la izqueirda y Diablo a la derecha. Ambos disponen huecos para objeto que portará el héroe.
Imagen que muestra los inventarios de héroe de Code Combat a la izqueirda y Diablo a la derecha. Ambos disponen huecos para objeto que portará el héroe.

Para las personas que no lo conozcáis (creo que seréis pocas, porque sus secuelas siguen lanzándose a día de hoy), Diablo fue un juego RPG en tercera persona lanzado por Blizzard en el año 1996. En su momento fue una revolución por su calidad gráfica, musica y cinemáticas. Manejabas un personaje por mundos tipo mazmorra donde tenías que ir descubriendo zonas y resolviendo encargos para avanzar en la historia. Si queréis leer un poco más os dejo enlazada la entrada de Wikipedia.

En cuanto me recuperé del shock, tenía claro que esto no era una herramienta sencilla sin más, sino algo bien pensado y con muchas más opciones y posibilidades de las que yo en principio le había atribuido.

Cuando equipas objetos en el personaje, se le conceden habilidades nuevas EXPRESADAS COMO MÉTODOS. ? Ya el construir un inventario de objetos con propiedades me parece complicado, pero además llevarlo a este nivel es una pasada.

Imagen que muestra los métodos que un objeto concede una vez equipado en el personaje
Imagen que muestra los métodos que un objeto concede una vez equipado en el personaje

En el siguiente paso ya comenzamos el primer nivel, donde el juego te va guiando (está disponible en varios idiomas, entre ellos Castellano), y la experiencia está muy cuidada guiándote a cada paso.

Lo primero que nos explica es el objetivo del nivel, es decir, los requisitos que tenemos que cumplir «en nuestro proyecto» ?.

La imagen muestra oscurecido en segundo plano al mapa del nivel, y en primer plano un mensaje con los objetivos de la misión.
La imagen muestra oscurecido en segundo plano al mapa del nivel, y en primer plano un mensaje con los objetivos de la misión.

El juego, como se puede ver en la imagen siguiente, cuenta con una interfaz compuesta por:

  1. A la izquierda el mapa del nivel que tenemos que resolver.
  2. A la derecha un «mini» IDE donde tienes que escribir tu código para poder jugar, y que sustituye el uso del ratón y/o el teclado.
  3. En la parte inferior tienes información de la vida del héroe, consejos y también puedes ver los métodos disponibles según tengas equipado tu personaje.
La imagen muestra la interfaz del juego: el mapa a la izquierda, el IDE a la derecha, y la zona de información inferior.
La imagen muestra la interfaz del juego: el mapa a la izquierda, el IDE a la derecha, y la zona de información inferior.
La imagen muestra cómo el juego te guía con los errores semánticos y fallos en la codificación
La imagen muestra cómo el juego te guía con los errores semánticos y fallos en la codificación

Este IDE tiene ayuda para resaltar los errores en el código y además cuenta con un «predictivo» para poder escribir los métodos. En la imagen siguiente se muestra cómo el juego te guía con los errores semánticos y fallos en la codificación.

También te proporciona pistas para poder construir la solución e incluso tiene integrada una IA que te ayuda a resolver los problemas de código más allá de las ayudas anteriores. En la imagen siguiente se puede ver en la parte inferior izquierda.

La imagen muestra cómo la IA de soporte del juego nos da pautas para arreglar los errores de código
La imagen muestra cómo la IA de soporte del juego nos da pautas para arreglar los errores de código

4. Desarrollo del juego

Bueno, con esto hemos llegado a la mecánica de juego. Podemos decir que el juego tiene dos partes principales: los mundos y los niveles dentro de cada mundo.

La mecánica es sencilla, tienes que resolver cada nivel que se te plantee para poder avanzar. En algunos casos te darán varias alternativas en la ruta y en otras simplemente una, por lo que te veras en la obligación de resolver ese puzzle antes de seguir.

4.1. Los niveles

Voy a usar como referencia el nivel Pong Pong de la Mazmorra de Kithgard. Al seleccionar un nivel en el mapa te indican qué habilidades vas a necesitar para poder resolverlo.

La imagen muestra qué habilidades necesitas para pasar el nivel Pong Pong de la mazmorra de Kithgard
La imagen muestra qué habilidades necesitas para pasar el nivel Pong Pong de la mazmorra de Kithgard

Una vez que pulsas JUGAR, al iniciar el nivel siempre te plantean los objetivos que tienes que cumplir para resolverlo. Como veis aquí ya se van introduciendo conceptos de buenas prácticas como la optimización de lineas de código y te premia en base a la «calidad» de tu código, todo ello de forma muy natural.

Imagen que muestra los objetivos para superar el nivel del juego.
Imagen que muestra los objetivos para superar el nivel del juego.

Lo siguiente que tendremos es nuestro IDE para poder empezar a escribir la solución. Siempre nos suele dar una referencia a modo de comentarios de código.

Imagen que muestra el IDE de Code Combat en el nivel pong pong
Imagen que muestra el IDE de Code Combat en el nivel pong pong

En cuanto empecemos a escribir el código nos mostrará sugerencias, como en el caso siguiente, donde al empezar a escribir «hero.» nos muestra los métodos disponibles que podemos seleccionar simplemente pulsando INTRO.

La imagen muestra sugerencias de métodos disponibles para la clase hero.
La imagen muestra sugerencias de métodos disponibles para la clase hero.

Si la descripción de los objetivos del nivel y las referencias en los comentarios de código no han sido suficientes para que sepas cómo avanzar, puedes usar Consejos. Al usarlo te abrirá una modal donde te dará información adicional para ayudarte a enfocar la solución.

La imagen muestra una modal donde podemos ver consejos adicionales para resolver el nivel.
La imagen muestra una modal donde podemos ver consejos adicionales para resolver el nivel.

De hecho este caso me parece genial, porque te introduce el concepto de documentación y la necesidad que tendrás como persona que desarrolle software de usarla.

La imagen hace referencia al uso de la documentación en la programación
La imagen hace referencia al uso de la documentación en la programación

No os podéis imaginar la cara de lelo cuando en un momento dado mi hijo ha llegado y me ha dicho:

Papá, ya se lo que pasa, me falta un while-true

En mi cabeza ha sonado claramente un: «¿Y tu cuándo demonios has aprendido lo que es un while-true?». 

Los inicios parecen lentos, pero según se familiarizan es una pasada verles aprender.

Volviendo al punto, con esto ya podemos empezar a tener idea de qué debemos hacer para codificar la solución, en este caso:

hero.say("fetch");
while(true) {
hero.attack("ball2");
hero.moveRight(3);
hero.attack("ball2");
hero.moveLeft(3);
}

Cuando queramos probar la solución sólo tendremos que pulsar CORRER, y esto ejecutará nuestro código pasando línea a línea y marcando con un check las que estén correctas. Si hay fallo que impide que se resuelva el puzzle, se parará en la linea correspondiente como si fuese un debugger.

La imagen muestra cómo Code Combat pasa línea a línea por el código y se para en aquella que rompe la lógica
La imagen muestra cómo Code Combat pasa línea a línea por el código y se para en aquella que rompe la lógica

Si todo ha ido bien, habremos cumplido con los objetivos y podremos terminar el nivel.

La imagen muestra cómo se han cumplido con éxito los objetivos de codificación de un nivel en Code Combat
La imagen muestra cómo se han cumplido con éxito los objetivos de codificación de un nivel en Code Combat

4.2. Las recompensas

Al acabar los niveles irás ganando experiencia, gemas y objetos. La cantidad de recompensas o su valor, dependerá de cómo de buena haya sido la solución de código que hayas dado al nivel.

La imagen muestra la pantalla de recompensas de Code Combat al finalizar un nivel
La imagen muestra la pantalla de recompensas de Code Combat al finalizar un nivel

Gracias a las recompensas irás almacenando principalmente Gemas, con las que puedes comprar objetos o cambiar de personaje. Esto lo podrás hacer en la sección Objetos.

La imagen muestra la sección Objetos en Code Combat
La imagen muestra la sección Objetos en Code Combat, se puede ver un libro llamado Programaticon que te deja hacer bucles while-true

4.3. Los mundos

Resulta que el juego tiene mundos. La mazmorra de Kithgard no es más que el primero y cada uno está orientado a aprender cosas diferentes. Una vez completados los niveles  de un mundo podremos acceder al siguiente.

Imagen que muestra de izquierda a derecha los diferentes mundos de Code Combat representados como islas flotantes.
Imagen que muestra de izquierda a derecha los diferentes mundos de Code Combat representados como islas flotantes.

La lista completa de mundos es:

  • Mazmorra de Kithgard: Sintaxis, métodos, parámetros, cadenas, bucles, variables
  • Bosque de Backwoods: If/else, lógica boleana, operadores de relacionales, funciones, propiedades de los objetos, manejo de eventos, manejo de entradas
  • Desierto de Sarven: Aritmética, contadores, bucles-while, break, continuar, secuencias, comparación de cadenas, encontrar mín/max
  • Montaña Cloudrip: Objetos literales, métodos de invocación remotos, bucles-for, funciones complejas, dibujo, módulo
  • Glaciar Kelvintaph: Técnicas avanzadas (no se han roto la cabeza con la descripción)
  • ??? (Habrá que llegar aquí par descubrirlo….)

Ademas estos mundos completos, en la imagen anterior podéis ver que hay una especie de «mini mundos». Estos sirven de puente entre mundos y gracias a ellos se pueden adquirir conocimientos adicionales como aprender fundamentos para construir juegos, HTML, etc.

Estos serían los aspectos más básicos. Pero cuenta además con una sección de logros donde puedes ir viendo tu evolución, una sección de clanes, puedes competir contra otros compis (https://codecombat.com/league) para poner a prueba las habilidades que has ido adquiriendo…. vamos que aún nos quedan muchas cosas por descubrir.

La imagen muestra la lista de logros de Code Combat
La imagen muestra la lista de logros de Code Combat

5. Mi opinión

Como ya adelantaba, me parece una herramienta genial para peques y no tan peques… yo mismo me he tirado buenos ratos pensando soluciones junto con y sin mi hijo. Si llevas un tiempo algo más lejos del código, me parece una opción interesante para divertirte y refrescar conceptos de forma distendida.

Como conclusión, después de unos meses usándolo en casa, lo recomiendo y creo que merece la pena para las personas que estén dispuestas a invertir tiempo con los peques de forma colaborativa.

Hay partes del juego que se perciben más sencillas, y otras donde incluso las personas adultas tendremos que «rascarnos la cabeza». En el caso de los mini mundos me parecen mas «avanzados» que los mundos normales, al menos para una edad de 7 años, no es malo, pero al menos en los dos primeros que nosotros hemos probado, ha sido necesaria más ayuda.

Es importante también valorar el uso que se le va a dar y el tiempo que se le va a dedicar.

Os dejo a continuación algunos de los puntos concretos que creo que merece la pena resaltar.

5.1. Coste del juego

Voy a empezar por el tema más escabroso. Ya lo he mencionado antes, contar con algo como Code Combat supone tiempo, esfuerzo y dinero, y eso hay que pagarlo. No es un coste excesivo, pero hay que tenerlo en cuenta, hablamos de 6,5€/mes en el momento de escribir esta entrada. En nuestro caso nos costó decidirnos por la política de pantallas que tenemos, ya que cuanto mayor uso, más se rentabiliza, pero por otro lado no queremos fomentar un uso excesivo. Cada persona/familia tendrá que valorarlo.

Tarifas en EURO de la subscripción premium de Code Combat, mensual o anual.
Tarifas en EURO de la subscripción premium de Code Combat, mensual o anual.

5.2. Traducciones

Voy a seguir por la única cosa que hasta el momento considero realmente un handicap, las traducciones. Code combat peca de no tener cuidadas todas las traducciones y, como os habréis fijado en las imágenes (la que tenéis justo sobre estas lineas es un ejemplo más), en numerosas ocasiones los textos están en una mezcla de castellano e inglés. Esto para los más pequeños supone una traba y necesitarán de nuestra ayuda mucho más que si estuviese todo correctamente traducido. 

5.3. Autonomía

Hay que tener en cuenta que los peques tienen que enfrentarse al uso del equipo, a las bases de programación, al lenguaje de programación (que está en inglés) y a la propia interfaz, así como a la mecánica de juego. Si estás pensando en soltar a tu peque delante del juego para que se entretenga, olvídate y busca otra alternativa. Para mí, Code Combat está pensado para que les acompañemos (al menos con la edad del mío) y aunque bastantes cosas las van a resolver solos, van a necesitar un apoyo.

6. Conclusión

Espero que os haya aportado una herramienta más a tener en cuenta y os haya entretenido a la vez. Si además he conseguido haceros rememorar Diablo, el clásico de Blizzard ya me doy por satisfecho.

Imagen del CD del juego Diablo de Blizzard en su caja
Imagen del CD del juego Diablo de Blizzard en su caja

Esta última imagen es cortesía de un amigo, Kuso. Entre él y su hermano han puesto contra las cuerdas a Diablo en incontables ocasiones, y en parte gracias a ellos yo llegué a disfrutar mucho más los juegos y no solo a «pasármelos».

Y para cerrar he de confesar una última cosa, lo que más me ha gustado no ha sido el Code Combat en sí, sino que el juego ha sido la excusa para pasar tiempo con mi hijo y disfrutar juntos de algo que compartíamos.

El que no sea sólo un «juego» le ha permitido hablar el mismo lenguaje que los mayores, y eso ha sido una pasada para él. Gracias a Autentia y su política de puertas abiertas, pudo venir a la oficina y compartir tiempo conmigo y con algunos compañeros frontenders como Alejandro Martínez.

Imagen en la que se ve a un adulto y a un niño delante de un portátil con Code Combat
En la imagen aparecen un adulto y un niño sentados delante de un portátil con Code Combat

Para mi hijo fue una experiencia inolvidable, el ver como se le iluminaba la cara cuando alguien en la oficina le decía que ellos también usaban JavaScript como él y le dedicaban unas palabras, valía oro ¡Gracias a todos por ese día!.

 

 

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad