如何在本地存储中保存“游戏状态”？

Question

我正在编写一个非常简单的风险游戏，每当你点击一个国家时，它的颜色就会从红色变为绿色、黄色、紫色，然后再变为白色。你从一张“全白”地图开始，我想做的是创建不同的插槽，让我可以说一旦我给一些地图上色，将游戏保存在那个插槽中，然后重新加载插槽号 1 例如和继续我离开的地方。对于 4 个不同的插槽，我怎么能做到这一点？世界地图是一个 SVG 文件，我将每个区域的颜色更改为event.target.style.fill.拿这个代码：HTML    <svg   width="100%" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"                viewBox="0 0 701 300" style="enable-background:new 0 0 701 300;" xml:space="preserve">          <g onclick="changeColor(event)">       <path class="st1" d="M308.6,112.3l-0.1,0.2l-0.1,0.2l-0.1-0.1h-0.1l-0.1-0.1l0.1-0.1h0.1l0.1-0.1l0.1-0.1L308.6,112.3L308.6,112.3z            M313.4,111.6v0.2l0.1,0.1l-0.1,0.2v0.1l-0.1,0.1l-0.2,0.1l-0.1,0.1l-0.2-0.1l-0.2-0.2l-0.1-0.1v-0.2l0.2-0.1v-0.2v-0.1h0.2h0.1h0.1           L313.4,111.6z M309.9,111.8L309.9,111.8l-0.2-0.1l-0.1-0.1v-0.1v-0.1h0.1h0.1l0.2,0.1v0.1L309.9,111.8L309.9,111.8z M312,110.6           L312,110.6l-0.2,0.2l-0.1,0.2l-0.1,0.1v0.1l-0.1,0.2v0.1l-0.2,0.2v0.1h-0.1l-0.2,0.1l0,0v-0.1l-0.1-0.1v-0.1l-0.1-0.1v-0.1l-0.1-0.2           l0.2-0.1l0.1,0.1l0.2-0.1h0.1l0.2-0.1l0.2-0.1v-0.1l0.2-0.1h0.2L312,110.6L312,110.6z M315.6,111.6l-0.1,0.1h-0.1h-0.1h-0.1v-0.1           h0.1l0.2-0.1l0.1-0.1l0.1-0.1v-0.2V111l0.1-0.2l0.1-0.1l0.1-0.2l0.1-0.3l0.1-0.1h0.1l0.1,0.1v0.2v0.2v0.2v0.2l0,0l-0.1,0.2l-0.1,0.1           H316L315.6,111.6L315.6,111.6z M308.8,110h0.1l0.1,0.1l0.1,0.2l-0.1,0.1v0.1l-0.2,0.3l0,0v-0.1l-0.1-0.3v-0.1v-0.1L308.8,110h0.1           H308.8z M317.1,109.3L317.1,109.3l-0.1,0.3l-0.2,0.2h-0.2l-0.1,0.2l-0.2-0.1l0,0l0.1-0.1v-0.1l0.1-0.1l0.1-0.1h0.1l0.1-0.1h0.2l0,0           L317.1,109.3l0.1-0.1l0.1,0.1H317.1z"/></g></svg>CSS（初始颜色 = 白色）.st1{fill:#FFFFFF;stroke:#000000;stroke-linejoin:round;}这是现场演示和网站，您可以查看。我添加的最后一件事是用于保存和加载游戏的 UI。（可以在“加载/保存游戏”按钮上找到。https://risk-git-saves-system.swilkery.vercel.app/

Answer 1

为了使用 localStorage 保存应用程序的状态，您需要创建如下函数：

function save(slotIndex, clicks) {

  let slots;

  try {

    slots = JSON.parse(localStorage.getItem('slots'));

  } catch (e) {

    console.error(e);

  }

  if (!slots) {

    slots = [0, 0, 0, 0];

  }

  slots[slotIndex] = clicks;

  localStorage.setItem('slots', JSON.stringify(slots));

}

function restore(slotIndex) {

  let slots = [];

  try {

    slots = JSON.parse(localStorage.getItem('slots'));

  } catch (e) {

    alert('no slots found in local storage');

  }

  return slots[slotIndex] || 0;

}

这里有一个应用程序的版本，其中包含我的更改。

需要注意的是，我们保存的状态只是已发生的点击次数，这对应于将用于在一个国家着色的下一个颜色。

我怀疑你真正想要保存的是国家本身的颜色。

这将需要更复杂的数据结构：

const slots = [

  

  {

    currentColorIndex: 2,

    selectedCountries: [

       { id: 'spain', colorIndex: 3 },

       { id: 'usa', colorIndex: 1 },

    ]

  },

  ... other slots

  

];

只要将其字符串化（localStorage 中的所有值都必须是字符串），这也可以存储在 localStorage 中。在您的应用程序中，每当您更改 SVG 中的颜色时，您都需要更新此结构，以确保它们彼此保持同步。

这是应用程序开始变得复杂的地方，我建议查看类似 MVC（模型视图控制器）模式的内容，以了解开发人员通常如何处理此问题。