如何为游戏创建cloud variable（High Score，最高分）？

结合你的技术栈（JS中基础、HTML中高级、CSS中级、PHP基础），用PHP+MySQL做后端存储，前端通过异步请求交互是最适配的方案，以下是具体实现步骤：

一、后端准备（PHP + MySQL） #

1. 创建MySQL存储表 #

先在你的数据库中创建一张用于存储最高分的表，示例SQL如下：

CREATE TABLE game_scores (
    id INT AUTO_INCREMENT PRIMARY KEY,
    high_score INT DEFAULT 0,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
-- 初始化一条默认记录，初始最高分为0
INSERT INTO game_scores (high_score) VALUES (0);

2. 编写PHP接口 #

创建两个PHP文件，分别处理获取云端最高分和更新云端最高分的逻辑：

get-high-score.php（获取当前云端最高分）

<?php
// 替换为你的数据库连接信息
$servername = "localhost";
$username = "你的数据库用户名";
$password = "你的数据库密码";
$dbname = "你的数据库名";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 查询最新的最高分
$sql = "SELECT high_score FROM game_scores ORDER BY id DESC LIMIT 1";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    $row = $result->fetch_assoc();
    echo $row["high_score"];
} else {
    echo 0;
}
$conn->close();
?>

update-high-score.php（提交并更新最高分）

<?php
$servername = "localhost";
$username = "你的数据库用户名";
$password = "你的数据库密码";
$dbname = "你的数据库名";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 获取前端传入的当前游戏分数
$current_score = isset($_POST['score']) ? intval($_POST['score']) : 0;

// 查询当前云端最高分
$sql = "SELECT high_score FROM game_scores ORDER BY id DESC LIMIT 1";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$current_high = $row["high_score"];

// 若当前分数高于云端最高分，则更新
if ($current_score > $current_high) {
    $update_sql = "UPDATE game_scores SET high_score = $current_score WHERE id = 1";
    $conn->query($update_sql);
    echo $current_score; // 返回更新后的最高分
} else {
    echo $current_high; // 返回原最高分
}

$conn->close();
?>

二、前端代码修改 #

调整你的HTML/JS代码，实现页面加载时拉取云端最高分、游戏过程中累计分数、结束时提交分数并更新显示的逻辑：

<button id="btn" onclick="btn();">点击加分</button>
<p id="p">clicks: 0</p>
<p id="High_score">云端最高分: 加载中...</p>
<button onclick="submitScore();">结束游戏，提交分数</button>

<script>
let click = 0;
const scoreElement = document.getElementById("p");
const highScoreElement = document.getElementById("High_score");

// 页面加载完成后获取云端最高分
window.onload = async function() {
    try {
        const response = await fetch('get-high-score.php');
        const cloudHighScore = await response.text();
        highScoreElement.innerHTML = `云端最高分: ${cloudHighScore}`;
    } catch (error) {
        highScoreElement.innerHTML = "云端最高分: 加载失败";
        console.error(error);
    }
};

// 点击按钮累加分数
function btn() {
    click++;
    scoreElement.innerHTML = `clicks: ${click}`;
}

// 提交当前分数到后端，更新云端最高分
async function submitScore() {
    try {
        const response = await fetch('update-high-score.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `score=${click}`
        });
        const newHighScore = await response.text();
        highScoreElement.innerHTML = `云端最高分: ${newHighScore}`;
        alert(`当前分数: ${click}，云端最高分已更新为${newHighScore}`);
    } catch (error) {
        console.error(error);
        alert("提交分数失败，请重试");
    }
}
</script>

三、关键注意点 #

• 你原代码存在变量名拼写错误（click和clicks混用），已统一修正
• 上线前建议给PHP接口加参数校验（比如判断提交的分数为正整数），避免恶意数据提交
• 若需要兼顾本地记录，可以结合localStorage，但云端最高分必须依赖后端存储实现跨设备同步

内容的提问来源于stack exchange，提问作者James_Stafford