javascript - 当游戏状态包含函数时存储游戏状态

Question

我正在开发一个简单的网页游戏，需要启用保存游戏状态，以便用户可以在关闭浏览器或刷新页面后从上次中断的地方继续。该游戏完全在浏览器中运行并使用基本的 HTML/CSS/Javascript。

我目前正在使用本地存储，因为它为跨 session 保存游戏状态的问题提供了一个简单的解决方案:

function saveGame() {
  window.localStorage.setItem('gameData', JSON.stringify(game));
}

function loadGame() {
  game = JSON.parse(window.localStorage.getItem('gameData'));
}

但是，我的游戏状态包括一个函数数组和一个包含函数的对象数组。当我加载以前的游戏状态时，这些函数和对象未正确加载，因为函数无法转换为 JSON(至少不容易转换为 JSON)。我尝试过对我的函数进行 toString() 并对它们进行 eval() 处理，并且虽然它们似乎存储得正确，但我无法检索它们。无论哪种方式，这感觉都是一个糟糕的解决方案)。

是否有更好的方法来保存和恢复包含函数的游戏状态？这是数据模型问题吗？此外，我还遇到过以编程方式修改 HTML 的情况。 HTML 是否也可以存储并稍后重新加载，以便修改后的 HTML 在重新加载后仍然存在？

编辑:添加游戏对象供您引用:

function Game() {
  this.player = new Player();
  this.triggerFnSet = new Set();
  this.tasks = [];
  this.activeTask = undefined;
  this.resources = { fame: {},
                     money: {},
                     beats: { instrument: "laptop",
                              clicksPer: 30,
                              xpPer: 5 },
                     samples: { instrument: "laptop",
                               resourcesPer: 25,
                               requiredResource: "beats",
                               xpPer: 50 },
                     notes: { instrument: "keyboard",
                              clicksPer: 50,
                              xpPer: 5 },
                     measures: { instrument: "keyboard",
                                 resourcesPer: 25,
                                 requiredResource: "notes",
                                 xpPer: 50 }
                    };
  this.specialResources = { songs: { instruments: ["laptop", "keyboard"],
                                     resourcesPer: 50,
                                     validResources: ["samples", "measures"],
                                     xpPer: 500 }};
  this.instruments = { laptop: { level: 1,
                                 currentTempo: "slow",
                                 tempoSpeeds: { slowest: 25,
                                                slow: 15,
                                                fast: 10,
                                                fastest: 5 },
                                 dropActive: false },
                       keyboard: { currentNote: undefined,
                                   currentSong: undefined }
                     };
};

有问题的字段是任务和triggerFnSet，其中任务如下所示:

function Task(name, tooltip, checkFn, failFn, startFn, tickFn, finishFn, timeToComplete) {
    this.name = name;
    this.tooltip = tooltip;
    this.checkFn = checkFn;
    this.failFn = failFn;
    this.startFn = startFn;
    this.tickFn = tickFn;
    this.finishFn = finishFn;
    this.timeToComplete = timeToComplete;
}

triggerFn 如下所示，在游戏中的每个刻度处执行，并在返回 true 后从列表中删除:

function firstBeatTrigger() {
  if (game.player.stats.beats.lifetime >= 1) {
    document.getElementById('beats').style.display = "block";
    appendToOutputContainer("You've created your first beat. A building block to something greater.");
    game.triggerFnSet.add(tenthBeatTrigger);
    return true;
  }
}

Answer 1

在这种情况下，您可能必须将反序列化对象映射到具有所有功能的完整模型。也许 JSON 合并来自您首选的库。另外，我发现将 HTML 作为值存储在 JSON 对象中没有问题。但是，实际上，请将您的功能与模型分开。所有函数都应该是一个单独的类。称其为游戏引擎或其他名称。