javascript - 将游戏进度保存到本地存储

Question

/* cursor section */
	var cursorLvl = 1;
	function buyCursor(){
		var cursorCost = Math.floor(25 * Math.pow(1.2,cursorLvl));
		if(fuel >= cursorCost)if(ammo >= cursorCost)if(steel >= cursorCost)if(bauxite >= cursorCost)
		{cursorLvl = cursorLvl + 1; fuel = fuel - cursorCost; ammo = ammo - cursorCost; steel = steel - cursorCost; bauxite = bauxite - cursorCost;
		document.getElementById('cursorLvl').innerHTML = cursorLvl; document.getElementById('fuel').innerHTML = fuel; document.getElementById('ammo').innerHTML = ammo; document.getElementById('steel').innerHTML = steel; document.getElementById('bauxite').innerHTML = bauxite;};
		var nextCost = Math.floor(25 * Math.pow(1.2,cursorLvl)); document.getElementById('cursorCost').innerHTML = nextCost;
		};

/* enemy section */
function changeE(){
	var dropdownList = document.getElementById('changeEid');
	var selectedIndex = dropdownList.selectedIndex;
	var selectedValue = dropdownList.options[selectedIndex].value;
	
	var enemyDiv = document.getElementById('enemyHere');
	switch(selectedValue){
		case 'EaircraftCarrierDemon':
			enemyDiv.innerHTML = '<img src="Enemies/AircraftCarrierDemon.png" onclick="fuelClickM();ammoClickM(); steelClickM(); bauxiteClickM()">';
			break;
		case 'EaircraftCarrierPrincess':
			enemyDiv.innerHTML = '<img src="Enemies/AircraftCarrierPrincess.png" onclick="fuelClickM(1);ammoClickM(1); steelClickM(1); bauxiteClickM(1)">';
			break;
			}
	};
	
/* flagship section */
function changeFS(){
	var dropdownList = document.getElementById('changeFSid');
	var selectedIndex = dropdownList.selectedIndex;
	var selectedValue = dropdownList.options[selectedIndex].value;
	
	var fsDiv = document.getElementById('imageHere');
	switch(selectedValue){
		case 'FSabukuma':
			fsDiv.innerHTML = '<img src="Ships/Abukuma.png">';
			break;
		case 'FSabukuma-D':
			fsDiv.innerHTML = '<img src="Ships/Abukuma-D.png">';
			break;
			}
};

/* resources section (autoclick) + manual click */
var fuel = 0;
function fuelClickA(number){
    fuel = fuel + number;
    document.getElementById("fuel").innerHTML = fuel;
};
function fuelClickM(){
    fuel = fuel + cursorLvl;
    document.getElementById("fuel").innerHTML = fuel;
};

var ammo = 0;
function ammoClickA(number){
    ammo = ammo + number;
    document.getElementById("ammo").innerHTML = ammo;
};
function ammoClickM(){
    ammo = ammo + cursorLvl;
    document.getElementById("ammo").innerHTML = ammo;
};

var steel = 0;
function steelClickA(number){
    steel = steel + number;
    document.getElementById("steel").innerHTML = steel;
};
function steelClickM(){
    steel = steel + cursorLvl;
    document.getElementById("steel").innerHTML = steel;
};

var bauxite = 0;
function bauxiteClickA(number){
    bauxite = bauxite + number;
    document.getElementById("bauxite").innerHTML = bauxite;
};
function bauxiteClickM(){
    bauxite = bauxite + cursorLvl;
    document.getElementById("bauxite").innerHTML = bauxite;
};

/* buyables section */
/* destroyers section*/
var yukikaze = 0;
function buyYukikaze(){
	var yukikazeCost = Math.floor(20 * Math.pow(1.2,yukikaze));
	if(fuel >= yukikazeCost){yukikaze = yukikaze + 1; fuel = fuel - yukikazeCost; document.getElementById('yukikaze').innerHTML = yukikaze; document.getElementById('fuel').innerHTML = fuel;};
	var nextCost = Math.floor(20 * Math.pow(1.2,yukikaze)); document.getElementById('yukikazeCost').innerHTML = nextCost;
	};
var shimakaze = 0;
function buyShimakaze(){
	var shimakazeCost = Math.floor(40 * Math.pow(1.2,shimakaze));
	if(fuel >= shimakazeCost){shimakaze = shimakaze + 1; fuel = fuel - shimakazeCost; document.getElementById('shimakaze').innerHTML = shimakaze; document.getElementById('fuel').innerHTML = fuel;};
	var nextCost = Math.floor(40 * Math.pow(1.2,shimakaze)); document.getElementById('shimakazeCost').innerHTML = nextCost;
	};

/* torpedo cruisers section */
var ooi = 0;
function buyOoi(){
	var ooiCost = Math.floor(25 * Math.pow(1.2,ooi));
	if(fuel >= ooiCost)if(steel >= ooiCost){ooi = ooi + 1; fuel = fuel - ooiCost; steel = steel - ooiCost;
	document.getElementById('ooi').innerHTML = ooi; document.getElementById('fuel').innerHTML = fuel; document.getElementById('steel').innerHTML = steel;};
	var nextCost = Math.floor(25 * Math.pow(1.2,ooi)); document.getElementById('ooiCost').innerHTML = nextCost;
	};
var kitakami = 0;
function buyKitakami(){
	var kitakamiCost = Math.floor(250 * Math.pow(1.2,kitakami));
	if(fuel >= kitakamiCost)if(steel >= kitakamiCost){kitakami = kitakami + 1; fuel = fuel - kitakamiCost; steel = steel - kitakamiCost;
	document.getElementById('kitakami').innerHTML = kitakami; document.getElementById('fuel').innerHTML = fuel; document.getElementById('steel').innerHTML = steel;};
	var nextCost = Math.floor(250 * Math.pow(1.2,kitakami)); document.getElementById('kitakamiCost').innerHTML = nextCost;
	};
	
/* heavy cruisers section */
var furutaka = 0;
function buyFurutaka(){
	var furutakaCost = Math.floor(50 * Math.pow(1.2,furutaka));
	if(ammo >= furutakaCost){furutaka = furutaka + 1; ammo = ammo - furutakaCost; document.getElementById('furutaka').innerHTML = furutaka; document.getElementById('ammo').innerHTML = ammo;};
	var nextCost = Math.floor(50 * Math.pow(1.2,furutaka)); document.getElementById('furutakaCost').innerHTML = nextCost;
	};
var kako = 0;
function buyKako(){
	var kakoCost = Math.floor(100 * Math.pow(1.2,kako));
	if(ammo >= kakoCost){kako = kako + 1; ammo = ammo - kakoCost; document.getElementById('kako').innerHTML = kako; document.getElementById('ammo').innerHTML = ammo;};
	var nextCost = Math.floor(100 * Math.pow(1.2,kako)); document.getElementById('kakoCost').innerHTML = nextCost;
	};
	
/* aviation cruiser */
var mogami = 0;
function buyMogami(){
	var mogamiCost = Math.floor(75 * Math.pow(1.2,mogami));
	if(ammo >= mogamiCost)if(bauxite >= mogamiCost){mogami = mogami + 1; ammo = ammo - mogamiCost; bauxite = bauxite - mogamiCost;
	document.getElementById('mogami').innerHTML = mogami; document.getElementById('ammo').innerHTML = ammo; document.getElementById('bauxite').innerHTML = bauxite;};
	var nextCost = Math.floor(75 * Math.pow(1.2,mogami)); document.getElementById('mogamiCost').innerHTML = nextCost;
	};
var tone = 0;
function buyTone(){
	var toneCost = Math.floor(150 * Math.pow(1.2,tone));
	if(ammo >= toneCost)if(bauxite >= toneCost){tone = tone + 1; ammo = ammo - toneCost; bauxite = bauxite - toneCost;
	document.getElementById('tone').innerHTML = tone; document.getElementById('ammo').innerHTML = ammo; document.getElementById('bauxite').innerHTML = bauxite;};
	var nextCost = Math.floor(150 * Math.pow(1.2,tone)); document.getElementById('toneCost').innerHTML = nextCost;
	};
	
/* light carrier section */
var houshou = 0;
function buyHoushou(){
	var houshouCost = Math.floor(100 * Math.pow(1.2,houshou));
	if(bauxite >= houshouCost){houshou = houshou + 1; bauxite = bauxite - houshouCost; document.getElementById('houshou').innerHTML = houshou; document.getElementById('bauxite').innerHTML = bauxite;};
	var nextCost = Math.floor(100 * Math.pow(1.2,houshou)); document.getElementById('houshouCost').innerHTML = nextCost;
	};
var ryuujou = 0;
function buyRyuujou(){
	var ryuujouCost = Math.floor(250 * Math.pow(1.2,ryuujou));
	if(bauxite >= ryuujouCost){ryuujou = ryuujou + 1; bauxite = bauxite - ryuujouCost; document.getElementById('ryuujou').innerHTML = ryuujou; document.getElementById('bauxite').innerHTML = bauxite;};
	var nextCost = Math.floor(250 * Math.pow(1.2,ryuujou)); document.getElementById('ryuujouCost').innerHTML = nextCost;
	};
	
/* submarine section */
var i168 = 0;
function buyI168(){
	var i168Cost = Math.floor(200 * Math.pow(1.2,i168));
	if(steel >= i168Cost){i168 = i168 + 1; steel = steel - i168Cost; document.getElementById('i168').innerHTML = i168; document.getElementById('steel').innerHTML = steel;};
	var nextCost = Math.floor(200 * Math.pow(1.2,i168)); document.getElementById('i168Cost').innerHTML = nextCost;
	};
var maruyu = 0;
function buyMaruyu(){
	var maruyuCost = Math.floor(2000 * Math.pow(1.2,maruyu));
	if(steel >= maruyuCost){maruyu = maruyu + 1; steel = steel - maruyuCost; document.getElementById('maruyu').innerHTML = maruyu; document.getElementById('steel').innerHTML = steel;};
	var nextCost = Math.floor(2000 * Math.pow(1.2,maruyu)); document.getElementById('maruyuCost').innerHTML = nextCost;
	};
	
/* aircraft carrying submarine */
var i19 = 0;
function buyI19(){
	var i19Cost = Math.floor(150 * Math.pow(1.2,i19));
	if(steel >= i19Cost)if(bauxite >= i19Cost){i19 = i19 + 1; steel = steel - i19Cost; bauxite = bauxite - i19Cost;
	document.getElementById('i19').innerHTML = i19; document.getElementById('steel').innerHTML = steel; document.getElementById('bauxite').innerHTML = bauxite;};
	var nextCost = Math.floor(150 * Math.pow(1.2,i19)); document.getElementById('i19Cost').innerHTML = nextCost;
	};
var i58 = 0;
function buyI58(){
	var i58Cost = Math.floor(300 * Math.pow(1.2,i58));
	if(steel >= i58Cost)if(bauxite >= i58Cost){i58 = i58 + 1; steel = steel - i58Cost; bauxite = bauxite - i58Cost;
	document.getElementById('i58').innerHTML = i58; document.getElementById('steel').innerHTML = steel; document.getElementById('bauxite').innerHTML = bauxite;};
	var nextCost = Math.floor(300 * Math.pow(1.2,i58)); document.getElementById('i58Cost').innerHTML = nextCost;
	};
	
/* other */
var akashi = 0;
function buyAkashi(){
	var akashiCost = Math.floor(10000 * Math.pow(1.2,akashi));
	if(fuel >= akashiCost)if(ammo >= akashiCost)if(steel >= akashiCost)if(bauxite >= akashiCost)
	{akashi = akashi + 1; fuel = fuel - akashiCost; ammo = ammo - akashiCost; steel = steel - akashiCost; bauxite = bauxite - akashiCost;
	document.getElementById('akashi').innerHTML = akashi; document.getElementById('fuel').innerHTML = fuel; document.getElementById('ammo').innerHTML = ammo; document.getElementById('steel').innerHTML = steel; document.getElementById('bauxite').innerHTML = bauxite;};
	var nextCost = Math.floor(10000 * Math.pow(1.2,akashi)); document.getElementById('akashiCost').innerHTML = nextCost;
	};
var akitsuMaru = 0;
function buyAkitsuMaru(){
	var akitsuMaruCost = Math.floor(100000 * Math.pow(1.2,akitsuMaru));
	if(fuel >= akitsuMaruCost)if(ammo >= akitsuMaruCost)if(steel >= akitsuMaruCost)if(bauxite >= akitsuMaruCost)
	{akitsuMaru = akitsuMaru + 1; fuel = fuel - akitsuMaruCost; ammo = ammo - akitsuMaruCost; steel = steel - akitsuMaruCost; bauxite = bauxite - akitsuMaruCost;
	document.getElementById('akitsuMaru').innerHTML = akitsuMaru; document.getElementById('fuel').innerHTML = fuel; document.getElementById('ammo').innerHTML = ammo; document.getElementById('steel').innerHTML = steel; document.getElementById('bauxite').innerHTML = bauxite;};
	var nextCost = Math.floor(100000 * Math.pow(1.2,akitsuMaru)); document.getElementById('akitsuMaruCost').innerHTML = nextCost;
	};
	
/* other */
window.setInterval(function(){
	
	fuelClickA(
		(yukikaze * 2)
		+ (shimakaze * 4)
		
		+ (ooi * 3)
		+ (kitakami * 15)
	
		+ (akashi * 1000)
		+ (akitsuMaru * 100000)
		);
	ammoClickA(
		(furutaka * 5)
		+ (kako * 10)
		
		+ (mogami * 7)
		+ (tone * 14)
		
		+ (akashi * 1000)
		+ (akitsuMaru * 100000)
		);
	steelClickA(
		(ooi * 3)
		+ (kitakami * 15)
		
		+ (i168 * 20)
		+ (maruyu * 200)
		
		+ (i19 * 15)
		+ (i58 * 30)
		
		+ (akashi * 1000)
		+ (akitsuMaru * 100000)
		);
	bauxiteClickA(
		(mogami * 7)
		+ (tone * 14)
		
		+ (houshou * 10)
		+ (ryuujou * 20)
		
		+ (i19 * 15)
		+ (i58 * 30)
		
		+ (akashi * 1000)
		+ (akitsuMaru * 100000)
		);
		
}, 1000);

<body>
	<nav>
	<img src="IconAmmo.png"></img><span id="ammo">0</span>
	<img src="IconFuel.png"></img><span id="fuel">0</span>
	<img src="IconSteel.png"></img><span id="steel">0</span>
	<img src="IconBauxite.png"></img><span id="bauxite">0</span>
	</nav>
	
	<section>
	Enemy
	<select id="changeEid" onclick="javascript:changeE();">
		<option value="EaircraftCarrierDemon">Aircraft Carrier Demon</option>
		<option value="EaircraftCarrierPrincess">Aircraft Carrier Princess</option>
		</select>
	<div id="enemyHere">
	</div>
	</section>
	
	<article>
	<div id="tablewrapper"><div id="tablescroll">

	<a id="buttonNonShip" href="#" class="button14">Non-Ship</a>
	<p id="nonShip">
	Cursor Level: <span id="cursorLvl">0</span> Cost: <span id="cursorCost">10</span>
	<br><button onclick="buyCursor()">Upgrade Cursor</button>
	</p><br>
	
	<a id="buttonDD" href="#" class="button2">DD</a>
	<p id="DD">
	
	Yukikaze: <span id="yukikaze">0</span> Cost: <span id="yukikazeCost">20</span> Adds: 2 <img src="IconFuel.png"></img>
	<br><button onclick="buyYukikaze()">Buy Yukikaze</button><br>
	Shimakaze: <span id="shimakaze">0</span> Cost: <span id="shimakazeCost">40</span> Adds: 4 <img src="IconFuel.png"></img>
	<br><button onclick="buyShimakaze()">Buy Shimakaze</button><br>
	
	</p>
	
	<a id="buttonCLT" href="#" class="button4">CLT</a>
	<p id="CLT">
	
	Ooi: <span id="ooi">0</span> Cost: <span id="ooiCost">25</span> Adds: 3 <img src="IconFuel.png"> <img src="IconSteel.png"></img>
	<br><button onclick="buyOoi()">Buy Ooi</button><br>
	Kitakami: <span id="kitakami">0</span> Cost: <span id="kitakamiCost">250</span> Adds: 15 <img src="IconFuel.png"> <img src="IconSteel.png"></img>
	<br><button onclick="buyKitakami()">Buy Kitakami</button><br>
	
	</p>
	
	<a id="buttonCA" href="#" class="button5">CA</a>
	<p id="CA">
	
	Furutaka: <span id="furutaka">0</span> Cost: <span id="furutakaCost">50</span> Adds: 5 <img src="IconAmmo.png"></img>
	<br><button onclick="buyFurutaka()">Buy Furutaka</button><br>
	Kako: <span id="kako">0</span> Cost: <span id="kakoCost">100</span> Adds: 10 <img src="IconAmmo.png"></img>
	<br><button onclick="buyKako()">Buy Kako</button><br>
	
	</p>
	
	<a id="buttonCAV" href="#" class="button6">CAV</a>
	<p id="CAV">
	
	Mogami: <span id="mogami">0</span> Cost: <span id="mogamiCost">75</span> Adds: 7 <img src="IconAmmo.png"></img> <img src="IconBauxite.png"></img>
	<br><button onclick="buyMogami()">Buy Moganmi</button><br>
	Tone: <span id="tone">0</span> Cost: <span id="toneCost">150</span> Adds: 14 <img src="IconAmmo.png"></img> <img src="IconBauxite.png"></img>
	<br><button onclick="buyTone()">Buy Tone</button><br>
	
	</p>
	
	<a id="buttonCVL" href="#" class="button9">CVL/AV</a>
	<p id="CVL">
	
	Houshou: <span id="houshou">0</span> Cost: <span id="houshouCost">100</span> Adds: 10 <img src="IconBauxite.png"></img>
	<br><button onclick="buyHoushou()">Buy Houshou</button><br>
	Ryuujou: <span id="ryuujou">0</span> Cost: <span id="ryuujouCost">250</span> Adds: 20 <img src="IconBauxite.png"></img>
	<br><button onclick="buyRyuujou()">Buy Ryuujou</button><br>
	
	</p>
	
	<a id="buttonSS" href="#" class="button11">SS</a>
	<p id="SS">
	
	I-168: <span id="i168">0</span> Cost: <span id="i168Cost">200</span> Adds: 20 <img src="IconSteel.png"></img>
	<br><button onclick="buyI168()">Buy I-168</button><br>
	Maruyu: <span id="maruyu">0</span> Cost: <span id="maruyuCost">2000</span> Adds: 200 <img src="IconSteel.png"></img>
	<br><button onclick="buyMaruyu()">Buy Maruyu</button><br>
	
	</p>
	
	<a id="buttonSSV" href="#" class="button12">SSV</a>
	<p id="SSV">
	
	I-19: <span id="i19">0</span> Cost: <span id="i19Cost">150</span> Adds: 15 <img src="IconSteel.png"></img> <img src="IconBauxite.png"></img>
	<br><button onclick="buyI19()">Buy I-19</button><br>
	I-58: <span id="i58">0</span> Cost: <span id="i58Cost">300</span> Adds: 30 <img src="IconSteel.png"></img> <img src="IconBauxite.png"></img>
	<br><button onclick="buyI58()">Buy I-58</button><br>
	
	</p>
	
	<a id="buttonEtcShip" href="#" class="button13">Etc Ships</a>
	<p id="etc">
	
	Akashi: <span id="akashi">0</span> Cost: <span id="akashiCost">10000</span> Adds: 1000 <img src="IconAmmo.png"></img> <img src="IconFuel.png"></img> <img src="IconSteel.png"></img> <img src="IconBauxite.png"></img>
	<br><button onclick="buyAkashi()">Buy Akashi</button><br>
	Akitsu Maru: <span id="akitsuMaru">0</span> Cost: <span id="akitsuMaruCost">100000</span> Adds: 10000 <img src="IconAmmo.png"></img> <img src="IconFuel.png"></img> <img src="IconSteel.png"></img> <img src="IconBauxite.png"></img>
	<br><button onclick="buyAkitsuMaru()">Buy Akitsu Maru</button><br>
	
	</p>
	
	</div></div>
	</article>
	</body>

