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 3,355 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!

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

    Código de fuente de Red Social desarrollada en ASP.NET MVC
  • 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#

Ú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
© 2017 Anexsoft, blog y cursos online de TI.