Aprende en casa Ir a KODOTI
Aprende en casa KODOTI

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
Rodríguez Patiño, Eduardo
2020-07-07 | 7,166 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.


Estudia con nosotros

🚀 Mejora tus oportunidades laborales