Jogo de memória com React e Tailwind

Como vai? Estou de volta para ajudá-los, desta vez, a desenvolver um jogo de memória emocionante usando React.js e Tailwind. Ao longo deste tutorial, você aprenderá os conceitos fundamentais do React e como aplicá-los para criar uma experiência interativa. Além disso, fornecerei instruções passo a passo para seguir e executar o projeto em seu próprio ambiente de desenvolvimento.

Vamos primeiro lembrar que React.js é uma biblioteca JavaScript que permite construir interfaces de usuário interativas e reutilizáveis. Ele usa uma abordagem baseada em componentes, o que significa que podemos dividir nosso aplicativo em componentes menores e lidar com cada um de forma independente.

Em nosso jogo da memória, usaremos componentes React para renderizar as cartas, a grade do jogo, o contador de tentativas e outros elementos da interface do usuário.

Por sua vez, Tailwind CSS é um framework de design CSS altamente utilizável e personalizável. É baseado em uma metodologia de design utilitária, o que significa que fornece classes CSS pré-projetadas que podem ser aplicadas diretamente a elementos HTML para estilizá-los.

Ao contrário de outros frameworks CSS como o Bootstrap, que possuem um layout mais predefinido e limitam a liberdade de design, o Tailwind CSS oferece maior flexibilidade e controle sobre a aparência e funcionalidade do site. Ele permite criar interfaces de usuário exclusivas e personalizadas, fornecendo um grande número de classes CSS prontas para uso.

Aqui estão algumas extensões recomendadas para usar com Tailwind CSS no Visual Studio Code:

1. Tailwind CSS IntelliSense: Esta extensão fornece preenchimento automático e destaque de sintaxe para classes CSS do Tailwind.

2. IntelliSense for CSS class names in HTML: Esta extensão fornece preenchimento automático para classes CSS do Tailwind em arquivos HTML.

3. Tailwind Docs: Esta extensão permite que você acesse rapidamente a documentação CSS do Tailwind a partir do editor.

Funcionalidades do jogo

O jogo da memória que jogaremos consistirá em uma grade de cartas viradas para baixo. O objetivo do jogo é encontrar todos os pares de cartas idênticas no menor número de tentativas possível.

Clicar em um cartão irá virá-lo e exibir o símbolo correspondente. Se os dois cartões selecionados forem iguais, eles permanecerão visíveis. Se não forem iguais, serão invertidos novamente após um curto intervalo.

Também incluirá um contador de tentativas para que você possa acompanhar seu progresso e melhorar seu desempenho a cada tentativa. Além disso, você pode reiniciar o jogo a qualquer momento para recomeçar.

O jogo da memória é uma excelente forma de exercitar a mente e a concentração. Além disso, é divertido e desafiador para todas as idades. Agora, vamos ver como implementar este jogo usando React e Tailwind CSS.

Requisitos

Certifique-se de ter o Node.js instalado em seu computador. Node.js é uma plataforma que nos permitirá executar JavaScript fora do navegador. Você pode baixar e instalar o Node.js do seu site oficial.

Configuração do ambiente de desenvolvimento

Passo 1: Crie um novo projeto React usando o seguinte comando em seu terminal:

npm create vite@latest juego-de-memoria

Isso irá gerar um novo diretório chamado jogo-de-memoria com uma estrutura básica de projeto React.

Passo 2: Navega al directorio del proyecto:

cd jogo-de-memoria

Passo 3: Instale Tailwind CSS usando npm do site oficial, selecionamos a opção Vite, que é a ferramenta de compilação que utilizaremos para criar a aplicação.

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Este comando instalará todas as bibliotecas e pacotes necessários para rodar o jogo da memória.

Passo 4: Abra o editor que você está usando, no meu caso é o Visual Studio Code, procure o arquivo tailwind.config.js, exclua seu conteúdo e cole este código:

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

export default {

content: [

"./index.html",

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

],

theme: {

extend: {},

},

plugins: [],

}

Passo 5: Encontre o arquivo index.css na pasta src, exclua seu conteúdo e cole este código:

@tailwind base;

@tailwind components;

@tailwind utilities;

Neste código, importamos os estilos básicos, componentes e utilitários CSS do Tailwind. A seguir, definimos os estilos para o componente Card. Usamos classes CSS predefinidas do Tailwind CSS para definir o tamanho do cartão, aplicar efeitos de inversão e definir os estilos dos elementos frontal e traseiro do cartão.

Com esses estilos, nossos cartões ficarão atraentes e mudarão seu estado visual quando clicados.

Execução do jogo

Depois que todas as dependências estiverem instaladas, você pode executar o seguinte comando para iniciar o jogo:

npm run dev

Isso iniciará o aplicativo e abrirá uma janela do navegador no endereço http://localhost:3000. Aqui você pode jogar e se divertir com o jogo da memória que acabou de criar.