我正在使用 html、css、jquery 和 javascript 制作游戏。

这是一个点击游戏，但它有点复杂，信息量很大。
我希望游戏将所有进度自动保存到本地存储，并且还想要一个选项，您可以在其中单击一个按钮并清除已保存的进度并根据需要重新开始。 (我最终还打算实现重置所有值的能力，但从奖金开始，就像 cookies 唱首歌游戏中的天堂筹码一样。)

我学习了很多教程，并且弄乱了我的 JS 和 HTML 一堆，但它不起作用，而且我真的不明白我在做什么。有超过 5000 行代码，所以我希望不必在这里发布它。

这里这个问题的其他答案似乎并不针对我的情况，因为它们并没有真正帮助。协助将不胜感激!

谢谢! c:

编辑:我已经包含了代码的相关部分，尽管被削减了很多。我没有添加 css 或 jquery，因为网站说它太多了。我认为您不能以这种形式运行它，但希望这会有所帮助。

Answer 1

这个问题太笼统了，没有具体的答案。要向本地存储添加值，首先要检查浏览器是否支持它。

if(typeof(Storage) !== "undefined") {
    // Code for localStorage
} else {
    // No Web Storage support..
}

然后继续将分数/级别/奖金保存在本地存储中。

// Store
localStorage.setItem("score", "1000");
// Retrieve
var score = localStorage.getItem("score");

要完全移除/删除分值，

localStorage.removeItem("score");

为了重置值，

localStorage.setItem("score", "0");

但我们还需要一些具体案例才能给出详细的答案。