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 制作游戏。

这是一款点击游戏，但它有点复杂，有很多信息。
我希望游戏将所有进度自动保存到本地存储，并且还需要一个选项，您可以单击按钮并擦除已保存的进度并重新开始，如果您愿意。（我最终还打算实现重置所有值的能力，但重新开始使用奖励，比如cookie点击游戏中的天堂筹码。）

我已经完成了大量的教程并且用我的 JS和HTML 搞砸了但是它不起作用，我真的不明白我在做什么。有超过5k行的代码，所以我希望我不必在这里发布它。

这个问题的其他答案似乎并不特定于我的情况，因为他们没有真正的帮助。非常感谢帮助！

谢谢！ 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");

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

Answer 2

我会尝试使用本地存储（假设为html5）

localStorage.setItem("score", 100);

Answer 3

此位符合您发布的代码段。这对你有意义吗？

在setInterval函数中，您可以将当前燃料放入localstorage中，如下所示：

window.setInterval(function() {

    localStorage.setItem("fuel", fuel);

    fuelClickA(
    //etc...
}, 1000);

现在打开浏览器的控制台，查看localStorage。您会发现现在fuel的条目始终反映了您要跟踪的fuel变量的最后一个值。

你现在已经掌握了当前游戏的燃料。您可以在游戏开始时使用localStorage.getItem('fuel')来检索它，并localStorage.removeItem('fuel')删除它。

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

3 个答案: