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.
- Creamos la tabla que almacenará a los números, esta la calculamos en base a la cantidad de filas y columnas que tendrá.
- 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.
- 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.