Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Recreando el juego de memoria con javascript
Actualizado el 05 Febrero, 2016 y leído 4,204 veces
Calificación: 10.00 / 10

Recreando el juego de memoria con javascript

Anexsoft

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.

 

¡Adquiera ya!

  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC

Últimas publicaciones

Encuesta

¿Sobre qué te gustaría que se hable más?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2018 Anexsoft, blog y cursos online de TI.