Voltar para: Games com Phaser + Reactjs

🎯 Objetivos da Lição

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

• Entender o funcionamento do localStorage
• Estruturar dados de progresso de forma organizada
• Salvar e recuperar informações persistentes
• Implementar salvamento automático
• Criar sistema de High Score
• Integrar persistência entre Phaser e React

---

🧠 Conteúdo

---

💾 1. O que é localStorage?

localStorage é uma API do navegador que permite salvar dados localmente no dispositivo do usuário.

Características:

• Armazena dados como string
• Persistente mesmo após fechar o navegador
• Capacidade aproximada de 5MB
• Acesso síncrono

Estrutura básica:

localStorage.setItem("key", "value");
localStorage.getItem("key");
localStorage.removeItem("key");

---

🏗 2. Estruturando Dados de Progresso

Não é profissional salvar dados soltos.

Errado:

localStorage.setItem("score", 100);
localStorage.setItem("level", 3);

Correto:

const gameData = {
  highScore: 120,
  level: 2,
  soundEnabled: true
};localStorage.setItem("gameProgress", JSON.stringify(gameData));

Sempre usar:

JSON.stringify() → salvar
JSON.parse() → recuperar

---

📥 3. Recuperando Progresso ao Iniciar

No início do jogo ou no React:

const savedData = localStorage.getItem("gameProgress");if (savedData) {
  const parsedData = JSON.parse(savedData);
  console.log(parsedData.highScore);
}

Isso evita sobrescrever dados existentes.

---

🔁 4. Salvamento Automático

O salvamento deve ocorrer:

• Ao terminar partida
• Ao bater novo recorde
• Ao mudar de fase

---

🔹 Função de atualização

function saveProgress(newScore) {
  const savedData = localStorage.getItem("gameProgress");
  let data = savedData ? JSON.parse(savedData) : { highScore: 0 };  if (newScore > data.highScore) {
    data.highScore = newScore;
  }  localStorage.setItem("gameProgress", JSON.stringify(data));
}

---

🏆 5. Implementando High Score

Fluxo ideal:

1. Final da partida dispara gameOver
2. React recebe pontuação
3. Verifica se é maior que High Score
4. Atualiza armazenamento

---

🔹 No React

useEffect(() => {
  function handleGameOver(event) {
    const finalScore = event.detail;    const savedData = localStorage.getItem("gameProgress");
    let data = savedData ? JSON.parse(savedData) : { highScore: 0 };    if (finalScore > data.highScore) {
      data.highScore = finalScore;
      localStorage.setItem("gameProgress", JSON.stringify(data));
    }    setHighScore(data.highScore);
  }  window.addEventListener("gameOver", handleGameOver);
  return () => window.removeEventListener("gameOver", handleGameOver);
}, []);

---

🧩 6. Boas Práticas

✔ Sempre validar se há dados salvos
✔ Nunca assumir que o JSON existe
✔ Usar chave única para o projeto
✔ Evitar salvar dados excessivos
✔ Considerar versão do save futuramente

Exemplo de estrutura mais robusta:

const gameData = {
  version: 1,
  highScore: 250,
  unlockedLevels: 3,
  settings: {
    sound: true,
    difficulty: "normal"
  }
};

---

🗂 Organização Mental do Sistema

Phaser → Evento gameOver → React
React → Atualiza localStorage
React → Atualiza estado visual

Arquitetura desacoplada e limpa.

---

🧪 Atividade Prática

Parte 1 – Persistência

• Criar estrutura gameProgress
• Salvar automaticamente ao terminar jogo
• Recuperar High Score ao iniciar aplicação

---

Parte 2 – Exibição

• Mostrar High Score na tela inicial
• Atualizar automaticamente quando recorde for superado
• Garantir que persista após atualizar navegador

---

🏆 Resultado Esperado

Ao final da aula o aluno deverá:

✅ Compreender funcionamento do localStorage
✅ Estruturar dados persistentes corretamente
✅ Implementar salvamento automático
✅ Criar sistema funcional de High Score
✅ Integrar persistência entre Phaser e React