MATCHED | Memory Game

MATCHED — The Memory Game es un juego de memoria desarrollado desde cero con HTML, CSS y JavaScript.

El objetivo es encontrar todas las parejas de cartas de cada nivel antes de quedarse sin movimientos. El juego cuenta con 14 niveles, una dificultad progresiva, contador de movimientos, temporizador y diferentes pantallas para las situaciones de victoria y derrota.

Este proyecto nació como el proyecto final de este curso de Domestika que terminé hace varios años. En aquel momento intenté comenzar el proyecto, pero todavía no tenía suficientes conocimientos de desarrollo frontend para llevarlo hasta donde quería. Decidí dejarlo para más adelante y retomarlo cuando tuviera más experiencia.

Después de mucho tiempo queriendo hacerlo, finalmente decidí volver al proyecto y desarrollar una versión mucho más completa, poniendo en práctica todo lo que había aprendido desde entonces.

Para desarrollar el proyecto utilicé Visual Studio Code como editor y trabajé principalmente con:

- HTML5: para la estructura.
- CSS3: para el diseño, las animaciones y el responsive design.
- JavaScript: para toda la lógica e interacción del juego.
- SVG: para diferentes elementos gráficos.
- Audio: para los efectos de sonido.

Una vez terminado, publiqué el proyecto en internet utilizando Netlify, para poder convertirlo en una página web accesible desde cualquier dispositivo.

Antes de comenzar a desarrollar el juego, empecé buscando inspiración dentro de Domestika. Vi diferentes proyectos realizados por otros alumnos y encontré muchos ejemplos de juegos de memoria. Entre ellos, el proyecto de Alebrijes Memory Game fue especialmente útil para refrescar algunos conceptos de JavaScript.

Después amplié la búsqueda y exploré diferentes juegos de memoria en internet para ver qué reglas utilizaban y cómo resolvían visualmente este tipo de experiencia. Fui recopilando ideas que me gustaban y descartando las que no encajaban con lo que quería crear.

A partir de esta investigación definí algunas de las reglas de MATCHED. Por ejemplo, decidí que la única forma de perder un nivel sería quedarse sin movimientos, mientras que el tiempo simplemente registraría cuánto tardaba el jugador en completar cada nivel.

Para la parte visual quería alejarme del estilo de los proyectos que había utilizado como referencia inicialmente. Por eso empecé a investigar diferentes estilos de diseño web y descubrí el Neo-Brutalismo. Me llamó especialmente la atención su combinación de colores, formas sencillas y elementos visuales muy marcados. Me pareció un punto de partida perfecto para experimentar con la identidad visual del juego.

Con las reglas y la dirección visual decididas, comencé a construir la interfaz y a desarrollar el juego utilizando únicamente HTML, CSS y JavaScript.

Primero trabajé en la estructura de las diferentes pantallas y en el diseño responsive. Después fui incorporando la lógica del juego: generación y mezcla de cartas, detección de parejas, movimientos disponibles, temporizador, niveles, condiciones de victoria y derrota, y actualización dinámica de la interfaz.

Durante el proceso fui ajustando tanto el diseño como la jugabilidad a medida que probaba el juego, buscando que todos los elementos fueran claros y que la experiencia funcionara correctamente en diferentes tamaños de pantalla.

Después de todo el proceso, terminé convirtiendo la idea inicial en un juego completo con 14 niveles, dificultad progresiva, animaciones, efectos de sonido, pantallas de victoria y derrota y un diseño responsive.

Ha sido un proyecto que me ha llevado bastante tiempo comenzar y terminar ya que la idea es hacerlo completamente a mano, especialmente porque nació como una idea que dejé aparcada durante años. Poder retomarla con los conocimientos que tengo ahora me permitió no solo completar el proyecto del curso, sino también llevarlo mucho más lejos de lo que habría podido hacer cuando lo empecé.

Puedes jugar al proyecto aquí: https://matched-memorygame.netlify.app/