Dados utilizados
- Quadros da câmera do jogador ou posição do ponteiro.
- Ranking salvo no navegador.
Case de projeto
Shadow Dojo
Jogo de corte no navegador controlado pela ponta do dedo na câmera ou pelo mouse.
Problema
Jogos com câmera costumam travar quem não tem câmera ou não quer liberá-la.
Um corte precisa reagir ao movimento real, não a qualquer ponto parado na tela.
Solução
Arquitetura resumida
- Quadros da câmera do jogador ou posição do ponteiro.
- Ranking salvo no navegador.
Decisões técnicas
- Rastreamento do ponto 8 da mão com espelhamento, agendado por quadro de vídeo.
- Lâmina ativa só com 80 ms ou 4 px de movimento.
- Frutas partidas em duas metades na direção do corte, com arco calculado pela altura do palco.
Resultado
Um estudo de jogo com câmera que continua jogável sem ela.
- Canvas 2D
- Visão computacional no navegador
- Alternativa sem câmera
- Lógica de jogo testável
Aprendizados e limitações
- Rastreia uma mão.
- O ranking fica no navegador na produção.
- A produção vem de uma branch fora da main, com testes de erro de câmera falhando no CI.
Mais sobre o projeto
Detalhes completos do case, colapsados para leitura opcional.
Descrição completa
Shadow Dojo é um jogo de corte no navegador em que a ponta do dedo indicador, lida pela câmera, ou o mouse vira a lâmina.
A lâmina só corta em movimento; cada fruta se parte em duas metades na direção do corte, e o arco de lançamento acompanha a altura do palco.
Combos de até cinco, bombas, três vidas e dificuldade progressiva ficam em uma lógica pura testada separadamente da tela.
A produção vem de uma branch ainda não mesclada na main do repositório.
React e Vite com MediaPipe Tasks Vision e Canvas 2D; lógica pura testada em Vitest e fluxos em Playwright com axe.
Funcionalidades e destaques
- Modo câmera e modo mouse ou toque.
- Combos de até cinco, bombas e três vidas.
- Dificuldade progressiva.
- Erros de câmera classificados por tipo.
- Ranking local.
- Corta só quando a lâmina se move, por tempo ou distância mínimos.
- Parte cada fruta em duas metades na direção do corte.
- Oferece modo mouse para quem não usa a câmera.
- Separa a lógica do jogo em funções puras com testes.
Arquitetura técnica e dados
Arquitetura técnica
Como o case foi pensado como produto
Jogo de corte no navegador controlado pela ponta do dedo na câmera ou pelo mouse.
MediaPipe Tasks VisionIACanvas APIPlataforma webReactFrameworkTypeScriptLinguagemViteFrameworkVitestFrameworkPlaywrightFramework
Principais componentes
- Modo câmera e modo mouse ou toque.
- Combos de até cinco, bombas e três vidas.
- Dificuldade progressiva.
- Erros de câmera classificados por tipo.
- Ranking local.
Decisões técnicas
- Canvas 2D
- Visão computacional no navegador
- Alternativa sem câmera
- Lógica de jogo testável
Trade-offs
- Rastreia uma mão.
- O ranking fica no navegador na produção.
- A produção vem de uma branch fora da main, com testes de erro de câmera falhando no CI.
Como executar
- npm ci
- npm run dev e abra http://localhost:3000
- npm run typecheck, npm test e npm run e2e
Créditos
Desenvolvido por Matheus Siqueira - https://www.matheusdev.tech
Próximo projetoAd Performance Intelligence
Dashboard de BI em Next.js que compara Google Ads e Meta Ads com dados simulados: KPIs, funil e ROAS.
Ver case completo