试图为我的 HTML 游戏创造最快时间的高分

Question

所以我正在制作这个反应游戏，玩家必须尽可能快地点击一个框。我已经显示了单击框所花费的时间，但我试图显示玩家单击框的最快时间。非常感谢您的帮助。

这是我的代码：

<body>
    <div>
        <p>Your time: <span id="time"></span></p>
        <p>Highscore: <span id="highscore"></span></p>
        <div id="shape"></div>
    </div>
    <script>
        var start = new Date().getTime();
        function makeShapeAppear() {
            document.getElementById("shape").style.display = "block"
            start = new Date().getTime();
        }
        function appearAfterDelay() {
            setTimeout(makeShapeAppear, 1000);
        }
        appearAfterDelay();
        document.getElementById("shape").onclick = function() {
            var end = new Date().getTime();
            var timeTaken = (end - start)/1000;
            document.getElementById("shape").style.display = "none";
            document.getElementById("time").innerHTML = timeTaken + "s";
            appearAfterDelay();
        }
    </script>
</body>

总而言之，我想在高分 ID 中显示最短的 "timeTaken" 变量。提前谢谢你。

Answer 1

我建议使用 cookie。每次用户单击该框时，检查 cookie 是否存在，如果不存在，则创建一个具有时间值的。如果确实存在，则将其值与当前值进行比较，并根据它是否较低更新 cookies 值。

Answer 2

如果没有高分就存储你上次用的时间，如果新用的时间小于你的高分则将高分设置为用时。像这样。

#shape{
  width: 200px;
  height: 200px;
  background-color:red;
}

<body>
  <div>
    <p>Your time:
      <span id="time"></span>
    </p>
    <p>Highscore:
      <span id="highscore"></span>
    </p>
    <div id="shape"></div>
  </div>
  <script>
    var highscore;
    var start = new Date().getTime();
    function makeShapeAppear() {
      document.getElementById("shape").style.display = "block"
      start = new Date().getTime();
    }
    function appearAfterDelay() {
      setTimeout(makeShapeAppear, 1000);
    }
    appearAfterDelay();
    document.getElementById("shape").onclick = function () {
      var end = new Date().getTime();
      var timeTaken = (end - start) / 1000;
      highscore = (timeTaken < highscore || !highscore ? timeTaken : highscore);
      document.getElementById("shape").style.display = "none";
      document.getElementById("time").innerHTML = timeTaken + "s";
      document.getElementById("highscore").innerHTML = highscore + "s";
      appearAfterDelay();
    }
  </script>
</body>

Answer 3

如果您想要显示 "the fastest time the player (singular) has clicked a box" 并且想要保留该值 尽管用户关闭并打开浏览器或选项卡 您可以使用 localStorage 或 sessionStorage。

localStorage.setItem("bestTime", timeTaken);

和

var bestTime = localStorage.getItem("bestTime");

if(timeTaken > bestTime){
localStorage.setItem("bestTime", timeTaken);
}

这种方法将信息存储在浏览器中。如果你想存储最快时间玩家（复数）点击或保存的数据以在不同的浏览器中使用，你需要使用数据库存储。

试图为我的 HTML 游戏创造最快时间的高分

Trying to create a high score of the fastest time for my HTML game

javascript

time

measure