Школа
Веб-разработка

Как отслеживать и обрабатывать чит‑коды

Василий, привет!

Я хорошо представляю, как в JS обрабатывать горячие клавиши: Ctrl+I, Ctrl+G и прочие. Но не могу понять, как отслеживать и обрабатывать их последовательность, например, если нужно вводить пароли или чит‑коды вслепую, без поля для ввода.

Как это сделать? С какой стороны подойти к задаче?

Егор Георгиевич
15 авг 2019
👁 5320   🗩3
Веб-разработка

Как отслеживать и обрабатывать чит‑коды

Василий, привет!

Я хорошо представляю, как в JS обрабатывать горячие клавиши: Ctrl+I, Ctrl+G и прочие. Но не могу понять, как отслеживать и обрабатывать их последовательность, например, если нужно вводить пароли или чит‑коды вслепую, без поля для ввода.

Как это сделать? С какой стороны подойти к задаче?

Егор Георгиевич
15 авг 2019
👁 5320   🗩3
Василий Половнёв
Технический директор бюро
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

Егор!

Отслеживайте все нажатия клавиш и собирайте их в промежуточный буфер до тех пор, пока в буфере не получится искомый пароль или чит‑код:

// Как быстро забывать ввод. Ждём 2 секунды: если нажатий на клавиши нет,
// считаем, что ввод окончен
const INPUT_THRESHOLD = 2000

function onCheatCode(cheatCode, callback) {
  // В buffer собираем то, что получается
  let buffer = []
  let lastInputAt
  
  document.addEventListener('keydown', (event) => {
    const key = event.key.toLowerCase()
    const currentTime = Date.now()
    
    if (currentTime - lastInputAt > INPUT_THRESHOLD) buffer = []
    
    // Добавляем нажатую клавишу в буфер
    buffer.push(key)
    lastInputAt = currentTime
    
    // Если буфер совпал с кодом, очищаем буфер и вызываем колбэк
    if (buffer.join('') === cheatCode) {
      buffer = []
      return callback()
    }
  })
}

onCheatCode('power overwhelming', () => location.href = 'https://youtu.be/AJKx1XDBqNo')

Советую получившийся код оптимизировать для вашей задачи. Скажем, если чит‑кодов много, лучше использовать один обработчик keydown на все чит‑коды, а не по обработчику на каждый код. Если на странице есть текстовые поля, стоит игнорировать ввод в них, опираясь на event.target.tagName.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы