Clickr

Вы когда-нибудь задумывались о том сколько раз вы можете нажать на кнопку за 5 секунд? Давайте напишем простую игру на JavaScript и узнаем это. Цель игры - нажать на кнопку как можно больше раз за 5 секунд.

Состояние

Для начала создадим две константы:

const TIMEOUT = 5000;
const INTERVAL = 100;

В TIMEOUT будет храниться значение общего количество времени в течение которого пользователь будет нажимать на кнопку, т. е. 5 секунд или 5000 милисекунд. В INTERVAL будет храниться значение для интервала, который будет отвечать за уменьшение оставшегося времени.

Далее объявим переменные:

let clicks = 0;
let startTime;
let timeout;
let interval;

В clicks будет храниться количество нажатий на кнопку. В startTime будет храниться количество милисекунд определяющих то когда игра началась; оно будет использоваться для расчета оставшегося времени. Переменные timeout и interval будут использоваться для сохранения значений вызова функций setTimeout и setInterval.

Далее получим доступ к элементам на странице:

const display = document.querySelector('output');
const button = document.querySelector('button');

Мы определили состояние игры и получили доступ к необходимым элементам.

Начало игры

Игра будет запускаться по нажатию на кнопку, т. е. нам необходимо обработать событие onclick у элемента button:

button.onclick = startGame;

Вместо метода addEventListener я использую простое присваивание. Чуть позже будет понятно почему.

Теперь напишем функцию startGame:

function startGame() {
  startTime = Date.now();
  button.onclick = updateCounter;
  interval = setInterval(updateDisplay, INTERVAL);
  timeout = setTimeout(stopGame, TIMEOUT);
}

Первое что мы делаем в функции, это сохраняем текущее время. Далее заменяем обработкик события onclick на функцию updateCounter, которая будет обновлять счетчик. После этого запускается интервал, который будет вызывать функцию updateDisplay каждые 100 милисекунд. В конце функции запускается таймаут, который вызовет функцию stopGame через 5 секунд после начала игры.

Далее перейдем к определению функций обновляющих состояние.

Обновление состояния

Начнем с функции updateCounter:

function updateCounter() {
  clicks += 1;
  button.textContent = clicks;
}

В функции updateCounter увеличивается значение нажатий и обновляется свойство textContent у элемента button.

Следующая функция updateDisplay:

function updateDisplay() {
  const delta = Date.now() - startTime;
  const seconds = Number.parseFloat(delta / 1000).toFixed(2);

  display.textContent = seconds;
}

В функции updateDisplay высчитивается разница между текущим временем и начальным. Далее это значение используется для получения числа секунд. И в конце обновляется свойство textContent у элемента display.

Окончание игры

Последняя функция остановки игры:

function stopGame() {
  button.onclick = null;
  display.textContent = 'Game Over';

  clearInterval(interval);
  clearTimeout(timeout);
}

В функции у кнопки удаляется обработчик, показывается текст Game Over и останавливаются таймеры.