将游戏进度保存到本地存储
Saving Game Progress to Local Storage
/* 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制作一个游戏。
这是一个点击游戏，但它有点复杂，有很多信息
我希望游戏自动将所有进度保存到本地存储中，还希望有一个选项，您可以单击按钮，擦除保存的进度，然后重新开始(如果您愿意(。(我最终也打算实现重置所有价值观的能力，但从奖金开始，就像饼干点击游戏中的天堂芯片一样。(
我已经完成了大量的教程，并对我的JS和HTML进行了大量的修改，但它不起作用，我真的不明白我在做什么。这里有超过5000行代码，所以我希望我不必在这里发布它。
这个问题的其他答案似乎并不是针对我的情况，因为它们并没有真正帮助我。非常感谢您的协助！
谢谢！c：
编辑：我已经包含了代码的相关部分，尽管减少了很多。我没有添加css或jquery，因为网站说它太多了。我不认为你能以这种状态进行比赛，但希望这会有所帮助。
这个问题太笼统，没有具体的答案。要将值添加到本地存储，请首先检查浏览器是否支持它。
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");
尽管如此，我们还是需要一些具体的案例来给出详细的答案。
我会尝试使用本地存储(假设为html5(
localStorage.setItem("score", 100);
这个位是为您发布的片段提供的。这对你来说有意义吗？
在setInterval函数中，您可以将当前燃料放入本地存储，如下所示：
window.setInterval(function() {
localStorage.setItem("fuel", fuel);
fuelClickA(
//etc...
}, 1000);
现在打开浏览器的控制台，查看localStorage。您会发现fuel现在有一个条目，它总是反映您要跟踪的fuel变量的最后一个值。
你现在已经坚持了当前游戏的燃料。您可以在游戏开始时使用localStorage.getItem('fuel')来检索它，并使用localStorage.removeItem('fuel')来删除它。
相关文章：
- 如何在本地存储(或其他数据库）上安全地保存敏感访问代码
- JavaScript-保存、存储和更新数组
- 在本地存储中保存并返回随机生成的字符串
- 如何保存和存储实时流中的音频
- 本地存储保存和检索文本输入值
- 表单选择不保存在本地存储中
- Javascript 会话存储变量未正确保存
- 没有从本地存储获取与保存的变量相同的类型
- 无法使用HTML5 Web存储保存布尔值的解决方法
- 使用 HTML5 本地存储保存多个值
- 使用本地存储保存和加载输入值
- 使用 jQuery cookie 或本地存储保存 .addClass
- 尝试用javascript创建一个座位预订系统，并用本地存储保存数据
- 从本地存储保存特定数据
- 使用HTML5本地存储保存视图状态
- 如何使用 HTML5 本地存储保存表单中的数据
- HTML5本地存储保存笔记
- jquery,Html5文本框从本地存储保存/加载
- 会话存储:保存的对象数量
- 本地存储保存表单N页数据，直到最后提交
