Recreando el juego de memoria con javascript

El juego consiste en elegir pares iguales hasta completar toda la tabla evitando que el tiempo se nos acabe.

Rodríguez Patiño, Eduardo
2020-12-01 | 8,014 lecturas

Algo aburrido en el trabajo me puse a codificar el juego de memorias y me tarde una tarde aproximadamente haciendolo. Sigo con el entrenamiento de sobrevivir sin jQuery y recree el juego usando solo javascript.

¿En qué consiste el juego?

Se muestra una tabla por tiempo determinado (calculado) con unos números desordenados y pasado el tiempo se esconderán para que tu elijas 2 números que sea iguales hasta completar toda la tabla tratando de ganarle al tiempo (el tiempo a jugar también es calculado).

Inicializando el juego

Creamos un div y le agregamos un ID para inicializar el juego, luego llamamos a la función que crea el juego y le pasamos la configuración.

<div id="jugar"></div>
memoria({
    id: "#jugar",
    col: 4,
    row: 4
});
  • El primer parámetro es nuestro ID que contendrá al juego
  • El segundo parámetro es la cantidad de columnas que queremos que tenga el juego (Solo números pares)
  • El segundo es la cantidad de filas a mostrar (Solo números pares)

¿Qué hacemos adentro?

No voy a explicar en si el código, sino la lógica que he usado.

  1. Creamos la tabla que almacenará a los números, esta la calculamos en base a la cantidad de filas y columnas que tendrá.
  2. Calculamos los números que contendrá el juego (columnas * filas / 2) y los guardamos en un array. Supongamos que las columnas y filas son 4 x 4, entonces tenemos 16 valores a llenar, pero como el juego consiste en elegir pares iguales, debemos trabajar solo con la mitad y esto lo logramos haciendo una división entre 2. Finalmente, tenemos que desordenar el array para que los números sean mostrados en orden aleatorio.
  3. El juego en si.
    • Basicamente cada vez que hago un click los voy guardando un array los SPAN seleccionados y cuando es el segundo click, comparo si el valor de este SPAN con el anterior son IGUALES, entonces gano 1000 puntos.
    • ¿Cómo gano el juego?, para eso debemos calcular la cantidad de puntos que puede ganar el jugador como máximo (columnas*filas/2*1000) vs los que va ganando, cuando sean iguales finalizamos el juego.
    • ¿Cómo pierdo?, si al pasar cierta cantidad de segundos no lograste los puntos que se requieren, lo damos por derrota.

¿Suena fácil no?

Si quieren ver el juego en acción y el código les comparto el enlace de JSFiddle.