Question

好的，这真的让我头疼。不久前，我做了一个名为“水晶收藏家”的简单游戏，其中将为用户提供一个数字（例如112）和一排带有隐藏值的水晶。玩家将尝试匹配数字。如果他匹配，他会赢，否则他会输。获利和损失将在底部追踪。他们不会坚持下去。这是程序：https://dennismarkham.github.io/week-4-game/

现在，我正在尝试通过在本地存储中添加持久统计跟踪来为这款游戏增添趣味。也就是说，如果用户刷新或离开该页面，则他的得失将保持不变。

尝试实现这一目标产生了奇怪的结果。看来它确实可以跟踪，但只能达到一定程度。获胜和输家的console.logs可以从零变为一，但是永远都不能追踪。发生了什么事？

//sets a random goal number, set's player number
var goalNumber = Math.floor(Math.random() * 100) + 1;
var playerNumber = 0;

//if there is no variable for wins or losses in local storage, it is set to zero
//else, the "wins" from local storage is achieved and put into the wins variable in
//the script
if (localStorage.getItem("wins") === null) {
  var wins = 0;
} else {
  var wins = localStorage.getItem("wins");
}


if (localStorage.getItem("wins") === null) {
  var losses = 0;
} else {
  var losses = localStorage.getItem("wins");
}

console.log("Wins:" + wins);
console.log("Losses:" + losses);




//gives a random value to blue, green, red, and purple
var blue = Math.floor(Math.random() * 12) + 1;
var green = Math.floor(Math.random() * 12) + 1;
var red = Math.floor(Math.random() * 12) + 1;
var purple = Math.floor(Math.random() * 12) + 1;


//assigns value to the gem pics based on above random numbers
$("#blueGem").attr("value", blue);
$("#greenGem").attr("value", green);
$("#redGem").attr("value", red);
$("#purpleGem").attr("value", purple);


//puts goal number variable in goal number box
$("#goalNumber").text(playerNumber);

//puts player number variable in player box
$("#playerNumber").text(goalNumber);

//puts wins in wins box (ccurrently at zero)
// $("#wins").text(wins);

// //puts losses in losses box
// $("#losses").text(losses);


//when you click one of the gems
$("img").click(function() {
  //playerNumber equals whatever it was before plus the value of the gem
  playerNumber = playerNumber + parseInt($(this).attr("value"));


  if (playerNumber == goalNumber) {
    //if the player number meets the goal number,
    //a non-existent varaible called wins is incremented.
    //see, how do I set up wins, without having it reset every refresh!?
    //So maybe check if there's already a value in local storage, and if not, 
    //assign it to
    //zero.
    //So at the top of the page "if wins in localstorage = true, wins = 
    //localStorage.getItem(wins)"
    //else, wins = 0.
    wins++;

    localStorage.setItem("wins", wins);

    var x = screen.width / 2 - 500 / 2;
    var y = screen.height / 2 - 350 / 2;
    window.open("win.html", "_blank", 'height=385,width=500,left=' + x + ',top=' + y);

    //if you win, goal number is reset, player number is reset, and so are gem 
    //values
    goalNumber = Math.floor(Math.random() * 120) + 1;
    playerNumber = 0;


    blue = Math.floor(Math.random() * 12) + 1;
    green = Math.floor(Math.random() * 12) + 1;
    red = Math.floor(Math.random() * 12) + 1;
    purple = Math.floor(Math.random() * 12) + 1;

    $("#blueGem").attr("value", blue);
    $("#greenGem").attr("value", green);
    $("#redGem").attr("value", red);
    $("#purpleGem").attr("value", purple);

  }

  if (playerNumber > goalNumber) {
    losses++;

    localStorage.setItem("losses", losses);

    var x = screen.width / 2 - 500 / 2;
    var y = screen.height / 2 - 350 / 2;
    window.open("loss.html", "_blank", 'height=385,width=500,left=' + x + ',top=' + y);

    //if you lose, all those numbers are reset as well.     
    goalNumber = Math.floor(Math.random() * 100) + 1;
    playerNumber = 0;

    blue = Math.floor(Math.random() * 10) + 1;
    green = Math.floor(Math.random() * 10) + 1;
    red = Math.floor(Math.random() * 10) + 1;
    purple = Math.floor(Math.random() * 10) + 1;

    $("#blueGem").attr("value", blue);
    $("#greenGem").attr("value", green);
    $("#redGem").attr("value", red);
    $("#purpleGem").attr("value", purple);
  }

  //this displays the playerNumber and goalNumber in their appropriate divs 
  //after each click
  $("#goalNumber").text(playerNumber);

  $("#playerNumber").text(goalNumber);

  // $("#wins").text(wins);

  // $("#losses").text(losses);






  //this extracts them from local storage to be printed.
  $("#wins").text(localStorage.getItem("wins"));

  $("#losses").text(localStorage.getItem("losses"));

  //now the problem is once you hit refresh, wins and losses go back to zero.  
  //Is that because
  //the computer starts reading from the top again?





});


$("button").click(function() {
  confirm("Are you sure you want to delete your stats?");

  if (confirm) {
    localStorage.clear();
  }
})

Answer 1

localstorage将内容另存为字符串，我认为您应该解析它顺便说一句

var losses = localStorage.getItem("wins");

似乎有复制粘贴错误（应该是“丢失”）

if (localStorage.getItem("wins") === null) {
    var wins = 0;
    var losses = 0;
}
else 
{
    var wins = parseInt(localStorage.getItem("wins"));
    var losses = parseInt(localStorage.getItem("losses"));
}

本地存储仅持续到现在

1 个答案: