Voltar para: Games com Phaser + Reactjs

Chegou o momento de unir tudo.
React organiza a interface.
Phaser entrega o gameplay.
Você entrega um produto real publicado na internet. 🌍🎮

Este projeto final consolida arquitetura, organização, lógica e publicação profissional.

🎯 Objetivos do Projeto

Ao concluir este módulo o aluno deverá ser capaz de:

Planejar e estruturar um jogo 2D completo
Integrar React e Phaser corretamente
Implementar sistema de pontuação funcional
Criar fluxo completo de partida (Menu → Jogo → Game Over → Reinício)
Garantir responsividade básica
Publicar aplicação online
Documentar tecnicamente o projeto

📋 Requisitos Obrigatórios

O projeto deverá conter os seguintes elementos:

1️⃣ Menu Inicial (React)

Funções mínimas:

Botão “Iniciar Jogo”
Exibição de High Score
Controle de som (opcional avançado)
Layout responsivo

O menu deve estar fora do canvas Phaser, implementado via React.

2️⃣ Jogo Funcional (Phaser)

O jogo deve conter:

Personagem controlável
Sistema de movimento
Obstáculos ou inimigos
Colisão funcional
Sistema de fases ou aumento de dificuldade

A lógica principal deve estar estruturada em Scenes organizadas.

3️⃣ Sistema de Pontuação

Deve incluir:

Contagem em tempo real
Atualização via eventos
Integração com React
Salvamento de High Score via localStorage

4️⃣ Tela de Game Over

Deve conter:

Exibição da pontuação final
Comparação com High Score
Botão “Jogar Novamente”
Retorno ao menu ou reinício da Scene

Fluxo esperado:

Menu → Jogo → Game Over → Reinício

5️⃣ Responsividade

O jogo deve:

Ajustar-se a diferentes tamanhos de tela
Não quebrar layout em mobile
Manter proporção do canvas
Centralizar corretamente o conteúdo

Configuração recomendada no Phaser:

scale: {
  mode: Phaser.Scale.FIT,
  autoCenter: Phaser.Scale.CENTER_BOTH
}

6️⃣ Deploy Online

O projeto deve estar publicado:

Vercel ou Netlify
Funcionando corretamente em produção
Assets carregando corretamente
Persistência funcionando

📦 Estrutura Recomendada do Projeto

/src
   /components
   /game
       /scenes
   /assets
README.md

Separação clara entre interface e engine.

📤 Entrega do Projeto

O aluno deverá entregar:

🔗 1. Link Publicado

URL funcional do jogo
Acesso público
Sem erros de carregamento

💻 2. Repositório GitHub

O repositório deve conter:

Código organizado
README completo
Histórico de commits
Estrutura limpa

📄 3. Documentação Técnica

A documentação deve conter:

Descrição do projeto
Tecnologias utilizadas
Estrutura de pastas
Principais decisões técnicas
Como rodar localmente
Link do deploy

🧪 Critérios de Avaliação

Critério	Peso
Funcionamento do jogo	30%
Integração React + Phaser	20%
Organização do código	15%
Persistência e pontuação	15%
Responsividade	10%
Documentação	10%

🏆 Resultado Esperado

Ao concluir o projeto, o aluno terá:

✅ Um jogo 2D completo
✅ Experiência real de integração front-end + engine
✅ Projeto publicado online
✅ Portfólio técnico utilizável
✅ Base sólida para projetos maiores