Voltar para: Games com Phaser + Reactjs

🎯 Objetivos da Lição

Ao final desta lição o aluno será capaz de:

• Implementar sistema de pontuação estruturado
• Criar timer regressivo utilizando Phaser Time Events
• Detectar eventos de derrota
• Implementar progressão simples de fase
• Emitir eventos personalizados do Phaser para o React
• Criar tela de Game Over fora do canvas
• Reiniciar o jogo preservando arquitetura desacoplada
• Entender fluxo completo do ciclo de partida

🏁 1. Sistema de Pontuação no Phaser

A pontuação deve ser:

✔ Controlada internamente pelo jogo
✔ Atualizada em eventos relevantes
✔ Enviada ao React para exibição externa

---

🔹 Variável de Pontuação

No create():

this.score = 0;

---

🔹 Incrementando Pontos

Exemplo: colisão com item coletável

collectItem(player, item) {
  item.destroy();
  this.score += 10;
}

---

🔹 Emitindo evento para React

Aqui entra a integração:

window.dispatchEvent(
  new CustomEvent("updateScore", {
    detail: this.score
  })
);

React ouvirá esse evento.

---

⏳ 2. Sistema de Timer

O tempo pode ser usado como:

• Condição de derrota
• Sistema de pressão
• Mecânica de fase

---

🔹 Criando Timer Regressivo

this.timeLeft = 60;this.timerEvent = this.time.addEvent({
  delay: 1000,
  callback: () => {
    this.timeLeft--;
    if (this.timeLeft <= 0) {
      this.gameOver();
    }
  },
  loop: true
});

---

🔹 Atualizando React com Tempo

window.dispatchEvent(
  new CustomEvent("updateTimer", {
    detail: this.timeLeft
  })
);

---

💀 3. Eventos de Derrota

Condições comuns:

• Vida = 0
• Tempo = 0
• Colisão com inimigo
• Queda fora do mapa

---

🔹 Exemplo de derrota por colisão

hitEnemy(player, enemy) {
  this.physics.pause();
  player.setTint(0xff0000);
  this.gameOver();
}

---

🔹 Função Game Over

gameOver() {
  window.dispatchEvent(
    new CustomEvent("gameOver", {
      detail: this.score
    })
  );
}

Repare: não reiniciamos direto.
Deixamos o React decidir o que fazer.

Separação de responsabilidades ✅

---

🗺️ 4. Sistema Simples de Fases

O conceito mínimo de fase pode ser:

• Meta de pontuação
• Tempo sobrevivido
• Quantidade de inimigos derrotados

---

🔹 Exemplo: avançar ao atingir meta

if (this.score >= 100) {
  this.scene.start("NextLevelScene");
}

Ou evoluir dificuldade dinamicamente:

if (this.score % 50 === 0) {
  this.enemySpeed += 20;
}

Isso cria progressão.

---

⚛️ 5. Criando Tela de Game Over no React

Agora o React assume o palco.

---

🔹 Escutando eventos do Phaser

useEffect(() => {
  function handleGameOver(event) {
    setFinalScore(event.detail);
    setIsGameOver(true);
  }  window.addEventListener("gameOver", handleGameOver);  return () => {
    window.removeEventListener("gameOver", handleGameOver);
  };
}, []);

---

🔹 Criando Tela Condicional

{isGameOver && (
  <div className="game-over">
    <h1>Game Over</h1>
    <p>Pontuação: {finalScore}</p>
    <button onClick={restartGame}>
      Jogar Novamente
    </button>
  </div>
)}

Renderização condicional bem aplicada ✔

---

🔁 6. Botão “Jogar Novamente”

Existem duas formas profissionais:

Opção 1 – Reiniciar Phaser via evento

function restartGame() {
  window.dispatchEvent(new Event("restartGame"));
  setIsGameOver(false);
}

No Phaser:

window.addEventListener("restartGame", () => {
  this.scene.restart();
});

---

Opção 2 – Destruir instância e recriar (mais robusto)

No componente Game:

game.destroy(true);
game = new Phaser.Game(config);

Mais indicado para projetos maiores.

---

🎯 Arquitetura Final da Comunicação

Fluxo completo:

Phaser → Evento → React
React → Evento → Phaser

Cada um cuidando da sua responsabilidade.

Sem acoplamento direto.
Sem dependência perigosa.
Arquitetura limpa.

---

🧪 Atividade Prática

Parte 1 – Sistema Interno

1. Criar variável score
2. Criar variável timeLeft
3. Implementar timer regressivo
4. Criar condição de derrota
5. Emitir evento gameOver

---

Parte 2 – React

1. Criar estado:
   • isGameOver
   • finalScore
2. Escutar evento gameOver
3. Exibir tela de Game Over
4. Criar botão Jogar Novamente
5. Reiniciar o jogo corretamente

---

🏆 Resultado Esperado

Ao final da aula o aluno deverá:

✅ Entender fluxo completo de fim de partida
✅ Implementar timer funcional
✅ Criar sistema de progressão simples
✅ Integrar eventos Phaser + React
✅ Construir tela de Game Over fora do canvas
✅ Reiniciar jogo corretamente