Projeto desenvolvido com instruções de Gabriela Pinheiro na trilha de estudo do Bootcamp "Eduzz Fullstack Developer #2" da dio.me.
Link da base utilizada neste projeto: SpruceGabriela/genesis-dio.
Abaixo seguem modificações feitas em relação ao projeto base:
- Remoção de todos os
alert()- substituídos por modal elegante com informações detalhadas - Criação de círculo no centro do jogo exibindo o nível atual com fonte responsiva
- Implementação de modal para exibição de Game Over com:
- Nível em que o jogador errou
- Quantidade de níveis completados com pluralização dinâmica
- Seu melhor recorde
- Correção da lógica de score: só incrementa quando acerta, não quando inicia o nível
- Refatoração do código JavaScript com constantes para elementos do DOM
- Integração do Bootstrap 5.3 para melhor estrutura e responsividade
- Design aprimorado com:
- Gradientes suaves nas cores
- Efeitos hover melhorados
- Animações fluidas (fade-in, slide-up)
- Cores mais vibrantes nos botões
- Shadows e profundidade visual
- Responsividade completa:
- Mobile-first design (até 576px)
- Tablet (577px - 768px)
- Desktop (769px+)
- Uso de
clamp()para tipografia fluida - Aspect-ratio responsivo para o jogo circular
- Uso de CSS Variables para melhor manutenção do código
- Cabeçalho com barra de navegação para controlar play e demonstrar recorde
- Recorde utiliza
localStoragepara guardar dados no navegador - Efeitos sonoros para as cores
- Responsividade adaptativa com media queries
Projeto online em: genius.zancanela.dev.br
Links Interessantes: