Попытка создать рекорд в самое быстрое время для моей HTML-игры - PullRequest
Новая
       20

Попытка создать рекорд в самое быстрое время для моей HTML-игры

0 голосов
/ 04 мая 2018

Итак, я делаю эту реакцию, в которой игрок должен щелкнуть мышью как можно быстрее. Я показал время, потраченное на нажатие поля, но я пытаюсь отобразить самое быстрое время, когда игрок нажал на поле. Буду очень признателен за вашу помощь.

Вот мой код: 

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

Подводя итог, я хочу отобразить самую короткую переменную timeTaken в идентификаторе рекорда. Заранее спасибо.

Ответы [ 3 ]

0 голосов
/ 04 мая 2018

Сохраните последний раз, когда вы взяли, если нет рекорда, если новое взятое время меньше, чем ваш рекорд, а затем установите рекорд на время. Как это. 

#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>
0 голосов
/ 04 мая 2018

Если вы хотите показать «самое быстрое время , игрок (в единственном числе) нажал на коробку», и вы хотите сохранить это значение несмотря на то, что пользователь закрылся и открыл браузер или вкладку Вы можете использовать localStorage или sessionStorage. 

localStorage.setItem("bestTime", timeTaken);

и 

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

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

Этот подход сохраняет информацию в браузере. Если вы хотите сохранить самое быстрое время, когда проигрыватели (во множественном числе) нажали или сохранили данные для использования в разных браузерах, вам необходимо использовать хранилище базы данных.

0 голосов
/ 04 мая 2018

Я бы предложил использовать куки. Каждый раз, когда пользователь щелкает по полю, проверяет, существует ли cookie, если нет, создайте его со значением времени. Если оно существует, сравните его значение с текущим и, в зависимости от того, меньше ли оно, обновите значение cookie.

...