Voltar para projetos

Case de projeto

Estilingue

Bubble shooter em canvas com mira por toque/mouse, ricochete nas paredes e sugestões de jogada.

Meu papelDesenvolvedor
Tecnologias utilizadas
  • JavaScript
  • HTML5
  • Canvas
  • CSS
  • Hammer.js
Ver repositório (abre em nova aba)Abrir vídeo
Capa do projeto Estilingue
Capa do projeto

Problema

Garantir mira precisa em mouse e toque.

Oferecer jogadas avançadas com ricochete nas paredes.

Solução

Arquitetura resumida
  • Entrada de mouse e toque para direção e disparo.
  • Grade hexagonal e cores das bolhas para detecção de clusters.
  • Cálculo de colisão e reflexão nas paredes.
Decisões técnicas
  1. Loop de renderização em HTML5 Canvas com atualização contínua.
  2. Sistema de mira responsiva para mouse e toque via Hammer.js.
  3. Cálculo local de dicas de jogada baseado nos clusters visíveis.

Resultado

Entreguei um bubble shooter fluido com dicas táticas locais.

  • Game loop e física simples em HTML5 Canvas.
  • Suporte a gestos e toque com Hammer.js.
  • Lógica de clusters e ricochete para bubble shooter.
  • UI responsiva com foco em performance.

Mais sobre o projeto

Detalhes completos do case, colapsados para leitura opcional.

Descrição completa

A ideia era criar um bubble shooter leve e jogável no navegador, com controles amigáveis no desktop e no mobile.

Jogo em JavaScript com HTML5 Canvas, gestos via Hammer.js e UI responsiva em CSS.

Implementei controles touch/mouse e ricochete consistente.

Deixei a base pronta para evolução de níveis e mecânicas.

Problema

  • Sugerir tiros estratégicos sem depender de backend.
  • Manter performance estável no Canvas.
Funcionalidades e destaques
  • Mira fluida com controle por toque ou mouse.
  • Ricochete nas laterais para jogadas avançadas.
  • Dicas táticas calculadas localmente.
  • Clusters hexagonais e sistema de cores consistente.
  • Recorde salvo no navegador.
  • Interface responsiva e visual minimalista.
  • Jogabilidade direta sem instalação ou backend.
  • Sugestões estratégicas em tempo real.
  • Base pronta para níveis, power-ups e novos modos.
  • Experiência consistente em desktop e mobile.
Arquitetura técnica e dados
  • Persistência de recorde via armazenamento local.

Arquitetura técnica

Como o case foi pensado como produto

Bubble shooter em canvas com mira por toque/mouse, ricochete nas paredes e sugestões de jogada.

JavaScriptLinguagemHTML5Plataforma webCanvasPlataforma webCSSPlataforma webHammer.jsFramework

Dados utilizados

  • Entrada de mouse e toque para direção e disparo.
  • Grade hexagonal e cores das bolhas para detecção de clusters.
  • Cálculo de colisão e reflexão nas paredes.
  • Recorde persistido localmente no navegador.

Principais componentes

  • Mira fluida com controle por toque ou mouse.
  • Ricochete nas laterais para jogadas avançadas.
  • Dicas táticas calculadas localmente.
  • Clusters hexagonais e sistema de cores consistente.
  • Recorde salvo no navegador.
  • Interface responsiva e visual minimalista.

Decisões técnicas

  • Game loop e física simples em HTML5 Canvas.
  • Suporte a gestos e toque com Hammer.js.
  • Lógica de clusters e ricochete para bubble shooter.
  • UI responsiva com foco em performance.
Como executar
  1. Clone o repositório.
  2. Abra o arquivo index.html no navegador.
  3. Opcional: sirva com python -m http.server 8000.
  4. Acesse http://localhost:8000 e jogue.
Mídia adicional
Mira por toque, ricochete e dicas táticas em tempo real.
Créditos

Desenvolvido por Matheus Siqueira.

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