Juego de Memorama en JavaScript – Tutorial

Resumen: en este post te voy a explicar cómo hacer el juego de memorama en JavaScript. Pondré el código fuente y una demostración en línea. Este juego también es conocido como “Memoria“.

Características del memorama con JavaScript

Memorama programado en JavaScript – Tutorial de juego

Este juego de memorama en JS que vengo a presentar tiene las siguientes características:

• Totalmente responsivo, es decir, se adapta a cualquier pantalla
• Las imágenes se pueden cambiar
• Intentos máximos modificables
• Alerta para cuando ganas y cuando pierdes
• Código fuente modificable

Nota: otro videojuego que desarrollé con JavaScript fue el de snake.

Demostración y código fuente

A lo largo de este post voy a explicar las partes más importantes del juego de memorama en JavaScript, pero puedes ver el código fuente en GitHub que dejaré más adelante.

He grabado un vídeo:

Para probar el juego de memorama online simplemente accede a este enlace.

Creación del juego de memorama en JavaScript

Ahora comenzaré a dar los detalles.

Dibujo de imágenes

El diseño de cuadricula y las imágenes responsivas (así como el borde de las mismas) se consigue gracias al framework de Bootstrap 4.

Las imágenes que se ven son un arreglo, dibujado gracias a Vue JS 2. Tenemos dos arreglos, comenzando por la ruta de las imágenes del memorama:

El arreglo de las imágenes tiene objetos que tienen las siguientes propiedades:

• ruta: la ruta absoluta de la imagen
• mostrar: indica si se debe mostrar, temporalmente, la imagen
• acertada: indica si esta imagen ya fue adivinada, para ignorar cualquier click que se haga sobre ella

Después de que se crea ese arreglo, se mezcla (es decir, se hace que se revuelvan sus elementos) y se parte dependiendo de la constante COLUMNAS (así se puede configurar el número de columnas del memorama en JS)

Finalmente, se asigna a la instancia de Vue para que las imágenes sean dibujadas:

En la vista, se hace un v-for de la siguiente manera:

El método para voltear una imagen

La fuente o src de la imagen depende. Si la propiedad mostrar está en true, se muestra la ruta. Si no, se muestra el signo de interrogación (cuya ruta está definida en la constante NOMBRE_IMAGEN_OCULTA.

En el click de la imagen, se llama al método voltear. Es muy largo para poner aquí así que pondré lo que se hace dentro del mismo.

1. Comprobamos si estamos esperando un timeOut y en caso de que sí, detenemos la función. Este timeOut se encarga de girar las imágenes cuando no las acertamos, pero las muestra por un cierto tiempo. Es decir, se giran en unos segundos (pero mientras se van a girar, no se debe hacer click)
2. Comprobamos si la imagen ya fue acertada, y si es así, entonces detenemos la función
3. Si es la primera imagen seleccionada (es decir, que no se está buscando el par de otra) se muestra la imagen original y sus coordenadas se guardan en ultimasCoordenadas.
4. En caso de que ya hubiera una imagen seleccionada anteriormente (se comprueba con ultimasCoordenadas) se hacen dos cosas:
   1. Verificar si la imagen es exactamente la misma que fue seleccionada anteriormente, si es así, simplemente se voltea de nuevo. Un intento es aumentado.
   2. Verificar si esta imagen es el par de la anterior seleccionada.
      1. Se aumenta el intento
      2. Si es par, se agrega un acierto
      3. Si no es su par, entonces se pone un timeOut (a esto me refería con la comprobación de la primera variable) y se ocultan ambas imágenes

Esto en código fuente se traduce a lo siguiente:

Victorias, fracasos e intentos

Cuando se aumenta un intento, se hace la siguiente comprobación en donde se indica el fracaso si los intentos han sido agotados.

Para saber si el jugador ha ganado se recorre el arreglo y se comprueba que todas las imágenes tengan la propiedad acertada:

Y si se ha ganado, se hace lo siguiente:

Los métodos que indican la victoria y el fracaso son simples llamadas a alertas con SweetAlert, mostrando unas imágenes y texto.

Indicar alerta o fracaso con SweetAlert

Ambas alertas quedan así:

Cuando se resuelve la promesa de las mismas (es decir, el botón es presionado) se reinicia el juego; y todo vuelve a empezar.

Así se ve cuando se gana:

Lo que se muestra cuando el usuario gana la partida de memorama con JavaScript

Y así cuando se pierde:

Intentos del juego de memorama agotados

Precargar imágenes para mejorar la experiencia de usuario

La precarga de las imágenes fue hecha para que cuando el usuario gire o voltee una imagen, no se tenga que cargar en ese momento (sobre todo con eso de las conexiones lentas) así que lo que se hace es cargar todas las imágenes de manera asíncrona.

Cargar imágenes de memorama al inicio

En cada carga de una imagen, se aumenta un contador y cuando ese contador equivale a la longitud de las imágenes, se indica la finalización de la precarga.

Animación CSS

Para terminar, la animación de fadeIn es esta:

Conclusión

Así es como se puede hacer un juego de memorama en JavaScript. Este código que presenté es totalmente extensible y modificable, se pueden cambiar las imágenes así como agregar más.

Sé que utiliza dependencias como Bootstrap y SweetAlert, pero las mismas podrían remplazarse fácilmente; pues de Bootstrap solo se utiliza el grid y las imágenes responsivas, y de Swal solo la alerta que en el modo más simple podría ser remplazado con alert.

No olvides que puedes ver el código en GitHub y jugar el memorama aquí.