javascript - 如何在本地存储中保存“游戏状态”?
问题描述
我正在编写一个非常简单的风险游戏,每当您单击一个国家/地区时,它的颜色就会从红色变为绿色、黄色、紫色并变回白色。
你从一张“全白”地图开始,我想做的是创建不同的插槽,让我可以说一旦我为一些地图着色,将游戏保存在该插槽中,然后重新加载插槽号 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/
谢谢!
解决方案
为了使用 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(模型视图控制器)模式之类的东西,以了解开发人员通常如何处理此问题。
推荐阅读
- node.js - 在 Web 服务器上部署的 Angular 2 在获取时抛出状态 0
- tsqlt - 带有输出参数的 tSQLt SpyProcedure
- ios - iPad iOS Safari getUserMedia 访问特定摄像头(正面或背面)
- javascript - 防止在大小更改时更改 html 选择的样式
- apache-spark - Spark 在加入后更改列可空性
- javascript - 如何为每部智能手机设置标准移动版网站
- recaptcha - 不可见的 Recaptcha 过期错误
- python - 正则表达式的新手——for循环中的意外结果
- r - 根据特定计算擦除数据帧上的线条
- django - 如何使用 Django 在 Celery 中设置每个孩子的最大任务?