Cookie Clicker 保存机制答案

【问题标题】：Cookie Clicker Saving MechanicCookie Clicker 保存机制
【发布时间】：2015-04-23 09:54:31
【问题描述】：

我最近完成了 CodeCademy 上的 JavaScript 和 HTML 教程。为了尝试进一步提高我对这两种语言的了解，我开始制作自己的“Cookie Clicker”版本，但我感到很困惑。当玩家离开浏览器时，我需要一种方法来保存游戏数据。我已经看到了很多方法来解决这个问题，但是尽管我尽了最大的努力，我还是不知道如何使用 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;

谢谢你，迈克尔

【问题讨论】：

你可以简单地设置cookies。
@ForceBru 需要解释更多吗？我也查看了 cookie，但在我访问的所有信息网站上，它们似乎真的很复杂。我需要有人来分解这一切并向新手解释。
@ForceBru +1 只是为了双关语

标签： javascript html save loading

【解决方案1】：

虽然这是一个相当古老的问题，但这是我的答案..

我将使用store.js，这是一个“用于跨浏览器本地存储的简单 API”，因此您需要以某种方式包含它（还有一个 npm 模块）。

在您的saveGame-Function 中，您需要使用store.set(KEY, VALUE)，例如：

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"];

【讨论】：