Realiza juego de memoria con React y Tailwind

¿Cómo estás? Estoy de vuelta para ayudarte, en esta ocasión, a desarrollar un emocionante juego de memoria utilizando React.js y Tailwind. A lo largo de este tutorial, aprenderás los conceptos fundamentales de React y cómo aplicarlos para crear una experiencia interactiva. Además, te proporcionaré instrucciones paso a paso para que sigas y ejecutes el proyecto en tu propio entorno de desarrollo.

Recordemos primero que React.js es una biblioteca de JavaScript que permite construir interfaces de usuario interactivas y reutilizables. Utiliza un enfoque basado en componentes, lo que significa que podemos dividir nuestra aplicación en componentes más pequeños y manejar cada uno de manera independiente.

En nuestro juego de memoria, utilizaremos componentes de React para representar las cartas, la cuadrícula del juego, el contador de intentos y otros elementos de la interfaz de usuario.

Por su parte, Tailwind CSS es un framework de diseño CSS altamente utilizable y personalizable. Se basa en una metodología de diseño utilitario, lo que significa que proporciona clases CSS prediseñadas que se pueden aplicar directamente a los elementos HTML para darles estilo.

A diferencia de otros frameworks CSS como Bootstrap, que tienen un diseño más predefinido y limitan la libertad de diseño, Tailwind CSS brinda una mayor flexibilidad y control sobre el aspecto y la funcionalidad del sitio web. Permite crear interfaces de usuario únicas y personalizadas al proporcionar una gran cantidad de clases CSS listas para usar.

Aquí te dejo algunas extensiones recomendadas para usar con Tailwind CSS en Visual Studio Code:

1. Tailwind CSS IntelliSense: Esta extensión proporciona autocompletado y resaltado de sintaxis para las clases de Tailwind CSS.

2. IntelliSense for CSS class names in HTML: Esta extensión proporciona autocompletado para las clases de Tailwind CSS dentro de archivos HTML.

3. Tailwind Docs: Esta extensión te permite acceder rápidamente a la documentación de Tailwind CSS desde el editor.

Funcionalidades del juego

El juego de memoria que desarrollaremos constará de una cuadrícula de cartas boca abajo. El objetivo del juego es encontrar todas las parejas de cartas idénticas en el menor número de intentos posible.

Al hacer clic en una carta, esta se volteará y mostrará el símbolo correspondiente. Si las dos cartas seleccionadas son iguales, permanecerán visibles. Si no son iguales, se voltearán nuevamente después de un breve intervalo.

Asimismo, incluirá un contador de intentos para que puedas hacer un seguimiento de tu progreso y mejorar tu rendimiento en cada intento. Además, podrás reiniciar el juego en cualquier momento para comenzar de nuevo.

El juego de memoria es una excelente manera de ejercitar nuestra mente y concentración. Además, es divertido y desafiante para todas las edades. Ahora, vamos a ver cómo implementar este juego utilizando React y Tailwind CSS.

Requisitos

Asegúrate de tener instalado Node.js en tu computadora. Node.js es una plataforma que nos permitirá ejecutar JavaScript fuera del navegador. Puedes descargar e instalar Node.js desde su sitio web oficial.

Configuración del entorno de desarrollo

Paso 1: Crea un nuevo proyecto de React utilizando el siguiente comando en tu terminal:

npm create vite@latest juego-de-memoria

Esto generará un nuevo directorio llamado juego-de-memoria con una estructura de proyecto básica de React.

Paso 2: Navega al directorio del proyecto:

cd juego-de-memoria

Paso 3: Instala Tailwind CSS utilizando npm desde la web oficial, seleccionamos la opción Vite que es la herramienta de compilación que utilizaremos para crear la aplicación.

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Este comando instalará todas las bibliotecas y paquetes necesarios para ejecutar el juego de memoria.

Paso 4: Abre el editor que estés utilizando, en mi caso es Visual Studio Code, seguidamente busca el archivo tailwind.config.js, elimina su contenido y pega este código:

/** @type {import('tailwindcss').Config} */

export default {

content: [

"./index.html",

"./src/**/*.{js,ts,jsx,tsx}",

],

theme: {

extend: {},

},

plugins: [],

}

Paso 5: Busca el archivo index.css, en la carpeta src, elimina su contenido y pega este código:

@tailwind base;

@tailwind components;

@tailwind utilities;

En este código, importamos los estilos base, los componentes y las utilidades de Tailwind CSS. Luego, definimos los estilos para el componente Card. Utilizamos clases CSS predefinidas de Tailwind CSS para establecer el tamaño de la carta, aplicar los efectos de volteo y definir los estilos de los elementos delantero y trasero de la carta.

Con estos estilos, nuestras cartas tendrán un aspecto atractivo y cambiarán su estado visual cuando se les haga clic.

Ejecución del juego

Una vez que todas las dependencias estén instaladas, puedes ejecutar el siguiente comando para iniciar el juego:

npm run dev

Esto iniciará la aplicación y abrirá una ventana del navegador en la dirección http://localhost:3000. Aquí podrás jugar y disfrutar del juego de memoria que acabas de crear.

Estructura del proyecto

Antes de comenzar a escribir código, es importante entender la estructura básica del proyecto. El directorio raíz del proyecto contiene varios archivos y carpetas, pero nos centraremos en los siguientes:

• src/App.jsx: Este archivo es el punto de entrada de nuestra aplicación, donde se renderiza el componente principal.
• src/data.js: Este archivo contiene el arreglo de las imágenes.

Ahora, vamos a crear algunos componentes y estilos para nuestro juego de memoria.

juegomemoriaanabg-main

├── public

│   ├── img

├── src

│   ├── components

│   │   ├── Board.jsx

│   │   ├── Card.jsx

│   │   ├── Modal.jsx

│   ├── App.jsx

│   ├── data.js

│   ├── index.css

│   └── main.jsx

├── .eslintrc.cjs

├── .gitignore

├── index.html

├── package-lock.json

├── package.json

├── postcss.config.js

├── tailwind.config.js

└── vite.config.js

El directorio public contiene archivos estáticos, como las imágenes de la aplicación. El directorio src contiene el código fuente de la aplicación, incluidos los componentes, archivos CSS y archivos de configuración.

Creando los componentes

Para comenzar, crearemos tres componentes principales: Card, Board y Modal. El componente Card representará una carta individual del juego, el componente Board será responsable de mostrar todas las cartas en el tablero y el componente Modal será el encargado de mostrar un mensaje cuando el usuario ha ganado el juego de memoria.

Comencemos por el componente Card. En el archivo src/Card.js, agregamos el siguiente código:

En este código, creamos un componente funcional Card que recibe dos propiedades: card y handleCardClick. El objeto card representa una carta individual con un identificador único y un estado de volteo. La función handleCardClick se invoca cuando se hace clic en una carta.

Dentro del componente Card, utilizamos una estructura HTML para representar la carta. La clase CSS card se aplica al contenedor principal de la carta, y la clase flipped se agrega dinámicamente cuando la carta está volteada. Dentro del contenedor, tenemos dos elementos div para representar el frente y el reverso de la carta.

Ahora, crearemos el componente Board en el archivo src/Board.js:

En este código, creamos un componente funcional Board con una función shuffleArray que recibe una propiedad: array, que consta en duplicar la imagen y mostrarla en forma aleatoria en el tablero.

Continuamos con la creación de cinco useState (estados) que determinarán las funciones del tablero:

1. Cards: es un arreglo donde se mostrarán las cartas.
2. FlippedCards: que se invoca cuando se hace clic en una carta. Esta función actualiza el estado de las cartas, cambiando el estado de volteo de la carta correspondiente.
3. Moves: mostrará la cantidad de movimientos una vez finalizado el juego.
4. GameOver: este estado se ejecutará cuando el usuario encuentre los pares de las cartas culminando el juego.
5. IsDisabled: permite saber cuando el juego está activado.

Continuamos con la función createBoard, encargada de iniciar el juego.

Utilizamos el método flatMap() que consiste en un array para aplicar una función en cada elemento y luego aplanar el resultado en uno solo. Esta función duplica las cartas y asigna un nuevo id a la carta duplicada. Después se ejecutará la función shuffleArray, que colocará las cartas en forma aleatoria.

Más adelante mostramos un título H1 y utilizamos el componente Board para mostrar todas las cartas en el tablero. Así aplicamos la prop de className definida en el framework Tailwind para darle estilos CSS, haciendo que el texto esté en negrita en verde y azul. Luego, cuando el usuario lleve el puntero hacia el texto, éste cambiará de color de rosado hasta amarillo.

Seguidamente, añadimos un div para crear el tablero con cuatro columnas, tres filas, márgenes y con formato centrado. Además, utilizamos el método map para iterar sobre el array card y devolver un nuevo array según el id al hacer clic sobre la carta.

A continuación, tendremos un botón con un fondo negro y texto en blanco, que permite que el usuario reinicie el juego cuando lo desee.

Por último, creamos el componente Modal, que se activará en el momento en que el usuario finalice el juego y mostrará la cantidad de movimientos, así como un aviso de ¡Ganaste!

En este código, visualizamos un botón para comenzar un nuevo juego, que es la función handleNewGame, misma que debe cumplir con la siguiente condición: si gameOver es verdadero, entonces debe mostrarse el mensaje de ¡Ganaste! De lo contrario, debe ocultarse.

¡Ganaste!

Prueba el juego de memoria

¡Hemos terminado de crear nuestro juego de memoria con React y Tailwind CSS! Ahora es el momento de probarlo en el navegador.

En tu terminal, ejecuta el siguiente comando para iniciar la aplicación:

npm run dev

Esto abrirá la aplicación en tu navegador y podrás ver el juego de memoria en acción. Haz clic en las cartas para voltearlas y encuentra todas las parejas.

Así llegamos al final de este artículo, donde aprendimos cómo crear un emocionante juego de memoria utilizando React y Tailwind CSS. Utilizamos la potencia de React para crear una interfaz dinámica y reactiva, y complementamos el diseño con la utilidad de estilos de Tailwind CSS.

Además, te he proporcionado instrucciones paso a paso para seguir y ejecutar el proyecto en tu propio entorno de desarrollo. Recuerda que este es solo un ejemplo básico de un juego de memoria. Puedes personalizarlo y expandirlo según tus necesidades.

¡Diviértete creando tus propios juegos y desafía tu memoria!