我最近完成了CodeCademy的JavaScript和HTML教程。为了进一步提高我对这两种语言的了解，我开始制作自己的版本＆＃34; Cookie Clicker＆＃34;我很难过。当玩家离开浏览器时，我需要一种保存游戏数据的方法。我已经看到了很多关于如何解决这个问题的方法，但是尽管我付出了最大努力，我还是找不到如何使用localSave（）;用于保存和加载我的游戏数据的命令。任何有关如何执行此操作的建议和解释将不胜感激。我打算在将来尝试制作更多游戏，因为我发现重新设计Cookie Clicker的基础非常有趣，所以了解如何使用localSave对我来说非常重要。
<!DOCTYPE html>
<html>
<head>
<title>Cookie Clicker</title>
<link type="stylesheet/css" rel="stylesheet" href="style.css"/>
<script language="javascript">
</script>
</head>
<body>
<h1>Cookie Clickers By: Michael</h1>
<h3>Original Idea By: Orteil</h3>
<br>
<br>
<h1 id="CookieAmount"></h1>
<h2 id="CookiePerSecond"></h2>
<div id="cookie" style="cursor:pointer" onclick="cookieClicked();"><img src="http://img1.wikia.nocookie.net/__cb20130827014912/cookieclicker/images/thumb/5/5a/PerfectCookie.png/250px-PerfectCookie.png"></div>
<!--Tells player how much upgrade Costs-->
<button onclick="getAutoClicker();">Purchase Auto Clicker for <span id="AutoClickCookieCost"></span></button>
<button onclick="getGrandma();">Purchase Grandma for <span id="GrandmaCookieCost"></span></button>
<button onclick="getFarm();">Purchase Farm for <span id="FarmCookieCost"></span></button>
<button onclick="getFactory();">Purchase Factory for <span id="FactoryCookieCost"></span></button>
<button onclick="getMine();">Purchase Mine for <span id="MineCookieCost"></span></button>
<div>
<script language="javascript">
//variables:
var cookieClicks = 0;
var clickValue = 1
var AutoClickers = 0;
var AutoClickerCost = 50;
var Grandmas = 0;
var GrandmaCost= 500;
var Farms = 0;
var FarmCost = 2500
var Factories = 0;
var FactoryCost = 5000;
var Mines = 0;
var MineCost = 10000;
//Processes cookie click and adds it to total.
function cookieClicked() {
cookieClicks++;
}
//Purchases Auto Clicker for Player and removes Cookies.
function getAutoClicker(){
if(cookieClicks >= AutoClickerCost){
AutoClickers++;
cookieClicks -= AutoClickerCost;
AutoClickerCost += Math.floor(AutoClickerCost*.3);
}else{
alert("Oh No! It appears you do not have enough cookies to purchase an Auto Clicker. An Auto Clicker currently costs "+AutoClickerCost+" which is "+(AutoClickerCost-cookieClicks)+" more cookies than you have.")
}
}
//Purchase Grandma and remove Cookie Cost.
function getGrandma(){
if(cookieClicks >= GrandmaCost){
Grandmas++;
cookieClicks -= GrandmaCost;
GrandmaCost += Math.floor(GrandmaCost*.3);
}else{
alert("Oh No! It appears you do not have enough cookies to purchase a Grandma. A Grandma currently costs "+GrandmaCost+" which is "+(GrandmaCost-cookieClicks)+" more cookies than you have.")
}
}
//Purchase Farm and remove Cookie Cost.
function getFarm(){
if(cookieClicks >= FarmCost){
Farms++;
cookieClicks -= FarmCost;
FarmCost += Math.floor(FarmCost*.3);
}else{
alert("Oh No! It appears you do not have enough cookies to purchase a Farm. A Farm currently costs "+FarmCost+" which is "+(FarmCost-cookieClicks)+" more cookies than you have.")
}
}
//Purchase Factory and remove Cookie Cost.
function getFactory(){
if(cookieClicks >= FactoryCost){
Factories++;
cookieClicks -= FactoryCost;
FactoryCost += Math.floor(FactoryCost*.3);
}else{
alert("Oh No! It appears you do not have enough cookies to purchase a Factory. A Factory currently costs "+FactoryCost+" which is "+(FactoryCost-cookieClicks)+" more cookies than you have.")
}
}
//Purchase Mine and remove COokie Cost.
function getMine(){
if(cookieClicks >= MineCost){
Mines++;
cookieClicks -= MineCost;
MineCost += Math.floor(MineCost*.3)
}else{
alert("Oh No! It appears you do not have enough cookies to purchase a Mine. A Mine currently costs "+MineCost+" which is "+(MineCost-cookieClicks)+" more cookies than you have.")
}
}
//Main Game loop updating Cookie Totals from AUTOCLICKER ONLY!
var AutoClickTimer = setInterval(function () {AutoClickCookie()}, 2000);
function AutoClickCookie(){
cookieClicks += AutoClickers;
}
//Main Game loop update Cookie Totals from ALL OTHER STRUCUTERS.
var AllStructureTimer = setInterval(function(){StructureCookie},1000)
function StructureCookie(){
cookieClicks += (Grandmas*5);
cookieClicks += (Farms*20);
cookieClicks += (Factories*60);
cookieClicks += (Mines*100);
}
//Side Loop updating button costs and CPS
var CookieClickTimer = setInterval(function() {updateCookie()}, 100);
function updateCookie(){
//Calculate CPS
var CPS = (AutoClickers*.5)+(Grandmas*5)+(Farms*20)+(Factories*60)+(Mines*100);
document.getElementById("CookieAmount").innerHTML = cookieClicks+" cookies.";
document.getElementById("CookiePerSecond").innerHTML = CPS+" CPS.";
document.getElementById("AutoClickCookieCost").innerHTML = AutoClickerCost;
document.getElementById("GrandmaCookieCost").innerHTML = GrandmaCost;
document.getElementById("FarmCookieCost").innerHTML = FarmCost;
document.getElementById("FactoryCookieCost").innerHTML = FactoryCost;
document.getElementById("MineCookieCost").innerHTML = MineCost;
}
//unfinished loop I will use in future (ignore it)
var CookieClickValueTimer = setInterval(function(){updateCookieValue()},100);
</script>
</div>
</body>
</html>
如果任何代码难以理解，我道歉。我是新手，所以一切都可以做得更好。
编辑以下是我尝试使用localStorage进行保存的尝试之一。不幸的是，它不起作用。如果有人能够解释为什么这不起作用或我能做些什么来解决它，我会很感激。
if(localStorage.cookieClicks === null || " "){
//If no variables are defined, the variables are defined and given a default value.
var cookieClicks = 0;
var clickValue = 1
var AutoClickers = 0;
var AutoClickerCost = 50;
var Grandmas = 0;
var GrandmaCost = 500;
var Farms = 0;
var FarmCost = 2500
var Factories = 0;
var FactoryCost = 5000;
var Mines = 0;
var MineCost = 10000;
confirm("New Variables Created");
} else if(localStorage.cookieClicks >= 0){
var cookieClicks = localStorage.cookieClicks;
var clickValue = localStorage.clickValue;
var AutoClickers = localStorage.AutoClickers;
var AutoClickerCost = localStorage.AutoClickerCost;
var Grandmas = localStorage.Grandmas;
var GrandmaCost = localStorage.GrandmaCost;
var Farms = localStorage.Farms;
var FarmCost = localStorage.FarmCost;
var Factories = localStorage.Factories;
var FactoryCost = localStorage.FactoryCost;
var Mines = localStorage.Mines;
var MineCost = localStorage.MineCost;
confirm("Old Progress loaded!");
}else
alert("Something is broken!")
}
//-----------------------------------------------------------------------------------------------------------
//The two main save/loading scripts
var saveGameLoop = setInterval(function(){saveGame()}, 100);
function saveGame(){
localStorage.cookieClicks = cookieClicks;
localStorage.clickValue = clickValue;
localStorage.AutoClickers = AutoClickers;
localStorage.AutoClickerCost = AutoClickerCost;
localStorage.Grandmas = Grandmas;
localStorage.GrandmaCost = GrandmaCost;
localStorage.Farms = Farms;
localStorage.FarmCost = FarmCost;
localStorage.Factories = Factories;
localStorage.FactoryCost = FactoryCost;
localStorage.Mines = Mines;
localStorage.MineCost = MineCost;
谢谢你， 迈克尔
答案 0 :(得分：0)
虽然这是一个相当古老的问题，但这是我的回答..
我将使用store.js这是一个“跨浏览器本地存储的简单API”，所以你需要以某种方式包含它（还有一个npm模块）。
在saveGame - 功能中，您需要使用store.set(KEY, VALUE)，
e.g：
store.set('cookieClicks', cookieClicks);
要加载数据，请使用store.get(KEY)，例如：
store.get('cookieClicks');
您可能希望将所有这些密钥组织得更多一些，因此您可以将所有密钥和值保存为JSON格式，例如：
store.set('Save 1', {
"cookieClicks": cookieClicks, // The " around the key are optional if the key is in camelcase!
"click-Value": clickValue // This would'nt work without "
});
然后将按如下方式访问此数据：
var sd = store.get('Save 1');
cookieClicks = sd.cookieClicks;
// or like this
clickValue= sd["click-Value"];