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

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

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

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

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

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

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

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

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

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

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

Егор!

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

// Как быстро забывать ввод. Ждём 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

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

Комментарии

Если вы обрабатываете keydown или keypress на странице, то после того, как вы решили, что эта клавиша — ваша, обязательно нужно сделать event.preventDefault(). Иначе клавиша после вашей обработки провалится в браузер и будет обработана ещё и в нём.

В Firefox, например, есть настройка Preferences → General → Browsing → Search for text when you start typing. Когда она включена, ввод текста поднимает поисковую панель и запускает поиск.

Соответственно, если ваш обработчик забыл погасить за собой событие — у меня всплывёт поиск. Все дальнейшие нажатия пойдут в поисковую строку, и я не смогу набрать чит‑код.

Антон Лях

Чит‑коды видны в коде, если посмотреть исходник скрипта. А можно ли как‑то спрятать их от просмотра?

Антон, можно хранить хеши кодов:

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

И сравнивать их с хешем буфера:

/* ... */
if (hash(buffer.join('')) === cheatCode) {
  buffer = []
  return callback()
}
/* ... */
Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

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