Índice de contenidos
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.
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.
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.
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.
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» 😉.
El juego, como se puede ver en la imagen siguiente, cuenta con una interfaz compuesta por:
- A la izquierda el mapa del nivel que tenemos que resolver.
- 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.
- 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.
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.
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.
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.
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.
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.
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.
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.
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.
Si todo ha ido bien, habremos cumplido con los objetivos y podremos terminar el nivel.
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.
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.
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.
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.
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.
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.
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.
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!.
