Voltar para projetos

Case de projeto

Synthwave Space

Jogo 2D em JavaScript puro com visual retrô-futurista, controles por teclado/toque e progressão dinâmica.

Meu papelDesenvolvedor
Tecnologias utilizadas
  • JavaScript
  • HTML5 Canvas
  • CSS
  • Web Audio API
Abrir vídeo
Capa do projeto Synthwave Space
Capa do projeto

Problema

Construir um game loop estável sem frameworks.

Manter jogabilidade fluida em diferentes tamanhos de tela.

Solução

Arquitetura resumida
  • Entrada de teclado e toque para movimentação e ações.
  • Estado do jogo: energia, escudo, pontuação e multiplicador.
  • Temporizadores para spawn de inimigos, power-ups e eventos.
Decisões técnicas
  1. Renderização com HTML5 Canvas e loop contínuo baseado em delta time.
  2. Entidades separadas (nave, inimigos, tiros, power-ups) para facilitar evolução.
  3. Dificuldade adaptativa com escalonamento de ondas e hazards.

Resultado

Consolidei fundamentos de desenvolvimento de jogos em JavaScript puro.

  • Game loop, colisão e gerenciamento de estado em Canvas.
  • Design de gameplay com progressão e balanceamento.
  • Integração de áudio e efeitos visuais para feedback do jogador.
  • Arquitetura front-end modular sem dependências pesadas.

Mais sobre o projeto

Detalhes completos do case, colapsados para leitura opcional.

Descrição completa

Projeto criado para praticar arquitetura de jogo 2D em JavaScript puro, com foco em performance, feedback visual e experiência mobile/desktop.

Jogo 2D em JavaScript + HTML5 Canvas com HUD em tempo real, dificuldade progressiva e ambientação synthwave com áudio e partículas.

Entreguei uma experiência consistente entre desktop e mobile.

Deixei uma base extensível para novos modos e conteúdos.

Problema

  • Criar progressão de dificuldade sem perder legibilidade.
  • Implementar efeitos visuais e sonoros mantendo boa performance.
Funcionalidades e destaques
  • Controle por teclado no desktop e toque no mobile.
  • Sistema de energia, escudo, combates com boss e multiplicador de score.
  • Power-ups, efeitos de partículas, shake de câmera e feedback visual.
  • Persistência de recordes para acompanhar progressão.
  • Visual retrô-futurista consistente com identidade synthwave.
  • Experiência adaptada para desktop e mobile.
  • Loop de jogo leve e responsivo com JavaScript puro.
  • Base pronta para novas fases, inimigos e mecânicas.
Arquitetura técnica e dados
  • Camada audiovisual com efeitos synthwave e trilha dinâmica via Web Audio API.

Arquitetura técnica

Como o case foi pensado como produto

Jogo 2D em JavaScript puro com visual retrô-futurista, controles por teclado/toque e progressão dinâmica.

JavaScriptLinguagemHTML5 CanvasPlataforma webCSSPlataforma webWeb Audio APIPlataforma web

Dados utilizados

  • Entrada de teclado e toque para movimentação e ações.
  • Estado do jogo: energia, escudo, pontuação e multiplicador.
  • Temporizadores para spawn de inimigos, power-ups e eventos.
  • Objetos em cena (nave, inimigos, projéteis, partículas e HUD).

Principais componentes

  • Controle por teclado no desktop e toque no mobile.
  • Sistema de energia, escudo, combates com boss e multiplicador de score.
  • Power-ups, efeitos de partículas, shake de câmera e feedback visual.
  • Persistência de recordes para acompanhar progressão.

Decisões técnicas

  • Game loop, colisão e gerenciamento de estado em Canvas.
  • Design de gameplay com progressão e balanceamento.
  • Integração de áudio e efeitos visuais para feedback do jogador.
  • Arquitetura front-end modular sem dependências pesadas.
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 inicie a partida.
Mídia adicional
Gameplay com ondas progressivas, efeitos visuais e ambientação neon.
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