Blog de conocimiento gratuito: linux, programación, open source, bases de datos, android, frameworks, web e informática en general.
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“.
Este juego de memorama en JS que vengo a presentar tiene las siguientes características:
Nota: otro videojuego que desarrollé con JavaScript fue el de snake.
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.
Ahora comenzaré a dar los detalles.
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:
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:
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.
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)ultimasCoordenadas
.ultimasCoordenadas
) se hacen dos cosas:
Esto en código fuente se traduce a lo siguiente:
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.
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:
Y así cuando se pierde:
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.
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.
Para terminar, la animación de fadeIn es esta:
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í.
y en caso de usarlo para usarlo en relacionar texto con imagen
Sería cuestión de modificar el código para adaptarlo a lo que requiere
Muchas gracias, muy útil, sin embargo hay forma de numerar cada casilla en caso que el juego se haga en un grupo, a fin de identificar cada casilla, gracias.
Hola. No entiendo su comentario
Saludos
¡Muy bueno!, me ayudo a saber como funciona bootstrap de mejor manera :3