Voltar para projetos

Case de projeto

Subway Surfers

Jogo inspirado no Subway Surfers para estudo de lógica e desenvolvimento de games.

Meu papelDesenvolvedor
Tecnologias utilizadas
  • JavaScript
  • HTML5
  • Canvas
  • CSS
Abrir vídeo
Capa do projeto Subway Surfers
Capa do projeto

Problema

Estruturar um game loop fluido no navegador.

Implementar colisões e obstáculos em tempo real.

Solução

Arquitetura resumida
  • Entrada do teclado para movimentação.
  • Estados de jogo (velocidade, pontuação, colisões).
  • Timers para spawn de obstáculos.
Decisões técnicas
  1. Renderização em Canvas com loop de atualização contínuo.
  2. Sistema simples de colisão e reset de obstáculos.
  3. Incremento 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 personagens em um ambiente 2D.

JavaScript e HTML5 Canvas para renderização, com CSS para layout e HUD.

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

Criei uma base extensível para futuras mecânicas.

Problema

  • Criar progressão de dificuldade sem travar a jogabilidade.
  • Organizar o código para facilitar novas fases e assets.
Funcionalidades e destaques
  • Movimentação fluida do personagem.
  • Obstáculos dinâmicos com colisão.
  • Pontuação em tempo real.
  • Base pronta para novos níveis e skins.
  • Jogo responsivo com boa performance em navegador.
  • Controle e colisão consistentes.
  • Estrutura clara para evolução do projeto.
  • Aprendizado prático de game design básico.
Arquitetura técnica e dados
  • Arquitetura modular para lógica de jogo e UI.

Arquitetura técnica

Como o case foi pensado como produto

Jogo inspirado no Subway Surfers para estudo de lógica e desenvolvimento de games.

JavaScriptLinguagemHTML5Plataforma webCanvasPlataforma webCSSPlataforma web

Dados utilizados

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

Principais componentes

  • Movimentação fluida do personagem.
  • Obstáculos dinâmicos com colisão.
  • Pontuação em tempo real.
  • Base pronta para novos níveis e skins.

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 protótipo inspirado no Subway Surfers.
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