Как остановить счет в Javascript приложении

Содержание

Вопрос или проблема
Ответ или решение
Объяснение изменений:

Вопрос или проблема

В настоящее время я разрабатываю приложение в рамках проекта. Вчера я начал изучать Javascript и столкнулся с проблемой: как остановить мой счет.

Что делает моя программа:
Вы видите изображение, на которое нужно кликнуть. С каждым кликом счет увеличивается на 1. При этом таймер на 30 секунд отсчитывает время и отображает его на экране.

Что я хочу достичь:
Пока что у меня все работает. Таймер работает отлично, счет увеличивается, когда я кликаю на изображение. Но я не могу добиться того, чтобы изображение стало некликабельным после того, как таймер достигнет 00:00, и чтобы счет остался на последнем достигнутом значении, чтобы я мог поместить его в список лучших результатов.

Особенно речь идет об этой части:

function blobPress() {
            if (timeLeft > 0) {
                count++;
                document.getElementById("count").innerHTML = count;
            } else {
                blob.style.display = "block";
            }
        }

let alarm = new Audio('alarm.mp3');
let finish = new Audio('finish.mp3');
let timerStarted = false;
let count = 0;


function startTimer() {
  if (!timerStarted) {
    let startTime = new Date().getTime();
    let thirtySeconds = 1000 * 30;
    let endTime = startTime + thirtySeconds;
    alarm.play();


    let refreshInterval = setInterval(function() {
      let timeLeft = endTime - new Date().getTime();


      if (timeLeft > 0) {
        let minutes = timeLeft / (1000 * 60);
        minutes = Math.floor(minutes);
        let seconds = (timeLeft / 1000) % 60;
        seconds = Math.round(seconds);
        seconds = ('0' + seconds).slice(-2);
        let text="0" + minutes + ' : ' + seconds;
        timer.innerHTML = text;
      } else {
        finish.play();
        timer.innerHTML = '00 : 00';
        clearInterval(refreshInterval);
      }
    }, 1000);
    timerStarted = true;
  }
}

function showCount() {
  if (timerStarted) {
    document.getElementById('count').style.color = "white";
  } else {
    document.getElementById('count').style.color = "#262626";
  }
}

function hideButton() {
  if (button.style.display === "none") {
    button.style.display = "block";
  } else {
    button.style.display = "none";
  }
}

function blobPress() {
  if (timeLeft > 0) {
    count++;
    document.getElementById("count").innerHTML = count;
  } else {
    blob.style.display = "block";
  }
}

body {background-color: #262626;} 

.background-dark {
  background-color: #262626;
}

.center {
  display: flex;
  justify-content: center;
}

.margin-top {
  margin-top: 60px;
}

.timer {
  font-size: 80px;
  color: white;
  font-family: 'Roboto', sans-serif;
}

.count {
  font-size: 50px;
  color: #262626;
  font-family: 'Roboto', sans-serif;
}

<div>
  <img src="https://stackoverflow.com/questions/79018085/img/menu.png">
</div>


<div class="center margin-top count" id="count">0</div>


<div class="center margin-top">
  <img id="blob" onclick="blobPress()" src="img/blob.png" style="transform: scale(0.9);">
</div>


<div class="center margin-top timer" id="timer">00 : 30</div>


<div class="center margin-top">
  <img id="button" onclick="startTimer(); showCount(); hideButton()" src="img/button.png" style="transform: scale(0.8);">
</div>

Ответ или решение

Чтобы остановить счетчик кликов, когда таймер достигает 00:00, необходимо внести изменения в вашу функцию blobPress() и добавить новую переменную timeLeft для отслеживания оставшегося времени. Вот полное решение:

Измените переменную timeLeft, чтобы она была доступна во всем скрипте.
Проверьте ее значение в функции blobPress() и отключите возможность клика по изображению, когда время закончилось.

Вот как будет выглядеть окончательный вариант вашего кода:

let alarm = new Audio('alarm.mp3');
let finish = new Audio('finish.mp3');
let timerStarted = false;
let count = 0;
let timeLeft; // Добавляем переменную для хранения оставшегося времени

function startTimer() {
  if (!timerStarted) {
    let startTime = new Date().getTime();
    let thirtySeconds = 1000 * 30;
    let endTime = startTime + thirtySeconds;
    alarm.play();

    let refreshInterval = setInterval(function() {
      timeLeft = endTime - new Date().getTime(); // Обновляем значение timeLeft

      if (timeLeft > 0) {
        let minutes = timeLeft / (1000 * 60);
        minutes = Math.floor(minutes);
        let seconds = (timeLeft / 1000) % 60;
        seconds = Math.round(seconds);
        seconds = ('0' + seconds).slice(-2);
        let text = "0" + minutes + ' : ' + seconds;
        timer.innerHTML = text;
      } else {
        finish.play();
        timer.innerHTML = '00 : 00';
        clearInterval(refreshInterval);
        disableBlob(); // Отключаем возможность кликов по изображению
      }
    }, 1000);
    timerStarted = true;
  }
}

function disableBlob() {
  const blob = document.getElementById('blob');
  blob.onclick = null; // Отключаем обработчик клика
  blob.style.opacity = "0.5"; // Можно добавить визуальный эффект, чтобы показать, что клик недоступен
}

function showCount() {
  if (timerStarted) {
    document.getElementById('count').style.color = "white";
  } else {
    document.getElementById('count').style.color = "#262626";
  }
}

function hideButton() {
  if (button.style.display === "none") {
    button.style.display = "block";
  } else {
    button.style.display = "none";
  }
}

function blobPress() {
  if (timeLeft > 0) {
    count++;
    document.getElementById("count").innerHTML = count;
  } else {
    blob.style.display = "block";
  }
}

Объяснение изменений:

timeLeft как глобальная переменная: Мы объявили timeLeft вне функций, чтобы она была доступна в blobPress().
Логика в startTimer(): Мы обновляем значение timeLeft каждые секунды.
Функция disableBlob(): Эта функция отключает возможность кликов на изображении, когда таймер достигает 00:00. Мы также добавили изменение стиля, чтобы показать, что элемент неактивен.

Теперь ваша программа будет корректно останавливать счет при истечении времени и сохранять последнее число кликов для отображения в таблице рекордов.

Как остановить счет, если таймер достигнет 00:00?

Вопрос или проблема

Ответ или решение

Объяснение изменений: