Question

当我在完成第一轮比赛后启动Clickgame时，秒数为0、5、4、3、2、1，而不是5、4、3、2、1。有谁知道代码中的错误是什么以及要更改什么？这样就好像5算了两倍。

我想知道的另一件事，如何添加功能（输入HTML）来添加弹出窗口，以便用户可以选择自己想要播放的秒数？

let klick = 0;
display = document.querySelector('#time');

$("#start").click(function() { //clickfunktion beim starten.
  $("#start").fadeOut(); //Der Startbutton geht weg
  $("#welcome").fadeOut(); // Das Willkommensschild geht weg

  $("#time").fadeIn(900); //Timer kommt 
  $("#clicker").animate({
    height: 'toggle'
  }); //clicker wird gestartet 

  var dauer = 5;

  startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.  
})

function startTimer(dauer) {
  let timer = 5;

  zeit = setInterval(function() {
    display.textContent = parseInt(timer); // zeigt sekunden-variable

    --timer; //setzt den timer immer einen herab

    if (timer < 0.00) {

      timer = 5;
      console.log(timer);
      $("#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
      console.log(timer);



      clearInterval(zeit)

    } //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() * 40) - 20 //setzt eine zufällige höhe für den clicker
  let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert

  klick = klick + 1 //setzt den zähler beim klicken eins hoch
  if (klick % 2 == 0) {
    $("#clicker").animate({
      opacity: '0.3',
      left: zufall + "%",
      top: zufal + "%"
    }, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle
  } else {
    $("#clicker").animate({
      opacity: '1.0',
      left: zufall + "%",
      top: zufal + "%"
    }, "fast")

  }


});

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

Answer 1

正如@Robin Zigmond用户所建议的那样，因为您正在使用setInterval，所以您甚至在每次运行间隔之前都要等待一秒钟。

对此的一种潜在解决方案是将代码包含在一个函数中，先调用它，然后设置间隔。

我在下面附上了一个可行的解决方案：

let klick = 0;
display = document.querySelector('#time');

$("#start").click(function() { //clickfunktion beim starten.
  $("#start").fadeOut(); //Der Startbutton geht weg
  $("#welcome").fadeOut(); // Das Willkommensschild geht weg

  $("#time").fadeIn(900); //Timer kommt 
  $("#clicker").animate({
    height: 'toggle'
  }); //clicker wird gestartet 

  var dauer = 5;

  startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.  
})

function startTimer(dauer) {
  let timer = 5;
  runTimer();
  zeit = setInterval(runTimer, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)
  function runTimer(){
    display.textContent = parseInt(timer); // zeigt sekunden-variable

    --timer; //setzt den timer immer einen herab

    if (timer < 0.00) {

      timer = 5;
      console.log(timer);
      $("#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
      console.log(timer);

      clearInterval(zeit);

    } //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet

}
  

};

$("#clicker").click(function() {
  let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker
  let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert

  klick = klick + 1 //setzt den zähler beim klicken eins hoch
  if (klick % 2 == 0) {
    $("#clicker").animate({
      opacity: '0.3',
      left: zufall + "%",
      top: zufal + "%"
    }, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle
  } else {
    $("#clicker").animate({
      opacity: '1.0',
      left: zufall + "%",
      top: zufal + "%"
    }, "fast")

  }


});

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

对不起，我使用的语言与文档所讲的语言不同，因此注释可能不正确。

Answer 2

我想您的计数机制太复杂了。这是您要实现的目标的简化版本：

let c = 0
document.getElementById('count').addEventListener('click', function() {
  c++
})
document.getElementById('timer').addEventListener('click', function() {
  let number = 5
  let interval = setInterval(function() {
    document.getElementById('thenumber').innerHTML = number
    number--
    if (number == -1) {
      alert('You clicked: ' + c)
      c = 0
      clearInterval(interval)
    }
  }, 1000)
})

<div id="thenumber"></div>
<button id="timer">klick me</button>
<button id="count">count</button>

为什么游戏计数0、5、4、3、2、1而不是5、4、3、2、1秒？

2 个答案: