javascript - 高分不算 - 每次 0

Question

我创建了一个运行良好的简单“Clickgame”。不起作用的是我想要实现的高分。游戏结束后，每次最高分都是0。有人知道问题出在哪里吗，因为我是Javascript的新手？

这里是代码。一切正常，直到 highScore 功能。由于我是 javascript 的新手，所以我找不到错误。

let klick = 0;
let timerId = 0;

$("#start").click(function() { //clickfunktion beim starten.
    $("#start").fadeOut();
    $("#welcome").fadeOut();
    $("#time").fadeIn(900);
    $("#clicker").fadeIn();

    var display = document.querySelector('#time'); //referenz auf das Html attribut Time zum anzeigen.
    var dauer = 5;
    startTimer(dauer, display); //legt die zeit fest, und dass die Funktion gestartet wird.
})

function startTimer(dauer, display) {
    let timer = dauer;
    let sekunden;
    timerId = setInterval(function() {
        sekunden = parseInt(timer); //parseInt gibt eine ganze Zahl zurück
        display.textContent = sekunden; // zeigt sekunden-variable
        --timer; //setzt den timer immer einen herab
        if (timer < 0.00) {
            timer = dauer;
            $("#start").fadeIn();
            $("#welcome").fadeIn();
            $("#time").fadeOut();
            $("#clicker").fadeOut();
            $("#clicker").css("margin-top", "10%");
            $("#clicker").css("margin-left", "50%");

            alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");
            alert('High Score is ' + highScore());

            klick = 0
            clearInterval(timerId);
        } //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet
    }, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)
};

$("#clicker").click(function() {
    let zufall = Math.floor(Math.random() * 45) + 1 //setzt eine zufällige höhe für den clicker

    klick = klick + 1 //setzt den zähler beim klicken eins hoch
    $("#clicker").css("margin-top", zufall + "%");
    $("#clicker").css("margin-left", zufall + 45 + "%");
})

function highScore(score) {
    var saved = 0;
    try {
        saved = parseFloat(localStorage.highScore);
    } catch (e) {
        saved = 0;
    }
    if (!(typeof score === 'undefined')) {
        try {
            score = parseFloat(score);
        } catch (e) {
            score = 0;
        }
        if (score > saved) {
            saved = score;
            localStorage.highScore = '' + score;
        }
    }
    if (isNaN(saved)) {
        saved = 0;
        localStorage.highScore = '0';
    }
    return saved;
}

<div>
    <span id="time"></span>
</div>
<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>
<button id="start" type="button">Start</button>
<button id="clicker" type="button">KLICK</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

这个问题的部分原因是您从未为 highScore() 函数提供新的高分，因此它始终设置为 0。另请注意，您可以使用 null 强制转换来提供默认值，而不是 try/catch block 。试试这个:

function startTimer(dauer, display) {
  // code... 
  alert('High Score is ' + highScore(klick));
  // more code... 
}

function highScore(score) {
  var saved = 0;
  saved = parseFloat(localStorage.getItem('highScore')) || 0;
  score = parseFloat(score) || 0;

  if (score > saved) {
    saved = score;
    localStorage.setItem('highScore', score);
  }
  return saved;
}

Working fiddle