首頁猿問如何在本地存儲中保存“...

如何在本地存儲中保存“游戲狀態”？

JavaScript

慕俠2389804 2023-04-14 16:28:15

我正在編寫一個非常簡單的風險游戲，每當你點擊一個國家時，它的顏色就會從紅色變為綠色、黃色、紫色，然后再變為白色。你從一張“全白”地圖開始，我想做的是創建不同的插槽，讓我可以說一旦我給一些地圖上色，將游戲保存在那個插槽中，然后重新加載插槽號 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/

查看完整描述

1 回答

呼啦一陣風

TA貢獻1802條經驗獲得超6個贊

為了使用 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（模型視圖控制器）模式的內容，以了解開發人員通常如何處理此問題。

反對回復 2023-04-14

1 回答
0 關注
146 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在本地存儲中保存“游戲狀態”？

如何在本地存儲中保存“游戲狀態”？

1 回答

添加回答