memory-game GitHub Details, Stars and Alternatives

Loading repository data…

memory-game

Recriação React do "Jogo da Memória" do desafio DIO (Ri Happy - Front-end do Zero). Aprimoramento de habilidades React com uma versão turbinada do projeto original em HTML, CSS e JS puro (branch first-version). Componentes reutilizáveis e a beleza do React para uma experiência repaginada! ✨🎮🚀

#css3#html5#javascript

README preview

🧠 Jogo da Memória React - Desafio DIO 🚀

E aí, Dev! 👋 Seja bem-vindo(a) ao meu projeto de recriação do clássico "Jogo da Memória"! 🎮

Lembra daquele desafio super bacana do curso Ri Happy - Front-end do Zero da DIO? Aquele feito com HTML, CSS e JavaScript puro? Pois é, ele marcou meus primeiros passos no mundo do Front-end, e a first-version branch guarda essa nostalgia com carinho!

Mas como a gente não para de evoluir por aqui... Decidi pegar esse projeto e turbiná-lo com o poder do React! O objetivo? Colocar em prática e aprimorar minhas habilidades nessa biblioteca incrível.

Então, prepare-se para uma experiência de jogo da memória repaginada, com componentes reutilizáveis, um fluxo de dados unidirecional (quase sempre ) e toda a beleza do React!

🛠️ Tecnologias Utilizadas

Este projeto foi construído com as seguintes tecnologias:

React: A estrela principal! ⚛️ Para criar a interface de usuário dinâmica e interativa.
JavaScript: A linguagem que faz tudo acontecer. ☕
CSS: Para dar aquele visual bacana e estilizado. 💅
HTML: A estrutura básica da nossa página. 뼈대
React Router DOM: Para a navegação entre as diferentes telas do jogo. 🗺️

📂 Estrutura do Projeto

memory-game/
├── build/              # Arquivos pra produção
├── public/
├── src/
│   ├── assets/         # Imagens, sons e outros arquivos estáticos
│   ├── components/     # Componentes React reutilizáveis
│   │   ├── contexts/   # Context API para gerenciar o estado global
│   │   ├── gamescreen/ # Componentes da tela do jogo
│   │   ├── homescreen/ # Componentes da tela inicial
│   │   └── scoredashboard/ # Componentes da tela de pontuação
│   ├── App.css         # Estilos globais da aplicação
│   ├── App.js          # Componente principal da aplicação
│   ├── index.css       # Estilos base e resets
│   ├── index.js        # Ponto de entrada da aplicação
│   └── reportWebVitals.js
├── .gitignore
├── package-lock.json
├── package.json
└── README.md         # Você está aqui! 📍

🕹️ Como Jogar

Acesse o Jogo da Memoria através deste link: Jogo da Memoria
Divirta-se!

Tela Inicial: Digite seu nome de jogador e escolha o nível de dificuldade (Fácil, Médio, Difícil). 🤔
Tela do Jogo: As cartas com emojis serão exibidas viradas para baixo. 🃏
Seu Objetivo: Encontre todos os pares de emojis iguais, clicando em duas cartas por vez. 🧐
Cuidado! Se as cartas não forem um par, elas virarão novamente. 😥
Tempo e Vidas: Fique de olho no tempo restante e no número de vidas! ⏳❤️
Pontuação: A cada par encontrado, você ganha pontos e pode receber bônus por rapidez! 💰
Fim de Jogo: O jogo termina quando você encontrar todos os pares ou suas vidas chegarem a zero. 💀
Tela de Pontuação: Veja sua colocação no ranking e desafie-se novamente! 🏆

📷 Preview

Aqui estão algumas capturas de tela do projeto em diferentes dispositivos:

🙌 Contribuições

Sinta-se à vontade para abrir issues com sugestões, bugs ou ideias de melhorias! Pull requests também são super bem-vindos! 🤝

Agradecimentos

Agradeço à DIO por fornecer o desafio original e por me inspirar a aprimorar minhas habilidades em React. Um agradecimento especial à comunidade React por sua incrível documentação e suporte!

📜Licença

Este projeto está sob a licença MIT. Sinta-se à vontade para usar, modificar e compartilhar! 🚀

✨ Developer

👨‍💻 Este projeto foi desenvolvido por Bruno Teixeira como parte do meu portfólio de desenvolvimento Front-End. Sinta-se à vontade para entrar em contato ou contribuir com o projeto!