JavaScript开发躲避类游戏 如何写入文本文件存储全服最高世界纪录得分

核心结论 #

纯客户端JavaScript确实无法直接实现跨用户的世界纪录存储需求。浏览器中的JS运行在沙箱环境中，既没有权限写入服务器端的文件，也无法让不同用户的本地存储数据互通，你最初的本地文件存储思路不适用于跨用户的数据共享场景。

可行实现方案 #

你需要引入后端服务做公共数据的存储和读写，实现逻辑非常简单，分为两种可选路径：

• 轻量化方案：使用云函数/无服务器函数，不需要维护完整服务器
  只需要实现两个接口：
  1. 读接口：返回当前存储的历史最高得分
  2. 写接口：接收前端提交的新得分，校验得分确实高于当前最高分后更新存储值
     最高得分可以存在轻量存储或者数据库中，不需要单独维护服务器。
• 自建后端方案：自己搭建简易后端服务
  用任意熟悉的后端语言（Node.js、Python等）实现上述两个接口即可，最高得分可以存在本地文本文件、SQLite等轻量存储介质中，开发成本很低。

现有代码修改参考 #

1. 初始化阶段拉取世界纪录 #

// 全局变量存储当前世界纪录
let recordScore = 0;

// 页面加载时拉取当前世界纪录
async function initRecord() {
  // 调用你的读接口获取数据
  const res = await fetch('/api/get-world-record');
  const data = await res.json();
  recordScore = data.score;
  // 可以在页面新增一个展示世界纪录的节点
  document.getElementById('recordBoard').innerText = `World record: ${recordScore}`;
}
// 游戏初始化时执行
initRecord();

2. 修改得分逻辑，增加世界纪录更新 #

setInterval(function() {
  if (dead == false) {
    document.getElementById("character").src = "images/playerJump.png"
    score += 1;

    highScore = parseInt(window.localStorage.getItem('high_score')) || 0;
    if (score > highScore) {
      window.localStorage.setItem('high_score', score);
      // 得分超过世界纪录时提交更新
      if (score > recordScore) {
        recordScore = score;
        // 调用写接口提交新得分
        fetch('/api/update-world-record', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ score: recordScore })
        });
        // 同步更新页面展示
        document.getElementById('recordBoard').innerText = `World record: ${recordScore}`;
      }
    }

    document.getElementById("scoreBoard").innerHTML = "Your score: " + score + " | Your personal best: " + highScore;
  }
}, 2000)

注意事项 #

• 后端接口必须做参数校验，只有当前提交的得分确实高于存储的最高分时才执行更新，避免恶意用户直接调用接口提交假数据。
• 不要尝试用纯前端方案实现跨用户数据共享，所有前端侧的存储（localStorage、IndexedDB等）都是用户本地独有的，无法在不同玩家之间同步数据。

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