Juego Coincidencia de Cartas

Por Julio Giampiere Grados Caballero
Juego Coincidencia de Cartas

Aprende a crear un juego de cartas al azar, mediante el manejo de JavaScript, HTML y CSS.

Si conoces los juegos de azar mediante cartas, te sentirás identificado con este tutorial. Hoy veremos cómo realizar un divertido juego mediante la coincidencia de cartas, usando JavaScript, HTML y CSS, de manera fácil y sencilla.

El juego se trata de la coincidencia de pares de cartas, donde de acertar estas deberán quedarse volteadas y de no darse el caso regresar a su estado normal, claro está que para conocer el contenido de la carta primero las encontraremos volteadas.

JavaScript, usaremos conocimientos sobre este lenguaje, como: eventos, arrays, funciones, funciones personalizadas, estructuras de control y condicionales.

  • Eventos. Los eventos de JavaScript permiten la interacción entre las aplicaciones JavaScript y los usuarios. Cada vez que se pulsa un botón, se produce un evento. Cada vez que se pulsa una tecla, también se produce un evento. No obstante, para que se produzca un evento no es obligatorio que intervenga el usuario, ya que por ejemplo, cada vez que se carga una página, también se produce un evento.
  • Arrays. Son un conjunto de datos ordenados por posiciones, todos asociados en una sola variable, dichos datos pueden ser de cualquier tipo de dato, es decir, que es posible crear una array que tenga una cadena en la primera posición, un número en el segundo, un objeto en el tercero, y así sucesivamente. 
  • Funciones. Son bloques de código que realiza tareas específicas, que será llamado cuando sea necesario para el programa.
  • Estructuras de control y condicionales. Dichas estructuras están compuestas por instrucciones de tipo, “si se cumple esta condición hazlo, si no se cumple haz esto otro” conocidas como estructuras condicionales y también existen instrucciones del tipo “repite esto, mientras se cumpla esta condición”, que se le conoce como bucles.

HTML. Este lenguaje de etiquetas lo usaremos para trabajar con una tabla donde estará contenida nuestras cartas, y dos botones, para iniciar y actualizar el juego.

CSS. Usaremos unos estilos simples para el juego dando color y vida a la tabla del juego.

La idea del juego es sencilla, simplemente damos click sobre iniciar juego, veremos que desaparece la opacidad, luego de dar click sobre cualquier carta estas serán volteadas, cuando se de click sobre dos cartas y no coincidan regresarán a su estado normal, de no darse el caso quedarán como están.



Este juego de cartas corresponde al proyecto elaborado en nuestro curso de JavaScript, el cual te invitamos a visitar si deseas conocer a mayor profundidad cómo realizar este aplicativo con la explicación paso a paso. El objetivo de este tutorial es dar a conocer cómo con conocimientos básicos podemos llegar a construir juegos u otros proyectos o aplicaciones web. Si deseas comprender a mayor profundidad cómo crear este juego. Recuerda que si deseas conocer más sobre estos lenguajes cuentas en la plataforma cursos tales como: HTML y CSS y también JavaScript

¿Te gustó el tutorial?

Ayúdanos a llegar a más personas

Julio Giampiere Grados Caballero

Julio Giampiere Grados Caballero

CTO y Cofundador de Devcode.la. Full stack JavaScript. React | jQuery | Vanilla | Backbone | Node | MongoDB.