Question

我正在创建一个简单的“ clickgame”，并且可以按照我的意愿运行。现在，我想添加一个高分。我阅读了有关它的教程，但是当我将其添加到代码中时，游戏将不再启动。有人可以帮忙吗？

HTML

<head>
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <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>
  <script type="text/javascript"></script>
  <script language="javascript" type="text/javascript" src="index.js"></script>
</body>

JavaScript

var localStorageName = "clickgame";
var highScore;

let klick = 0;

let timerId = 0;

game.state.add("TitleScreen", titleScreen);
game.state.add("PlayGame", playGame);
game.state.add("GameOver", gameOver);
highScore = localStorage.getItem(localStorageName) == null ? 0 : localStorage.getItem(localStorageName);
game.state.start("TitleScreen");

if (localStorage.getItem(localStorageName) == null) {
  highScore = 0;
} else {
  highScore = localStorage.getItem(localStorageName);
}

$("#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!");
      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 + "%");
})

create: function() {
  highScore = Math.max(score, highScore);
  localStorage.setItem(localStorageName, highScore);

  var style = {
    font: "32px Monospace",
    fill: "#00ff00",
    align: "center"
  }

  var text = game.add.text(
    game.width / 2, game.height / 2, "Game Over\n\nYour score: " + score + "\nBest score: " + highScore + "\n\nTap to restart", style
  );

  text.anchor.set(0.5);
  game.input.onDown.add(this.restartGame, this);
}

已更新

好吧，我更改了代码，知道弹出了Highscore，但是分数没有计算在内。每次我完成比赛时，分数都是0。有人知道如何解决问题吗？

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;
}

Answer 1

您可能希望在代码中的某个位置将score变量设置为某个值，因为如果将分数设置为未定义最大值，则您的 highScore 变量将为{{1 }}，这将在整个代码执行过程中引起问题。

在javascript中保存高分

1 个答案: