CodeCraft é um jogo de memória interativo desenvolvido em React Native, Expo e TypeScript. O objetivo do jogo é combinar pares de conceitos e definições de JavaScript, ajudando os jogadores a aprender enquanto se divertem.
- Jogo de Memória: Combine conceitos e definições de JavaScript, virando cartas e encontrando pares.
- Marcar para Estudo: Dê um duplo clique nas cartas para salvá-las e revisá-las posteriormente.
- Pontuação e Temporizador: Acompanhe sua pontuação e o tempo restante durante a partida.
- Design Responsivo: Compatível com dispositivos móveis e emuladores de Android/iOS.
- React Native: Biblioteca para desenvolvimento mobile.
- Expo: Framework para simplificar o ambiente React Native.
- TypeScript: Para um desenvolvimento mais seguro e tipado.
- React Navigation: Gerenciamento de navegação entre telas.
- Async Storage: Armazenamento local para salvar cartas marcadas para estudo.
Antes de começar, certifique-se de ter os itens abaixo instalados:
git clone https://github.com/gustavodesousalima/MemoryGame.git
cd MemoryGame
npm install
npx expo start
- Após rodar o comando
npx expo start, um QR Code será exibido no terminal ou na interface do Expo. - Abra o aplicativo Expo Go no seu dispositivo móvel e escaneie o QR Code para iniciar o jogo.
- iOS: Baixar na App Store.
- Android: Baixar na Google Play.
- Para rodar o projeto em um emulador:
- Configure um emulador Android/iOS no seu ambiente local.
- Escolha a opção correspondente no terminal do Expo.
Após a tela de carregamento, você será redirecionado para a tela inicial do jogo onde temos as opções de iniciar o jogo ou ir para a lista de cards para estudar.
Na tela inicial do jogo, os cards são renderizados com o conteúdo visível, permitindo que o usuário memorize os pares por 15 segundos. Após esse período, os cards são virados para baixo, ocultando o conteúdo. Para formar uma combinação, o usuário deve clicar em um card e, em seguida, tentar lembrar e selecionar o card correspondente ao seu par.
Para o o jogo terminar o tempo precisa chegar a zero ou o usuário precisar acertar todos os pares. Quando finalizar aparece um pop up com a pontuação e a opção de jogar novamente ou voltar para a tela inicial.
O projeto foi desenvolvido com o conceito de componentização, facilitando a manutenção e a escalabilidade.
├───assets/ ├───components/ │ ├── Card/ │ ├── Grid/ │ ├── Header/ ├── screens/ │ ├── GameScreen/ │ ├── HomeScreen/ │ ├── StudyListScreen/ ├── App.tsx
expo: Framework para desenvolvimento React Native.react-navigation: Gerenciamento de navegação entre telas.@react-native-async-storage/async-storage: Armazenamento local para recursos persistentes.react-native: Biblioteca base para o desenvolvimento mobile.