47 KiB

Raw Blame History Unescape Escape

Створення гри за допомогою подій

Чи замислювалися ви, як вебсайти знають, коли ви натискаєте кнопку або вводите текст у текстове поле? Це магія програмування, орієнтованого на події! Що може бути кращим способом освоїти цей важливий навик, ніж створити щось корисне — гру на швидкість набору тексту, яка реагує на кожне ваше натискання клавіші.

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

До кінця цього уроку ви створите справжню гру на швидкість набору тексту, яка відстежує вашу швидкість і точність. Але найголовніше — ви зрозумієте основні концепції, які лежать в основі кожного інтерактивного вебсайту, яким ви коли-небудь користувалися. Почнемо!

Тест перед лекцією

Програмування, орієнтоване на події

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

Ось що робить програмування для вебу таким цікавим: ми ніколи не знаємо, коли хтось натисне ту кнопку або почне вводити текст у текстове поле. Вони можуть натиснути негайно, зачекати п'ять хвилин або взагалі не натискати! Ця непередбачуваність змушує нас думати інакше про те, як ми пишемо код.

Замість того, щоб писати код, який виконується зверху вниз, як рецепт, ми пишемо код, який терпляче чекає, поки щось станеться. Це схоже на те, як телеграфні оператори в 1800-х роках сиділи біля своїх машин, готові відповісти в момент, коли через дріт прийде повідомлення.

Отже, що саме є "подією"? Просто кажучи, це щось, що відбувається! Коли ви натискаєте кнопку — це подія. Коли ви вводите літеру — це подія. Коли ви рухаєте мишкою — це ще одна подія.

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

Уявіть слухачів подій як дверний дзвінок для вашого коду. Ви налаштовуєте дверний дзвінок (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"`

Розуміння структури інтерфейсу:

Організовує контент логічно зверху вниз
Призначає унікальні ID елементам для цільового використання в JavaScript
Забезпечує чітку візуальну ієрархію для кращого досвіду користувача
Включає семантичні HTML-елементи для доступності

Кожен з них потребуватиме ID, щоб ми могли працювати з ними в нашому 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> для стилізації
Створює чіткий заголовок і інструкції для користувачів
Встановлює заповнювачі абзаців з конкретними ID для динамічного контенту
Включає текстове поле з атрибутами доступності
Надає кнопку старту для запуску гри
Завантажує 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 стане тим двигуном — саме він змусить все працювати і реагувати на дії гравців.

Тут ви побачите, як ваше творіння оживає. Ми будемо виконувати це крок за кроком, щоб нічого не здавалося надто складним:

Крок	Призначення	Чому ви навчитеся
[Створення констант](#add
Масив цитат	Зберігає всі можливі цитати для гри	`['Цитата 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 з автозаповненням і перевіркою помилок
Полегшує рефакторинг, якщо ID елементів зміняться пізніше

Перегляньте відео про використання 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 і починайте вводити текст! Це має виглядати приблизно як анімація, яку ми бачили раніше.

Що тестувати у вашому додатку:

Перевіряє, що натискання кнопки "Старт" відображає випадкову цитату
Підтверджує, що введення тексту правильно виділяє поточне слово
Перевіряє, що стилювання помилок з’являється при неправильному введенні
Гарантує, що завершення слів правильно переміщує виділення
Тестує, що завершення цитати показує повідомлення про завершення з часом

Поширені поради щодо налагодження:

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

Виклик GitHub Copilot Agent 🎮

Використовуйте режим Agent, щоб виконати наступний виклик:

Опис: Розширте гру для набору тексту, реалізувавши систему складності, яка змінює гру залежно від продуктивності гравця. Цей виклик допоможе вам практикувати обробку подій, аналіз даних і динамічні оновлення інтерфейсу.

Завдання: Створіть систему регулювання складності для гри, яка:

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

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

Дізнайтеся більше про режим Agent тут.

🚀 Виклик

Готові вивести вашу гру для набору тексту на новий рівень? Спробуйте реалізувати ці розширені функції, щоб поглибити ваше розуміння обробки подій і маніпуляції DOM:

Додайте більше функціональності:

Функція	Опис	Навички, які ви будете практикувати
Контроль введення	Вимкніть обробник подій `input` після завершення та увімкніть його, коли натиснута кнопка	Управління подіями та контроль стану
Управління станом інтерфейсу	Вимкніть текстове поле, коли гравець завершує цитату	Маніпуляція властивостями DOM
Модальне вікно	Відобразіть модальне вікно з повідомленням про успіх	Розширені шаблони інтерфейсу та доступність
Система високих балів	Зберігайте високі бали за допомогою `localStorage`	API зберігання браузера та збереження даних

Поради щодо реалізації:

Досліджуйте localStorage.setItem() і localStorage.getItem() для постійного зберігання
Практикуйте додавання та видалення обробників подій динамічно
Досліджуйте HTML-елементи діалогу або шаблони модальних вікон CSS
Розгляньте доступність при вимкненні та ввімкненні елементів форми

Післялекційний тест

🚀 Ваш таймлайн майстерності гри для набору тексту

⚡ Що ви можете зробити за наступні 5 хвилин

Протестуйте вашу гру для набору тексту з різними цитатами, щоб переконатися, що вона працює гладко
Експериментуйте зі стилями CSS — спробуйте змінити кольори виділення та помилок
Відкрийте DevTools вашого браузера (F12) і спостерігайте за Консоллю під час гри
Викличте себе завершити цитату якомога швидше

⏰ Що ви можете досягти за годину

Додайте більше цитат до масиву (можливо, з ваших улюблених книг або фільмів)
Реалізуйте систему високих балів localStorage із секції викликів
Створіть калькулятор слів за хвилину, який відображається після кожної гри
Додайте звукові ефекти для правильного введення, помилок і завершення

📅 Ваш тижневий пригодницький план

Створіть багатокористувацьку версію, де друзі можуть змагатися поруч
Створіть різні рівні складності з різною складністю цитат
Додайте індикатор прогресу, який показує, скільки цитати завершено
Реалізуйте облікові записи користувачів із відстеженням персональної статистики
Розробіть власні теми та дозвольте користувачам вибирати бажаний стиль

🗓️ Ваш місячний план трансформації

Створіть курс набору тексту з уроками, які поступово навчають правильного розташування пальців
Створіть аналітику, яка показує, які літери або слова викликають найбільше помилок
Додайте підтримку різних мов і розкладок клавіатури
Інтегруйте з освітніми API для отримання цитат із літературних баз даних
Опублікуйте вашу вдосконалену гру для набору тексту, щоб інші могли її використовувати та насолоджуватися

🎯 Остаточна перевірка рефлексії

Перш ніж рухатися далі, зробіть паузу, щоб відсвяткувати:

Який момент був найбільш задовільним під час створення цієї гри?
Як ви зараз ставитеся до програмування, керованого подіями, порівняно з тим, коли ви почали?
Яку функцію ви хочете додати, щоб зробити цю гру унікальною?
Як ви можете застосувати концепції обробки подій до інших проєктів?

journey
    title Your Event Programming Confidence Journey
    section Today
      Understanding Events: 3: You
      Building UI: 4: You
      Writing Event Listeners: 5: You
    section This Week
      Adding Features: 4: You
      Debugging Issues: 5: You
      Enhancing UX: 4: You
    section Next Month
      Building Complex Apps: 5: You
      Teaching Others: 5: You
      Creating Frameworks: 5: You

🌟 Пам’ятайте: Ви щойно освоїли одну з

Відмова від відповідальності:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу Co-op Translator. Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.

47 KiB Raw Blame History Unescape Escape