Вы когда-нибудь задумывались о том сколько раз вы можете нажать на кнопку за 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 и останавливаются таймеры.

Регистрация

Для регистрации введите актуальный адрес электронной почты. На него вам придет письмо для активации аккаунта.

Вход

или

Сброс пароля

Для сброса пароля введите адрес электронной почты указанный при регистрации. На этот адрес придет письмо с инструкцией.

Регистрация

Для регистрации введите актуальный адрес электронной почты. На него вам придет письмо для активации аккаунта.

Уровень

Сумма оплаты составляет 500 руб. Доступ будет действовать до 25.07.2021.