Voltar para projetos

Case de projeto

Dino Chrome

Clone do jogo do Chrome para treinar lógica de colisão, pontuação e progressão.

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

Problema

Construir um game loop estável no navegador.

Detectar colisões entre o dino e obstáculos em tempo real.

Solução

Arquitetura resumida
  • Entrada do teclado para ações de salto e movimento.
  • Estados de jogo (velocidade, pontuação, colisões).
  • Timers para spawn e reset de obstáculos.
Decisões técnicas
  1. Renderização em Canvas com loop contínuo.
  2. Sistema simples de colisão e reset de obstáculos.
  3. Aumento gradual de velocidade para desafio.

Resultado

Consolidei fundamentos de game loop em JS.

  • Game loop e renderização em Canvas.
  • Lógica de colisão e estados do jogo.
  • Organização modular de código front-end.
  • Prototipação rápida de jogos 2D.

Mais sobre o projeto

Detalhes completos do case, colapsados para leitura opcional.

Descrição completa

Projeto criado para praticar game loop, colisão e controle de personagem em um jogo 2D simples.

JavaScript e HTML5 Canvas para renderização e lógica, com CSS para layout.

Implementei colisões e pontuação em tempo real.

Deixei uma base pronta para novos níveis.

Problema

  • Manter progressão de dificuldade sem quebrar a jogabilidade.
  • Organizar estados do jogo para reinício rápido.
Funcionalidades e destaques
  • Controles responsivos para salto.
  • Obstáculos dinâmicos com dificuldade progressiva.
  • Pontuação em tempo real.
  • Reinício rápido da partida.
  • Jogo leve e responsivo em navegador.
  • Lógica de colisão consistente.
  • Base clara para evoluir mecânicas e assets.
  • Reprodução fiel da experiência clássica do Dino.
Arquitetura técnica e dados
  • Separação de lógica de jogo e UI.

Arquitetura técnica

Como o case foi pensado como produto

Clone do jogo do Chrome para treinar lógica de colisão, pontuação e progressão.

JavaScriptLinguagemHTML5Plataforma webCanvasPlataforma webCSSPlataforma web

Dados utilizados

  • Entrada do teclado para ações de salto e movimento.
  • Estados de jogo (velocidade, pontuação, colisões).
  • Timers para spawn e reset de obstáculos.
  • Sprites e posições em tela.

Principais componentes

  • Controles responsivos para salto.
  • Obstáculos dinâmicos com dificuldade progressiva.
  • Pontuação em tempo real.
  • Reinício rápido da partida.

Decisões técnicas

  • Game loop e renderização em Canvas.
  • Lógica de colisão e estados do jogo.
  • Organização modular de código front-end.
  • Prototipação rápida de jogos 2D.
Como executar
  1. Clone o repositório.
  2. Abra o arquivo index.html no navegador.
  3. Use o teclado para controlar o personagem.
  4. Acompanhe a pontuação e evite obstáculos.
Mídia adicional
Gameplay do clone do Dino Chrome.
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