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

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>

JS

function changeColor(event) { 
    clicks++

    if (clicks == 1)  {
      event.target.style.fill = "#DA4567";
  }
    if (clicks == 2) {
        event.target.style.fill = "#7aeb34";
   }
    if (clicks == 3) {
        event.target.style.fill = "#ffe70a";
}
    if (clicks == 4) {
        event.target.style.fill = "#ba0afa";
}
    if (clicks == 5) {
        event.target.style.fill = "#FFFFFF";
        clicks = 0;
}
}

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;
}

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

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

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

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

const slots = [
  
  {
    currentColorIndex: 2,
    selectedCountries: [
       { id: 'spain', colorIndex: 3 },
       { id: 'usa', colorIndex: 1 },
    ]
  },
  ... other slots
  
];

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

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