Flexbox Froggy y Grid Garden son dos de los proyectos gratuitos de la compañía Codepip, que se especializa en juegos para aprender desarrollo web (especialmente HTML, CSS y JavaScript).
La web de la compañía ofrece varias opciones de acceso a sus juegos, desde juegos gratuitos a subscripciones de por vida. Es posible crear una cuenta para guardar el progreso en los juegos y compartir los logros obtenidos.
Actualmente los únicos juegos gratuitos son Flexbox Froggy y Grid Garden. Ambos están disponibles en código abierto en GitHub, lo que ha permitido que la comunidad los traduzca a varios idiomas.
Flexbox Froggy
Flexbox Froggy es un juego en el que el usuario debe ayudar a una ranita verde, Froggy, y a sus amigos a saltar en hojas de lirio usando propiedades de caja flexible o flexbox, como pueden ser justify-content y align-items.
El juego nos presenta los valores posibles para cada una de las propiedades, y ocasionalmente pistas, de manera que el jugador tiene que decidir qué propiedad y qué valor usa para conseguir que Froggy llegue a la hoja de lirio. En caso de quedarnos atascados podemos clicar en las propiedades que nos recomiendan usar para ver sus valores posibles.
El juego tiene 24 niveles, y podemos escoger qué nivel queremos jugar usando las flechas que se muestran al lado del nivel. Cada nivel nos introduce un reto distinto, y vamos aprendiendo propiedades nuevas a medida que avanzamos.
Grid Garden
En Grid Garden nuestro objetivo es regar nuestros cultivos con agua y deshacernos de las malas hierbas con barro. Para ello, usamos las funciones Grid de CSS, con propiedades como grid-column-start y grid-column-end.
Al igual que en el caso anterior el juego nos ofrece pistas sobre cómo poder avanzar en los niveles, y podemos ver cuáles son los valores posibles para cada propiedad.
El juego tiene 28 niveles, y, al igual que en el juego anterior, con cada nivel aumenta la dificultad y aprendemos nuevas propiedades.
Conclusión
A pesar de lo que la estética pueda llevar a pensar ambos juegos tienen bastante complejidad, especialmente si nos estamos introduciendo en el mundo del desarrollo web y no hemos visto las propiedades anteriormente. Son juegos en los que es fácil dedicar varios minutos a cada nivel y, en el proceso, podemos entender más a fondo cómo funcionan las propiedades de CSS, ya que son muy visuales y las explicaciones de cada nivel son sencillas y accesibles.
Os animo a probarlos, porque son juegos que incluyen un pequeño desafío en cada nivel, sin ser demasiado fáciles o difíciles, y ayudan mucho a afianzar los conocimientos previos, o incluso a aprender cosas nuevas.