Foco da Matéria: Entender a arquitetura Cliente-Servidor. Usar o JavaScript para fazer requisições assíncronas (AJAX/Fetch) para um script PHP simples, que recebe e armazena o High Score em um banco de dados simulado (ou real, dependendo da instalação).

1. 🌐 A Necessidade do Backend

Enquanto o localStorage salva o recorde no seu PC, ele não permite competir com outros jogadores. Para um placar global, precisamos de um servidor para:

1. Receber o nome do jogador e a pontuação.
2. Armazenar esses dados em um banco de dados (ex: MySQL).
3. Devolver a lista dos 10 melhores para o navegador.

2. 📝 O Script Backend (PHP)

Vamos criar um script PHP simples que apenas recebe os dados e os salva. Para simplificar, vamos salvar em um arquivo de texto (highscores.txt) em vez de um banco de dados real.

Crie um arquivo chamado save_score.php:

PHP

<?php
header('Content-Type: application/json');
// Permite que o JavaScript de qualquer origem acesse este script (CORS)
header("Access-Control-Allow-Origin: *"); 

// 1. Receber os dados enviados pelo JavaScript (método POST)
$data = json_decode(file_get_contents('php://input'), true);

$playerName = $data['name'] ?? 'Anon';
$playerScore = $data['score'] ?? 0;

// Validação básica
if ($playerScore <= 0 || empty($playerName)) {
    echo json_encode(['status' => 'error', 'message' => 'Pontuação ou nome inválido.']);
    exit;
}

// 2. Formatar a linha de dados (exemplo simples sem DB)
$scoreLine = date('Y-m-d H:i:s') . " | " . $playerName . " | " . $playerScore . "\n";

// 3. Salvar no arquivo (simulando o armazenamento)
$filename = 'highscores.txt';
if (file_put_contents($filename, $scoreLine, FILE_APPEND | LOCK_EX) !== false) {
    echo json_encode(['status' => 'success', 'message' => 'Pontuação salva com sucesso!', 'record' => $scoreLine]);
} else {
    echo json_encode(['status' => 'error', 'message' => 'Erro ao salvar pontuação.']);
}
?>

Atenção: Para que este script PHP funcione, você precisa de um ambiente de servidor web (como XAMPP, WAMP ou um servidor de hospedagem real).

3. 📡 A Comunicação Cliente-Servidor (JavaScript Fetch)

Agora, voltamos ao nosso game.js para enviar a pontuação final ao servidor. Usaremos a API moderna fetch do JavaScript, que é baseada em Promises e é a forma mais limpa de fazer AJAX (Asynchronous JavaScript and XML).

Adicione a função sendScoreToBackend ao seu game.js:

JavaScript

// --- ENDPOINT DO SEU SCRIPT PHP ---
const BACKEND_ENDPOINT = 'http://localhost/seu-projeto/save_score.php'; // ALtere para o seu caminho

// --- NOVO: Função para enviar a pontuação ao servidor ---
function sendScoreToBackend(finalScore) {
    // Apenas envia se a pontuação for razoável
    if (finalScore <= 0) return; 

    // Pede o nome do jogador
    const playerName = prompt("Parabéns! Novo Recorde. Digite seu nome para o Placar Global:");
    if (!playerName) return;

    fetch(BACKEND_ENDPOINT, {
        method: 'POST', // Usamos o método POST para enviar dados
        headers: {
            'Content-Type': 'application/json', // Informa ao servidor que estamos enviando JSON
        },
        body: JSON.stringify({ // Converte os dados JS para a String JSON
            name: playerName,
            score: finalScore
        }),
    })
    .then(response => response.json()) // Converte a resposta do servidor de volta para JSON
    .then(data => {
        console.log('Resposta do Backend:', data);
        if (data.status === 'success') {
            alert("Pontuação enviada para o Placar Global!");
        } else {
            alert("Erro ao enviar a pontuação.");
        }
    })
    .catch(error => {
        console.error('Erro de conexão:', error);
        alert("Erro de conexão com o servidor. Verifique o console.");
    });
}

4. 🔗 Integrando no Fluxo do Jogo

Finalmente, chamamos a nova função de comunicação com o backend dentro da função gameOver().

Atualize a função gameOver em game.js (após a checagem do High Score local):

JavaScript

function gameOver() {
    isGameRunning = false;
    
    // Salva o recorde local
    const isNewHighScore = score > highScore;
    salvarHighScore(); // (Função do Tema 6)
    
    alert(`Game Over! Sua pontuação final foi: ${score}. Recorde atual: ${highScore}`);
    
    // NOVO: Se for um novo recorde local, tenta enviar para o placar global
    if (isNewHighScore && score > 0) {
        sendScoreToBackend(score); 
    }
    
    // ... (restante do código) ...
}

Com esta última etapa, a maratona está completa! Criamos um jogo funcional, organizado com POO, com persistência local e capacidade de se comunicar com um backend para um placar global.