Question

美好的一天！

在这里完成JS noob。我正在关注本教程：http://dhmstark.co.uk/incrementals-part-2.html关于保存和加载游戏。但是，它根本不起作用。我希望你好人们可以轻松地告诉我代码的问题。根本没有错误出现在浏览器控制台上。但是，当我重新加载页面时，它没有加载“已保存”的数据。我已经尝试将load（）函数放在js文件本身中，以及包含在HTML标头中。我也尝试在脚本本身中使用window.onload调用load（）函数。

请帮忙。

HTML

<!DOCTYPE HTML>
<head>
  <title> Game </title>
  <link rel="stylesheet" type="text/css" href="interface.css" />
  <script type="text/javascript">
        function load() {
            var savegame = JSON.parse(localStorage.getItem("save"));
            if (typeof savegame.clicks !== "undefined") clicks = savegame.clicks;
        }
        </script>
</head>
<body onload="load()">
<button onClick="increment(1)"> Click </button>
<span id="clicks"></span><br /><br />

<button onClick="buyThing()"> Buy Thing </button><br />
Things: <span id="things">0</span><br />
Next Thing Cost: <span id="thingCost">10</span>

 <script type="text/javascript" src="main.js"></script>
 </body>

JS

//click tracker
var clicks = 0;

function increment(number){
    clicks = clicks + number;
    document.getElementById("clicks").innerHTML = clicks;
};

//cursor
var things = 0;

function buyThing(){
    var thingCost = Math.floor(10 * Math.pow(1.1, things));     //works out cost of this cursor
    if(clicks >= thingCost){                                    //check that player has enough clicks to afford cursor
        things = things + 1;                                    //increase number of cursors
        clicks = clicks - thingCost;                            //remove clicks spent
        document.getElementById('things').innerHTML = things; //update the number of cursors for the user
        document.getElementById('clicks').innerHTML = clicks;   //update the number of clicks for the user
    };
    var nextCost = Math.floor(10 * Math.pow(1.1,things));       //works out the cost of the next cursor
    document.getElementById('thingCost').innerHTML = nextCost; //updates the cursor cost for user
};


var save = {
    clicks: clicks,
    things: things,
}

//loop
window.setInterval(function(){
    increment(things);
    localStorage.setItem("save",JSON.stringify(save));
}, 1000);

Answer 1

您的buttons.scss对象将仅被声明和定义一次并且永远不会被更改，因此您将一次又一次地保存进度的第一个初始值，您应该在每个间隔保存一个新对象：< / p>

save

Answer 2

您收到了参考问题。 clicks和save.clicks的内存地址并没有指向相同的内容，因为它是一个原始数字。

将所有游戏数据放入单个对象中也有助于减少全局名称空间污染。

<!DOCTYPE HTML>
<head>
  <title> Game </title>
  <link rel="stylesheet" type="text/css" href="interface.css" />
  <script type="text/javascript">
    function load() {
        return JSON.parse(localStorage.getItem("game")) || {
            clicks: 0,
            things: 0
        };
    }
    </script>
</head>
<body onload="load()">
<button onClick="increment(1)"> Click </button>
<span id="clicks"></span><br /><br />

<button onClick="buyThing()"> Buy Thing </button><br />
Things: <span id="things">0</span><br />
Next Thing Cost: <span id="thingCost">10</span>

<script type="text/javascript" src="main.js"></script>

JS

//click tracker
var game = load();

function increment(number){
    game.clicks += number;
    document.getElementById("clicks").innerHTML = game.clicks;
};

//cursor
function buyThing(){
    var thingCost = Math.floor(10 * Math.pow(1.1, game.things));     //works out cost of this cursor
    if(game.clicks >= thingCost){                                    //check that player has enough clicks to afford cursor
        game.things++;                                    //increase number of cursors
        game.clicks -= thingCost;                            //remove clicks spent
        document.getElementById('things').innerHTML = game.things; //update the number of cursors for the user
        document.getElementById('clicks').innerHTML = game.clicks;   //update the number of clicks for the user
    };
    var nextCost = Math.floor(10 * Math.pow(1.1,game.things));       //works out the cost of the next cursor
    document.getElementById('thingCost').innerHTML = nextCost; //updates the cursor cost for user
};

//loop
window.setInterval(function(){
    increment(game.things);
    localStorage.setItem("game",JSON.stringify(game));
}, 1000);

localStorage无法“保存”游戏

HTML

JS

2 个答案: