47 KiB

Raw Blame History Unescape Escape

Создание игры с использованием событий

Задумывались ли вы, как сайты узнают, что вы нажали кнопку или ввели текст в поле? Это магия событийного программирования! Что может быть лучше для изучения этого важного навыка, чем создание чего-то полезного — игры на скорость набора текста, которая реагирует на каждое ваше нажатие клавиши.

Вы увидите своими глазами, как веб-браузеры "общаются" с вашим кодом на JavaScript. Каждый раз, когда вы кликаете, вводите текст или перемещаете мышь, браузер отправляет маленькие сообщения (мы называем их событиями) вашему коду, а вы решаете, как на них реагировать!

Когда мы закончим, у вас будет настоящая игра на скорость набора текста, которая отслеживает вашу скорость и точность. Но что еще важнее, вы поймете основные концепции, которые лежат в основе каждого интерактивного сайта, который вы когда-либо использовали. Давайте начнем!

Тест перед лекцией

Событийное программирование

Подумайте о своем любимом приложении или сайте — что делает его живым и отзывчивым? Все дело в том, как он реагирует на ваши действия! Каждый тап, клик, свайп или нажатие клавиши создают то, что мы называем "событием", и именно здесь начинается настоящая магия веб-разработки.

Вот что делает программирование для веба таким интересным: мы никогда не знаем, когда кто-то нажмет эту кнопку или начнет вводить текст в поле. Это может произойти сразу, через пять минут или вообще никогда! Такая непредсказуемость заставляет нас иначе подходить к написанию кода.

Вместо того чтобы писать код, который выполняется сверху вниз, как рецепт, мы пишем код, который терпеливо ждет, пока что-то произойдет. Это похоже на то, как телеграфисты в XIX веке сидели у своих аппаратов, готовые ответить в момент получения сообщения.

Так что же такое "событие"? Проще говоря, это то, что происходит! Когда вы нажимаете кнопку — это событие. Когда вы вводите букву — это событие. Когда вы перемещаете мышь — это еще одно событие.

Событийное программирование позволяет нам настроить код на прослушивание и реакцию. Мы создаем специальные функции, называемые обработчиками событий, которые терпеливо ждут определенных действий, а затем начинают действовать, когда они происходят.

Представьте обработчики событий как дверной звонок для вашего кода. Вы устанавливаете дверной звонок (addEventListener()), указываете, на какой звук он должен реагировать (например, 'click' или 'keypress'), и задаете, что должно произойти, когда кто-то позвонит (ваша пользовательская функция).

Как работают обработчики событий:

Слушают определенные действия пользователя, такие как клики, нажатия клавиш или движения мыши
Выполняют ваш пользовательский код, когда происходит указанное событие
Реагируют мгновенно на взаимодействие пользователя, создавая плавный опыт
Обрабатывают несколько событий на одном элементе с помощью разных обработчиков

NOTE: Стоит отметить, что существует множество способов создания обработчиков событий. Вы можете использовать анонимные функции или создавать именованные. Можно использовать различные сокращения, например, устанавливать свойство click или использовать addEventListener(). В нашем упражнении мы сосредоточимся на addEventListener() и анонимных функциях, так как это, вероятно, самый распространенный метод, который используют веб-разработчики. Это также самый гибкий способ, так как addEventListener() работает для всех событий, а имя события можно передать как параметр.

Распространенные события

Хотя веб-браузеры предлагают десятки различных событий, которые вы можете слушать, большинство интерактивных приложений опираются всего на несколько основных событий. Понимание этих ключевых событий даст вам основу для создания сложных взаимодействий с пользователем.

Существует десятки событий, которые вы можете слушать при создании приложения. Практически любое действие пользователя на странице вызывает событие, что дает вам огромную мощь для обеспечения желаемого опыта. К счастью, обычно вам понадобится лишь небольшое количество событий. Вот несколько распространенных (включая два, которые мы будем использовать при создании нашей игры):

Событие	Описание	Типичные случаи использования
`click`	Пользователь нажал на что-то	Кнопки, ссылки, интерактивные элементы
`contextmenu`	Пользователь нажал правую кнопку мыши	Пользовательские контекстные меню
`select`	Пользователь выделил текст	Редактирование текста, операции копирования
`input`	Пользователь ввел текст	Проверка форм, поиск в реальном времени

Понимание этих типов событий:

Срабатывают при взаимодействии пользователей с определенными элементами на вашей странице
Предоставляют подробную информацию о действиях пользователя через объекты событий
Позволяют создавать отзывчивые, интерактивные веб-приложения
Работают стабильно в разных браузерах и на разных устройствах

Создание игры

Теперь, когда вы понимаете, как работают события, давайте применим эти знания на практике, создав что-то полезное. Мы создадим игру на скорость набора текста, которая демонстрирует обработку событий и помогает развить важный навык для разработчиков.

Мы создадим игру, чтобы изучить, как работают события в JavaScript. Наша игра будет проверять навыки набора текста игрока, что является одним из самых недооцененных навыков, которые должны быть у всех разработчиков. Интересный факт: раскладка клавиатуры QWERTY, которую мы используем сегодня, была разработана в 1870-х годах для пишущих машинок — и хорошие навыки набора текста до сих пор остаются столь же ценными для программистов! Общий ход игры будет выглядеть следующим образом:

flowchart TD
    A[Player clicks Start] --> B[Random quote displays]
    B --> C[Player types in textbox]
    C --> D{Word complete?}
    D -->|Yes| E[Highlight next word]
    D -->|No| F{Correct so far?}
    F -->|Yes| G[Keep normal styling]
    F -->|No| H[Show error styling]
    E --> I{Quote complete?}
    I -->|No| C
    I -->|Yes| J[Show success message with time]
    G --> C
    H --> C

Как будет работать наша игра:

Начинается, когда игрок нажимает кнопку "Старт" и отображает случайную цитату
Отслеживает прогресс игрока в наборе текста слово за словом в реальном времени
Выделяет текущее слово, чтобы направить внимание игрока
Предоставляет немедленную визуальную обратную связь при ошибках набора
Рассчитывает и отображает общее время после завершения цитаты

Давайте создадим нашу игру и изучим события!

Структура файлов

Прежде чем начать кодировать, давайте организуемся! Чистая структура файлов с самого начала избавит вас от головной боли в будущем и сделает ваш проект более профессиональным. 😊

Мы будем держать все просто, используя всего три файла: index.html для структуры страницы, script.js для всей логики игры и style.css, чтобы все выглядело красиво. Это классическая тройка, которая лежит в основе большинства веб-приложений!

Создайте новую папку для вашей работы, открыв консоль или окно терминала и выполнив следующую команду:

# Linux or macOS
mkdir typing-game && cd typing-game

# Windows
md typing-game && cd typing-game

Что делают эти команды:

Создают новый каталог с именем typing-game для файлов вашего проекта
Переходят в только что созданный каталог автоматически
Настраивают чистое рабочее пространство для разработки вашей игры

Откройте Visual Studio Code:

code .

Эта команда:

Запускает Visual Studio Code в текущем каталоге
Открывает папку вашего проекта в редакторе
Предоставляет доступ ко всем инструментам разработки, которые вам понадобятся

Добавьте три файла в папку в Visual Studio Code с следующими именами:

index.html - Содержит структуру и контент вашей игры
script.js - Обрабатывает всю логику игры и обработчики событий
style.css - Определяет визуальный вид и стили

Создание пользовательского интерфейса

Теперь давайте создадим сцену, где будет происходить вся игровая активность! Представьте, что это как проектирование панели управления для космического корабля — мы должны убедиться, что все, что нужно нашим игрокам, находится там, где они ожидают.

Давайте разберемся, что действительно нужно нашей игре. Если бы вы играли в игру на скорость набора текста, что бы вы хотели видеть на экране? Вот что нам понадобится:

Элемент интерфейса	Назначение	HTML-элемент
Отображение цитаты	Показывает текст для набора	`<p>` с `id="quote"`
Область сообщений	Отображает статус и сообщения об успехе	`<p>` с `id="message"`
Поле ввода текста	Место, где игроки вводят текст	`<input>` с `id="typed-value"`
Кнопка "Старт"	Начинает игру	`<button>` с `id="start"`

Понимание структуры интерфейса:

Организует контент логически сверху вниз
Назначает уникальные идентификаторы элементам для их использования в JavaScript
Обеспечивает четкую визуальную иерархию для лучшего пользовательского опыта
Включает семантические HTML-элементы для доступности

Каждому из этих элементов понадобятся идентификаторы, чтобы мы могли работать с ними в нашем JavaScript. Мы также добавим ссылки на создаваемые файлы CSS и JavaScript.

Создайте новый файл с именем index.html. Добавьте следующий HTML:

<!-- inside index.html -->
<html>
<head>
  <title>Typing game</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Typing game!</h1>
  <p>Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!</p>
  <p id="quote"></p> <!-- This will display our quote -->
  <p id="message"></p> <!-- This will display any status messages -->
  <div>
    <input type="text" aria-label="current word" id="typed-value" /> <!-- The textbox for typing -->
    <button type="button" id="start">Start</button> <!-- To start the game -->
  </div>
  <script src="script.js"></script>
</body>
</html>

Разбор того, что делает эта структура HTML:

Подключает таблицу стилей CSS в <head> для оформления
Создает четкий заголовок и инструкции для пользователей
Устанавливает заполненные абзацы с конкретными идентификаторами для динамического контента
Включает поле ввода с атрибутами доступности
Предоставляет кнопку "Старт" для запуска игры
Загружает файл JavaScript в конце для оптимальной производительности

Запуск приложения

Частое тестирование вашего приложения во время разработки помогает вовремя выявлять проблемы и видеть ваш прогресс в реальном времени. Live Server — это незаменимый инструмент, который автоматически обновляет ваш браузер при сохранении изменений, делая разработку намного эффективнее.

Лучше всего разрабатывать итеративно, чтобы видеть, как все выглядит. Давайте запустим наше приложение. Существует замечательное расширение для Visual Studio Code под названием Live Server, которое будет как размещать ваше приложение локально, так и обновлять браузер каждый раз, когда вы сохраняете изменения.

Установите Live Server, перейдя по ссылке и нажав "Install":

Что происходит во время установки:

Открывает ваш браузер для установки Visual Studio Code
Проводит вас через процесс установки расширения
Может потребовать перезапуска Visual Studio Code для завершения настройки

После установки в Visual Studio Code нажмите Ctrl-Shift-P (или Cmd-Shift-P), чтобы открыть палитру команд:

Понимание палитры команд:

Предоставляет быстрый доступ ко всем командам VS Code
Ищет команды по мере ввода
Предлагает сочетания клавиш для ускорения разработки

Введите "Live Server: Open with Live Server":

Что делает Live Server:

Запускает локальный сервер разработки для вашего проекта
Автоматически обновляет браузер при сохранении файлов
Обслуживает ваши файлы с локального URL (обычно localhost:5500)

Откройте браузер и перейдите на https://localhost:5500:

Теперь вы должны увидеть созданную вами страницу! Давайте добавим немного функциональности.

Добавление CSS

Теперь давайте сделаем все красиво! Визуальная обратная связь была важна для пользовательских интерфейсов с самых ранних дней вычислительной техники. В 1980-х годах исследователи обнаружили, что немедленная визуальная обратная связь значительно улучшает производительность пользователей и снижает количество ошибок. Именно это мы и собираемся создать.

Наша игра должна быть предельно понятной. Игроки должны сразу понимать, какое слово они должны набрать, и если они допустят ошибку, они должны увидеть это немедленно. Давайте создадим простой, но эффективный стиль:

Создайте новый файл с именем style.css и добавьте следующий синтаксис.

/* inside style.css */
.highlight {
  background-color: yellow;
}

.error {
  background-color: lightcoral;
  border: red;
}

Понимание этих классов CSS:

Выделяет текущее слово желтым фоном для четкого визуального ориентира
Сигнализирует об ошибках набора текста светло-коралловым цветом фона
Предоставляет немедленную обратную связь, не нарушая процесс набора текста
Использует контрастные цвета для доступности и четкой визуальной коммуникации

✅ Что касается CSS, вы можете оформить вашу страницу так, как вам нравится. Потратьте немного времени, чтобы сделать страницу более привлекательной:

Выберите другой шрифт
Добавьте цвета заголовкам
Измените размеры элементов

JavaScript

Вот где начинается самое интересное! 🎉 У нас есть структура HTML и стили CSS, но сейчас наша игра похожа на красивую машину без двигателя. JavaScript станет этим двигателем — он заставит все работать и реагировать на действия игроков.

Здесь вы увидите, как ваше творение оживает. Мы будем двигаться шаг за шагом, чтобы ничего не казалось сложным:

Шаг	Назначение	Чему вы научитесь
Создание констант	Настройка цитат и ссылок на DOM	Управление переменными и выбор DOM
Обработчик события для начала игры	Обработка инициализации игры	Обработка событий и обновление интерфейса
Обработчик события для набора текста	Обработка ввода пользователя в реальном времени	Проверка ввода и динамическая обратная связь

Этот структурированный подход помогает вам:

Организовать ваш код в логичные, управляемые разделы
Постепенно добавлять функциональность для упрощения отладки
Понять, как разные части вашего приложения работают вместе
Создать шаблоны для повторного использования в будущих проектах

Но сначала создайте новый файл с именем script.js.

Добавление констант

Прежде чем мы погрузимся в действие, давайте соберем все наши ресурсы! Как и в центре управления полетами NASA, гораздо проще, когда у вас все подготовлено и готово к работе. Это избавит нас от необходимости искать что-то позже и поможет избежать опечаток.

Вот что нам нужно настроить в первую очередь:

Тип данных	Назначение	Пример
Массив цитат	Хранит все возможные цитаты для игры	`['Цитата 1', 'Цитата 2', ...]`
Массив слов	Разбивает текущую цитату на отдельные слова	`['Когда', 'ты', 'имеешь', ...]`
Индекс слова	Отслеживает, какое слово игрок вводит	`0, 1, 2, 3...`
Время начала	Рассчитывает прошедшее время для подсчета очков	`Date.now()`

Нам также понадобятся ссылки на элементы пользовательского интерфейса:

Элемент	ID	Назначение
Текстовое поле	`typed-value`	Место, где игроки вводят текст
Отображение цитаты	`quote`	Показывает цитату для ввода
Область сообщений	`message`	Отображает обновления статуса

// inside script.js
// all of our quotes
const quotes = [
    'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
    'There is nothing more deceptive than an obvious fact.',
    'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
    'I never make exceptions. An exception disproves the rule.',
    'What one man can invent another can discover.',
    'Nothing clears up a case so much as stating it to another person.',
    'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
];
// store the list of words and the index of the word the player is currently typing
let words = [];
let wordIndex = 0;
// the starting time
let startTime = Date.now();
// page elements
const quoteElement = document.getElementById('quote');
const messageElement = document.getElementById('message');
const typedValueElement = document.getElementById('typed-value');

Разберем, что делает этот код настройки:

Сохраняет массив цитат Шерлока Холмса с помощью const, так как цитаты не будут изменяться
Инициализирует переменные отслеживания с помощью let, так как их значения будут обновляться во время игры
Получает ссылки на элементы DOM с помощью document.getElementById() для эффективного доступа
Создает основу для всей функциональности игры с четкими, описательными именами переменных
Организует связанные данные и элементы логично для упрощения поддержки кода

✅ Добавьте больше цитат в вашу игру

💡 Полезный совет: Мы можем получать элементы в коде в любое время, используя document.getElementById(). Поскольку мы будем часто ссылаться на эти элементы, использование констант поможет избежать опечаток в строковых литералах. Фреймворки, такие как Vue.js или React, могут помочь лучше организовать ваш код.

Почему этот подход так хорошо работает:

Предотвращает ошибки в написании при многократном обращении к элементам
Улучшает читаемость кода благодаря описательным именам констант
Обеспечивает лучшую поддержку IDE с автозаполнением и проверкой ошибок
Упрощает рефакторинг, если идентификаторы элементов изменятся позже

Посмотрите видео о использовании const, let и var

🎥 Нажмите на изображение выше, чтобы посмотреть видео о переменных.

Добавьте логику начала игры

Вот где все начинает работать! 🚀 Вы собираетесь написать свой первый настоящий обработчик событий, и это довольно приятно — видеть, как ваш код реагирует на нажатие кнопки.

Подумайте: где-то там игрок нажмет кнопку "Начать", и ваш код должен быть готов к этому. Мы не знаем, когда это произойдет — может быть, сразу, а может быть, после того, как он возьмет кофе — но когда это случится, ваша игра оживет.

Когда пользователь нажимает start, нам нужно выбрать цитату, настроить пользовательский интерфейс и отслеживание текущего слова и времени. Ниже приведен JavaScript, который вам нужно добавить; мы обсудим его сразу после блока кода.

// at the end of script.js
document.getElementById('start').addEventListener('click', () => {
  // get a quote
  const quoteIndex = Math.floor(Math.random() * quotes.length);
  const quote = quotes[quoteIndex];
  // Put the quote into an array of words
  words = quote.split(' ');
  // reset the word index for tracking
  wordIndex = 0;

  // UI updates
  // Create an array of span elements so we can set a class
  const spanWords = words.map(function(word) { return `<span>${word} </span>`});
  // Convert into string and set as innerHTML on quote display
  quoteElement.innerHTML = spanWords.join('');
  // Highlight the first word
  quoteElement.childNodes[0].className = 'highlight';
  // Clear any prior messages
  messageElement.innerText = '';

  // Setup the textbox
  // Clear the textbox
  typedValueElement.value = '';
  // set focus
  typedValueElement.focus();
  // set the event handler

  // Start the timer
  startTime = new Date().getTime();
});

Разберем код на логические секции:

📊 Настройка отслеживания слов:

Выбирает случайную цитату с помощью Math.floor() и Math.random() для разнообразия
Преобразует цитату в массив отдельных слов с помощью split(' ')
Сбрасывает wordIndex на 0, так как игроки начинают с первого слова
Готовит состояние игры для нового раунда

🎨 Настройка и отображение пользовательского интерфейса:

Создает массив элементов <span>, оборачивая каждое слово для индивидуального стилизования
Объединяет элементы span в одну строку для эффективного обновления DOM
Выделяет первое слово, добавляя CSS-класс highlight
Очищает любые предыдущие сообщения игры, чтобы начать с чистого листа

⌨️ Подготовка текстового поля:

Очищает существующий текст в поле ввода
Устанавливает фокус на текстовое поле, чтобы игроки могли сразу начать ввод
Готовит область ввода для новой игровой сессии

⏱️ Инициализация таймера:

Фиксирует текущую временную метку с помощью new Date().getTime()
Обеспечивает точный расчет скорости ввода и времени завершения
Запускает отслеживание производительности для игровой сессии

Добавьте логику ввода текста

Вот где мы подходим к сердцу нашей игры! Не переживайте, если сначала это покажется сложным — мы разберем каждый элемент, и в конце вы увидите, насколько это логично.

То, что мы здесь строим, довольно сложно: каждый раз, когда кто-то вводит букву, наш код будет проверять, что он ввел, давать обратную связь и решать, что должно произойти дальше. Это похоже на то, как ранние текстовые процессоры, такие как WordStar в 1970-х годах, предоставляли обратную связь в реальном времени для наборщиков текста.

// at the end of script.js
typedValueElement.addEventListener('input', () => {
  // Get the current word
  const currentWord = words[wordIndex];
  // get the current value
  const typedValue = typedValueElement.value;

  if (typedValue === currentWord && wordIndex === words.length - 1) {
    // end of sentence
    // Display success
    const elapsedTime = new Date().getTime() - startTime;
    const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
    messageElement.innerText = message;
  } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
    // end of word
    // clear the typedValueElement for the new word
    typedValueElement.value = '';
    // move to the next word
    wordIndex++;
    // reset the class name for all elements in quote
    for (const wordElement of quoteElement.childNodes) {
      wordElement.className = '';
    }
    // highlight the new word
    quoteElement.childNodes[wordIndex].className = 'highlight';
  } else if (currentWord.startsWith(typedValue)) {
    // currently correct
    // highlight the next word
    typedValueElement.className = '';
  } else {
    // error state
    typedValueElement.className = 'error';
  }
});

Понимание логики ввода текста:

Эта функция использует каскадный подход, проверяя условия от самых специфичных до самых общих. Разберем каждый сценарий:

flowchart TD
    A[Player types character] --> B[Get current word and typed value]
    B --> C{Quote complete?}
    C -->|Yes| D[Show completion message with time]
    C -->|No| E{Word complete with space?}
    E -->|Yes| F[Clear input, move to next word, update highlight]
    E -->|No| G{Typing correctly so far?}
    G -->|Yes| H[Remove error styling]
    G -->|No| I[Show error styling]

🏁 Завершение цитаты (Сценарий 1):

Проверяет, совпадает ли введенное значение с текущим словом И мы на последнем слове
Рассчитывает прошедшее время, вычитая время начала из текущего времени
Преобразует миллисекунды в секунды, деля на 1 000
Отображает поздравительное сообщение с временем завершения

✅ Завершение слова (Сценарий 2):

Обнаруживает завершение слова, когда ввод заканчивается пробелом
Проверяет, что обрезанный ввод точно совпадает с текущим словом
Очищает поле ввода для следующего слова
Переходит к следующему слову, увеличивая wordIndex
Обновляет визуальное выделение, удаляя все классы и выделяя новое слово

📝 Процесс ввода текста (Сценарий 3):

Проверяет, что текущее слово начинается с того, что было введено до сих пор
Удаляет любые стили ошибок, чтобы показать, что ввод правильный
Позволяет продолжать ввод без прерывания

❌ Ошибка (Сценарий 4):

Срабатывает, когда введенный текст не совпадает с началом ожидаемого слова
Применяет CSS-класс ошибки для немедленной визуальной обратной связи
Помогает игрокам быстро обнаружить и исправить ошибки

Тестирование приложения

Посмотрите, чего вы достигли! 🎉 Вы только что создали настоящую рабочую игру для набора текста с нуля, используя событийное программирование. Можете гордиться собой — это не маленькое достижение!

Теперь наступает этап тестирования! Будет ли все работать так, как ожидалось? Не упустили ли мы что-то? Вот что важно: если что-то не работает идеально сразу, это совершенно нормально. Даже опытные разработчики регулярно находят ошибки в своем коде. Это часть процесса разработки!

Нажмите на start и начните вводить текст! Это должно выглядеть примерно как анимация, которую мы видели ранее.

Что нужно протестировать в вашем приложении:

Проверить, что нажатие на Start отображает случайную цитату
Убедиться, что ввод текста правильно выделяет текущее слово
Проверить, что стили ошибок появляются при неправильном вводе
Убедиться, что завершение слов правильно перемещает выделение
Проверить, что завершение цитаты отображает сообщение о завершении с временем

Советы по отладке:

Проверяйте консоль браузера (F12) на наличие ошибок JavaScript
Убедитесь, что все имена файлов совпадают точно (учитывая регистр)
Убедитесь, что Live Server работает и обновляется правильно
Тестируйте разные цитаты, чтобы убедиться, что случайный выбор работает

Вызов GitHub Copilot Agent 🎮

Используйте режим Agent, чтобы выполнить следующий вызов:

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

Задание: Создайте систему регулировки сложности для игры, которая:

Отслеживает скорость набора текста игрока (слов в минуту) и процент точности
Автоматически регулирует три уровня сложности: Легкий (простые цитаты), Средний (текущие цитаты), Сложный (сложные цитаты с пунктуацией)
Отображает текущий уровень сложности и статистику игрока в пользовательском интерфейсе
Реализует счетчик успешных попыток, который увеличивает сложность после 3 последовательных успешных игр
Добавляет визуальную обратную связь (цвета, анимации), чтобы указать на изменения сложности

Добавьте необходимые элементы HTML, стили CSS и функции JavaScript для реализации этой функции. Включите обработку ошибок и убедитесь, что игра остается доступной с соответствующими метками ARIA.

Узнайте больше о режиме Agent здесь.

🚀 Вызов

Готовы вывести вашу игру для набора текста на новый уровень? Попробуйте реализовать эти расширенные функции, чтобы углубить понимание обработки событий и манипуляции с DOM:

Добавьте больше функциональности:

Функция	Описание	Навыки, которые вы освоите
Контроль ввода	Отключите слушатель события `input` после завершения и включите его снова при нажатии кнопки	Управление событиями и состоянием
Управление состоянием UI	Отключите текстовое поле, когда игрок завершает цитату	Манипуляция свойствами DOM
Модальное окно	Отобразите модальное окно с сообщением об успехе	Продвинутые UI-паттерны и доступность
Система рекордов	Сохраните рекорды с помощью `localStorage`	API хранения браузера и сохранение данных

Советы по реализации:

Изучите localStorage.setItem() и localStorage.getItem() для постоянного хранения данных
Практикуйтесь в динамическом добавлении и удалении слушателей событий
Исследуйте элементы HTML dialog или CSS-паттерны модальных окон
Учитывайте доступность при отключении и включении элементов формы

Викторина после лекции

Обзор и самостоятельное изучение

Изучите все доступные события, которые доступны разработчику через веб-браузер, и подумайте о сценариях, в которых вы бы использовали каждое из них.

Задание

Создайте новую игру для клавиатуры

Отказ от ответственности:
Этот документ был переведен с использованием сервиса автоматического перевода Co-op Translator. Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода.

47 KiB Raw Blame History Unescape Escape