javascript - Javascript高分更新，无论新分数是否更高

Question

新手来了！抱歉，如果我没有正确格式化。我有一个打地鼠游戏，想在本地存储中记录分数。底部名为“highscore”的功能不起作用 - 它会更新“highscore”，无论它实际上是否高于之前的分数！我敢肯定我错过了一些非常明显的东西，就像我说的那样，对此非常陌生！仅在此阶段使用 Vanilla Javascript，因此保留提示或解决方案将是理想的。非常感谢任何正确方向的帮助或指示！谢谢！

  window.onload = function() {
    setUp();
    count = 0;
    myDiv = document.getElementById("mole");
    myDiv.addEventListener("click", function() {});
  };

  function setUp() {
    let img = document.createElement("img");
    img.src = "mole.png";
    img.onclick = function(event) {
      whackedMole();
    };
    img.className = "mole";
    img.id = "mole";
    document.getElementById("moleMap")
      .rows[randomNumber()].cells[randomNumber()].appendChild(img);
  }


  function randomNumber() {
    return Math.floor(Math.random() * 5);
  }


  function whackedMole() {
    let mole = document.getElementById("mole");
    let audio = new Audio('whack-audio.wav');
    audio.play();
    document.getElementById("counter").innerHTML = (++count);
    mole.parentNode.removeChild(mole);
    setUp();
  }



  let myTimer = 0;

  function clock() {
    myTimer = setInterval(myClock, 1000);
    var c = 10;

    function myClock() {
      document.getElementById("countdown").innerHTML = --c;
      if (c <= 0) {
        clearInterval(myTimer);
        alert("Your score is " + count + "!");
        highscore();
        document.getElementById("counter").innerHTML = 0;
        count = 0;
      }
    }
  }


//This is the function in question;

  function highscore() {
    document.getElementById("highscore").innerHTML = count;
    let highscore = count;
    if (count <= highscore) {
      return;
    } else if (count > highscore) {
      localStorage.setItem('highscore', count);
    }
  }

标签： javascriptfunction

Answer 1

如果我理解正确，问题出在这段代码中：

function highscore() {
    document.getElementById("highscore").innerHTML = count;
    let highscore = count;
    if (count <= highscore) {
        return;
    } else if (count > highscore) {
        localStorage.setItem('highscore', count);
    }
}

特别是在这两行：

document.getElementById("highscore").innerHTML = count;

和

let highscore = count;

每次调用 highscore(); 无论计数是否大于高分，您都在更新 DOM。然后在我暗示 highscore 的第二行代码获取 count 的值，因此 if 子句中的第一条语句将始终评估为 true。我要做的是修改代码如下：

function highscore() {
    // Just in case the highscore is not yet initialized.
    if (!localstorage.getItem('highscore')) {
        localstorage.setItem('highscore', count);
    }
    let highscore = localstorage.getItem('highscore');
    if (count <= highscore) {
        return;
    } else if (count > highscore) {
        document.getElementById("highscore").innerHTML = count;
        localStorage.setItem('highscore', count);
    }
}