Estrutura do projeto

Antes de começar a escrever código, é importante compreender a estrutura básica do projeto. O diretório raiz do projeto contém vários arquivos e pastas, mas vamos nos concentrar no seguinte:

• src/App.jsx: Este arquivo é o ponto de entrada da nossa aplicação, onde o componente principal é renderizado.
• src/data.js: Este arquivo contém a disposição das imagens.

Agora vamos criar alguns componentes e estilos para nosso jogo da memória.

jogomemoriaanabg-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

O diretório public contém arquivos estáticos, como imagens de aplicativos. O diretório src contém o código-fonte do aplicativo, incluindo componentes, arquivos CSS e arquivos de configuração.

Criando os componentes

Para começar, criaremos três componentes principais: Card, Board y Modal. O componente Card representará uma carta individual do jogo, o componente Board será responsável por mostrar todas as cartas do tabuleiro e o componente Modal ficará encarregado de exibir uma mensagem quando o usuário vencer o jogo da memória.

Vamos começar com o componente Card. No arquivo src/Card.js, adicionamos o seguinte código:

Neste código, criamos um componente funcional Card que recebe duas propriedades: card y handleCardClick. O objeto card representa um cartão individual com um identificador exclusivo e status de flip. A função handleCardClick invocado quando um cartão é clicado.

Dentro do componente Card, Usamos uma estrutura HTML para representar a letra. A classe CSS card é aplicado ao contêiner pai da carta, e a classe flipped ele é adicionado dinamicamente quando o cartão é virado. Dentro do container, temos dois elementos div para representar a frente e o verso do cartão.

Agora vamos criar o componente Board no arquivo src/Board.js:

Neste código, criamos um componente funcional Board com uma função shuffleArray quem recebe uma propriedade: array, que consiste em duplicar a imagem e exibi-la aleatoriamente no quadro.

Continuamos com a criação de cinco useState (declara) que determinará as funções do conselho:

1. Cards: É um array onde as cartas serão mostradas.
2. FlippedCards: que é invocado quando um cartão é clicado. Esta função atualiza o status dos cartões, alterando o status de inversão do cartão correspondente.
3. Moves: mostrará o número de movimentos após o término do jogo.
4. GameOver: este estado será executado quando o usuário encontrar os pares de cartas ao final do jogo.
5. IsDisabled: informa quando o jogo está ativado.

Continuamos com a função createBoard, responsável por iniciar o jogo.

Utilizamos o método flatMap() que é um array ppara aplicar uma função em cada elemento e então nivelar o resultado em um. Esta função duplica os cartões e atribui um novo ID ao cartão duplicado. Em seguida será executada a função shuffleArray, que colocará as cartas aleatoriamente.

Mais tarde mostramos um título H1 e usamos o componente Board para mostrar todas as cartas do tabuleiro. Assim aplicamos a prop className definida no framework Tailwind para dar estilos CSS, deixando o texto em negrito em verde e azul. Então, quando o usuário passar o ponteiro sobre o texto, ele mudará de cor de rosa para amarelo.

A seguir, adicionamos um div para criar o painel com quatro colunas, três linhas, margens e formatação centralizada. Além disso, usamos o método map para iterar sobre o array card e retornar um novo array de acordo com o id ao clicar na carta.

A seguir, teremos um botão com fundo preto e texto branco, que permite ao usuário reiniciar o jogo quando quiser.

Finalmente, criamos o componente Modal, que será ativado no momento em que o usuário finalizar o jogo e mostrará a quantidade de jogadas, além de um aviso de Você ganhou!

Neste código visualizamos um botão para iniciar um novo jogo, que é a função handleNewGame, que deve atender à seguinte condição: se gameOver for verdade, então a mensagem Você Ganhou! Caso contrário, deverá ficar oculto.

Você ganhou!

Experimente o jogo da memória

Terminamos de criar nosso jogo de memória com React e Tailwind CSS! Agora é hora de experimentar no navegador.

No seu terminal, execute o seguinte comando para iniciar o aplicativo:

npm run dev

Isso abrirá o aplicativo no seu navegador e você poderá ver o jogo da memória em ação. Clique nas cartas para virá-las e encontrar todos os pares.

Chegamos ao final deste artigo, onde aprendemos como criar um jogo de memória emocionante usando React e Tailwind CSS. Usamos o poder do React para criar uma interface dinâmica e responsiva e complementamos o design com o utilitário de estilo CSS Tailwind.

Além disso, forneci instruções passo a passo para seguir e executar o projeto em seu próprio ambiente de desenvolvimento. Lembre-se de que este é apenas um exemplo básico de jogo da memória. Você pode personalizá-lo e expandi-lo de acordo com suas necessidades.

Divirta-se criando seus próprios jogos e desafie sua memória!