Um jogo educativo interativo para aprender SQL de forma divertida e envolvente
Teste para projeto de TCC - Ciência da Computação
Detetive de Dados é um jogo educativo desenvolvido como teste para o Trabalho de Conclusão de Curso (TCC) do curso de Ciência da Computação. O projeto tem como objetivo ensinar conceitos fundamentais de SQL através de uma narrativa investigativa envolvente, tornando o aprendizado de banco de dados mais acessível e divertido.
Os jogadores assumem o papel de um detetive digital em Neon-City, uma metrópole futurística onde humanos e androides coexistem, e devem resolver um mistério usando consultas SQL.
O jogo foi desenvolvido para tornar o aprendizado de SQL mais acessível e divertido, combinando:
- Narrativa envolvente com personagens e história cativante
- Aprendizado progressivo com 12 casos que aumentam gradualmente em complexidade
- Feedback imediato com validação de consultas e dicas contextuais
- Gamificação com sistema de conquistas e progresso visual
Este projeto foi desenvolvido como parte do Trabalho de Conclusão de Curso (TCC) do curso de Ciência da Computação, com foco em:
- Educação em Computação - Metodologias inovadoras para ensino de programação
- Gamificação - Aplicação de elementos de jogos na educação
- Desenvolvimento Web - Tecnologias modernas para aplicações educativas
- Banco de Dados - Ensino prático de conceitos fundamentais de SQL
- Acesse o jogo através do link do GitHub Pages
- Leia o briefing de cada caso para entender o objetivo
- Construa consultas SQL usando o construtor visual ou digitando diretamente
- Execute as consultas e analise os resultados
- Resolva o mistério para desbloquear o próximo caso
- Complete todos os 12 casos para desvendar a conspiração completa
SELECTeFROM- Consultas básicasWHERE- Filtros e condiçõesJOIN- Relacionamento entre tabelasGROUP BYeCOUNT- Agregação de dadosORDER BYeLIMIT- Ordenação e limitaçãoLIKE- Busca por padrõesIN- Seleção múltipla
detetive-dados/
├── 📄 index.html # Página principal
├── 📄 avaliacao.html # Avaliação final
├── 📄 conceitos.html # Conceitos de banco de dados
├── 📄 tutorial.html # Tutorial do jogo
├── 📄 quiz.html # Quiz interativo
├── 📄 erro.html # Página de erro
├── 📄 README.md # Documentação
├── 📁 assets/ # Recursos do projeto
│ ├── 🎨 css/
│ │ └── style.css # Estilos principais
│ └── 📜 js/
│ ├── database.js # Gerenciamento do banco
│ ├── game.js # Lógica do jogo
│ ├── sql-wasm.js # SQL WebAssembly
│ └── sql-wasm.wasm # Binário WebAssembly
└── 📁 casos/ # Casos do jogo
├── caso-01.html # Caso 1: SELECT básico
├── caso-02.html # Caso 2: Colunas específicas
├── caso-03.html # Caso 3: WHERE simples
├── caso-04.html # Caso 4: Múltiplas condições
├── caso-05.html # Caso 5: Tipos de dados
├── caso-06.html # Caso 6: Operadores de comparação
├── caso-07.html # Caso 7: JOIN entre tabelas
├── caso-08.html # Caso 8: COUNT e GROUP BY
├── caso-09.html # Caso 9: GROUP BY avançado
├── caso-10.html # Caso 10: ORDER BY e LIMIT
├── caso-11.html # Caso 11: LIKE e wildcards
└── caso-12.html # Caso 12: Operador IN
- HTML5 - Estrutura das páginas
- CSS3 - Estilização e responsividade
- JavaScript ES6 - Lógica do jogo e interatividade
- SQL.js - SQLite compilado para WebAssembly
- WebAssembly - Execução de SQL no navegador
- Google Fonts (Orbitron, JetBrains Mono) - Tipografia futurística
- CSS Grid/Flexbox - Layout responsivo
- CSS Animations - Efeitos visuais
- GitHub Pages - Hospedagem gratuita e confiável
- Paleta de cores neon com tons de azul, roxo e verde
- Tipografia futurística com fontes Orbitron e JetBrains Mono
- Interface inspirada em terminais de computador
- Animações suaves para melhor experiência do usuário
- Design adaptativo para desktop, tablet e mobile
- Interface touch-friendly para dispositivos móveis
- Otimização para diferentes tamanhos de tela
- Botões inteligentes para construção visual de SQL
- Montagem automática de consultas complexas
- Validação em tempo real da sintaxe
- Dicas contextuais específicas para cada caso
- Sugestões automáticas após tentativas incorretas
- Explicações detalhadas dos conceitos SQL
- Sistema de progresso visual com barra de progresso
- Conquistas desbloqueáveis por caso resolvido
- Feedback imediato com mensagens de sucesso/erro
- Bloqueio inteligente - próximo caso só libera após resolver o atual
- Salvamento automático do progresso no localStorage
- Continuidade - retome de onde parou
- Navegador web moderno (Chrome, Firefox, Safari, Edge)
- Servidor web local (opcional, mas recomendado)
# Clone o repositório
git clone https://github.com/mayasrl/detetive-dados.git
# Entre na pasta do projeto
cd detetive-dados
# Abra o index.html no navegador
# OU use um servidor local:
python -m http.server 8000
# Acesse: http://localhost:8000Contribuições são sempre bem-vindas! Para contribuir:
- Fork o projeto
- Crie uma branch para sua feature (
git checkout -b feature/AmazingFeature) - Commit suas mudanças (
git commit -m 'Add some AmazingFeature') - Push para a branch (
git push origin feature/AmazingFeature) - Abra um Pull Request
- Novos casos com conceitos SQL avançados
- Melhorias na interface e experiência do usuário
- Tradução para outros idiomas
- Otimizações de performance
- Novos temas visuais
⭐ Se você gostou do projeto, não esqueça de dar uma estrela! ⭐
Desenvolvido com 💛 por @mayasrl.