代码之家 › 专栏 › 技术社区 › R A

尝试为我的HTML游戏创建最快时间的高分

measure time javascript

R A · 技术社区 · 6 年前

所以我在做这个反应游戏,玩家必须尽可能快地点击一个方框。我已经显示了单击方框所用的时间,但我正在尝试显示玩家单击方框的最快时间。我非常感谢你的帮助。

这是我的代码:

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

总而言之,我想在highscore id中显示最短的“Timetake”变量。请提前感谢。

3 回复 | 直到 6 年前

Malcor 6 年前

如果没有高分,请存储上次使用的时间,如果新使用的时间小于高分,请将高分设置为使用的时间。像这样。

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

Riz-waan 6 年前

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

Emeeus 6 年前

如果你想展示“最快的时间” 球员 (单数)单击了一个框“并且您希望保留该值 尽管用户关闭并打开浏览器或选项卡 您可以使用本地存储或会话存储。

localStorage.setItem("bestTime", timeTaken);

和

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

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

这种方法将信息存储在浏览器中。如果你想储存最快的时间球员 (复数)单击或保存要在不同浏览器中使用的数据后,需要使用数据库存储。