Question

我正在制作一个反应速度游戏。但没有多少成功。你可以找到它： http://jdopperen.informatica.bc-enschede.nl/pws/ 但我不知道如何为它制作计时器？这就是我现在所拥有的：

    <div class="container mainmain">
    <h1>
      Je speelt nu.
    </h1>
        <script>
          var start;
          var end;
          var n;

          $( ".bodym" ).click(function() {
              setInterval(function(){
                  $( ".circle2" ).css( "fill", "yellow" ); 
                  start = new Date().getTime();
              }, 3000, 14000);

              $(".circle2").click(function(){
                  n = start.getTime();
                  document.write(n);
              });
          });;
    </script>
    <div class="circle2">
        <svg height="100" width="100">
            <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2"/>
        </svg>
    </div>

当然，我看到它不完整，但我不知道在开始时间添加什么，并在圆圈变为黄色时停止。 +如果他们在圆圈变黄之前点击它不应该给出时间但是错误。如果您对我的代码有任何疑问，请询问。

PS。对不起我的英语坏语。

Answer 1

我刚刚制作了https://jsfiddle.net/36qd9g1q/1/，您可以查看它，并根据您的需要使用它。游戏点是 - 单击开始按钮，它将等待5秒，然后将启动计时器。一旦变为绿色，您必须在中间按下红色块。之后，它会为表格添加分数，您可以再次单击按钮再次播放。我没有做任何验证，没有花哨的东西，只有基本的东西，带你走上一些轨道。

游戏从这开始：

$("#start").click(function(){
  setTimeout( // in 5000 ms btn will be green
    function() {
      startTime = new Date(); // register current time
      timerVar = setInterval(countTimer, 1); // call this every 1 ms to update UI with timer
      $("#target").css("background-color", "green"); //make it green
    }, 5000);
});

游戏结束于此：

$("#target").click(function() {
  $("#target").css("background-color", "yellow"); //resets color
  $("#scores").append($("<tr>").append($("<td>").html($("#timer").html()))); // inserts record into table
  $("#timer").empty(); // clears timer in UI
  clearInterval(timerVar); // stops timer
});

反应速度计时器

1 个答案: