Foco da Matéria: Como persistir dados simples do jogo (o High Score) diretamente no navegador do jogador, garantindo que a pontuação máxima seja mantida mesmo após fechar e reabrir o jogo.

1. 🌐 O que é localStorage?

O localStorage é uma API do navegador que permite armazenar dados de chave-valor (Key-Value) de forma persistente. Diferente dos cookies, os dados armazenados aqui:

• Não expiram (a menos que o usuário limpe manualmente o cache do navegador).
• Não são enviados a cada requisição HTTP, tornando-o mais rápido e seguro para dados locais.

Usaremos o localStorage para guardar o High Score (Pontuação Máxima) do nosso Flappy Geek Bird.

2. 📝 Implementando o High Score

Vamos introduzir uma nova variável para o High Score e duas funções principais: uma para carregar o valor do navegador e outra para salvar o novo recorde.

Atualize o seu game.js:

JavaScript

// VARIÁVEIS DE ESTADO
// ... (outras variáveis) ...
let highScore = 0; // O recorde a ser buscado/salvo
const HIGH_SCORE_KEY = 'flappyGeekBirdHighScore'; // Chave única para o localStorage

// --- ELEMENTOS DOM (Adicione o High Score ao HTML se desejar, ou use o console) ---

// NOVO: Carregar o High Score no início do jogo
function carregarHighScore() {
    // Tenta obter o valor do armazenamento local.
    const savedScore = localStorage.getItem(HIGH_SCORE_KEY);
    
    if (savedScore) {
        // Se existir um valor, converte de String para Número
        highScore = parseInt(savedScore);
    }
    
    // Opcional: Mostrar no console ou em um elemento HTML separado.
    console.log(`High Score carregado: ${highScore}`);
    
    // Opcional: Adicionar um elemento HTML para mostrar o High Score
    // Exemplo: document.getElementById('high-score-display').textContent = `Recorde: ${highScore}`;
}

// NOVO: Salvar o High Score ao perder o jogo
function salvarHighScore() {
    if (score > highScore) {
        highScore = score;
        
        // Salva o novo recorde (DEVE ser armazenado como String)
        localStorage.setItem(HIGH_SCORE_KEY, highScore.toString());
        console.log(`Novo High Score salvo: ${highScore}`);
    }
}

3. 🔄 Integrando nas Funções de Controle

Agora precisamos garantir que o High Score seja carregado quando o jogo inicia e salvo quando o jogo termina (gameOver).

Atualize as funções startGame e gameOver em game.js:

JavaScript

function startGame() {
    isGameRunning = true;
    score = 0;
    scoreDisplay.textContent = `Pontuação: 0`;
    
    // NOVO: Carrega o recorde ao iniciar
    carregarHighScore(); 
    
    geekBird.y = 200; 
    geekBird.velocity = 0;
    
    // ... (restante do código: Limpa tubos, inicia pipeInterval, etc.) ...
    
    requestAnimationFrame(gameLoop);
}

function gameOver() {
    isGameRunning = false;
    
    // NOVO: Salva o recorde antes de alertar
    salvarHighScore();
    
    alert(`Game Over! Sua pontuação final foi: ${score}. Recorde atual: ${highScore}`);
    
    // Limpar tubos, mostrar tela de início, etc.
}

// Inicia o carregamento e o jogo (se não houver um botão de início)
carregarHighScore(); // Garante que o recorde esteja carregado no console
startGame();

4. ⚠️ Um Detalhe Importante do localStorage

Lembre-se que o localStorage só armazena strings. Por isso:

• Usamos localStorage.getItem(key) para obter a string.
• Usamos parseInt(savedScore) para converter a string de volta para um número para podermos compará-lo e somá-lo.
• Usamos highScore.toString() para salvar o número de volta como string.

Com isso, nosso jogo agora se lembra da pontuação máxima do jogador, adicionando um elemento de competição e persistência sem precisar de um servidor.