Содержание курса Frontend · все модули
Мини-проект: Генератор историй (веб) — Frontend
Курсы Frontend Мини-проект: Генератор историй (веб) Мини-проект: Генератор историй (веб) Введение Генератор историй — программа, которая задаёт вопросы пользователю и создаёт уникальную историю на основе ответов. В этом проекте сделаем веб-версию: форма на странице и вывод сгенерированной истории — аналог проекта из курса Python .
Проект объединяет: обработку форм , события , DOM и условия в JavaScript.
Задачи
Создать форму с полями для имени, возраста и выбора сюжета.
По кнопке «Сгенерировать» собирать данные формы и строить историю.
Использовать условия для разных сюжетных веток в зависимости от ответов.
Выводить готовую историю в блок на странице.
Цель проекта Создать веб-страницу, которая:
Содержит форму: имя, возраст, выбор места действия (город/лес/космос), выбор действия.
По нажатию «Сгенерировать» формирует персонализированную историю.
Выводит историю в блок на странице.
Использует условия для разных сюжетных веток в зависимости от ответов.
Что понадобится
Форма <form> с полями input, select, radio.
addEventListener("submit", ...) с event.preventDefault().document.getElementById() или querySelector для чтения значений.Условия if / else для ветвления сюжета.
innerHTML или textContent для вывода истории.
Создай index.html с формой:
<! DOCTYPE html > < html lang = "ru" > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < title > Генератор историй </ title > </ head > < body > < h1 > Генератор историй </ h1 Этап 2. Структура данных и условия В script.js создадим функцию, которая по выбору пользователя определяет текст:
function generateStory ( name , age , settingChoice , actionChoice ) { let setting , weather ; if ( settingChoice === "1" ) { setting = "шумном мегаполисе" ; weather = "под неоновыми вывесками" ; } else if ( settingChoice === "2" ) { setting = "густом тёмном лесу" ; weather Этап 3. Обработка submit Подключи форму к генератору. Важно вызвать preventDefault(), чтобы страница не перезагружалась:
document . getElementById ( "storyForm" ) . addEventListener ( "submit" , ( e ) => { e . preventDefault ();
const name = document . getElementById ( "name" ) . value . trim (); const age = document . getElementById ( "age" ) . value || "25" ; Этап 4. Вывод истории и развилки Для красивого вывода можно использовать innerHTML и теги <p>:
document . getElementById ( "result" ) . innerHTML = `<p> ${ story } </p>` ; Чтобы добавить больше развилок (как в Python: «Открыть сундук?»), добавь ещё radio или select в форму и обрабатывай их в generateStory вложенными if.
Критерии оценивания Подведём итоги Мы создали веб-генератор историй — форму с вводом и персонализированным выводом. Ты научился:
Собирать данные из полей формы.
Использовать условия для ветвления сюжета.
Предотвращать перезагрузку страницы через preventDefault().
Выводить результат в DOM.
На следующем уроке — текстовый квест в веб-версии.
Типичные ошибки
Забывать preventDefault() при submit — форма отправится, и страница перезагрузится.
Читать значения полей до отправки без привязки к событию submit — в шаблон попадут пустые значения.
Пропускать проверку пустых полей — история получится с undefined или пустыми местами.
Смешивать логику ветвления — условия перекрывают друг друга, сюжет не соответствует выбору.
Домашнее задание Упражнение №1. Развилки и концовки Добавь 2–3 развилки с разными концовками. Минимум 5 разных концовок в зависимости от выборов пользователя.
Упражнение №2. Счётчик смелости Добавь переменную bravery (смелость), которая:
увеличивается, когда герой делает смелые выборы (открывает сундук, говорит со странником);
уменьшается, когда герой избегает действий (проходит мимо, молчит).
В финале выведи уровень смелости героя.
Упражнение №3. Влияние возраста Сделай так, чтобы возраст героя влиял на сюжет:
если герою меньше 12 лет — он находит волшебную игрушку;
если от 12 до 18 — находит загадочную книгу;
если больше 18 — находит древний артефакт.
Упражнение №4 Кнопка «Скачать историю» Кнопка «Скачать историю» — сохранение в txt через создание ссылки с blob (Blob, URL.createObjectURL).
Упражнение №5. Новая развилка БОНУС Добавь ещё одну точку выбора в историю. Например, после встречи с предметом или персонажем герой может:
использовать предмет;
обменять на что-то;
выбросить.
Каждый выбор ведёт к разной концовке или продолжению.
>
< form id = "storyForm" >
< label for = "name" > Имя героя: </ label >
< input type = "text" id = "name" required placeholder = "Введите имя" >
< label for = "age" > Возраст героя: </ label >
< input type = "number" id = "age" min = "1" max = "120" value = "25" >
< label > Где происходит история? </ label >
< select id = "setting" >
< option value = "1" > В городе </ option >
< option value = "2" > В лесу </ option >
< option value = "3" > В космосе </ option >
</ select >
< label > Что делает герой? </ label >
< div >
< input type = "radio" name = "action" id = "left" value = "left" checked >
< label for = "left" > Идёт налево </ label >
</ div >
< div >
< input type = "radio" name = "action" id = "right" value = "right" >
< label for = "right" > Идёт направо </ label >
</ div >
< div >
< input type = "radio" name = "action" id = "wait" value = "wait" >
< label for = "wait" > Остаётся на месте </ label >
</ div >
< button type = "submit" > Сгенерировать историю </ button >
</ form >
< h2 > История </ h2 >
< div id = "result" ></ div >
< script src = "script.js" ></ script >
</ body >
</ html >
=
"под сенью древних деревьев"
;
} else {
setting = "бескрайнем космосе" ;
weather = "среди мерцающих звёзд" ;
}
let story = `История начинается в ${ setting } . ${ name } , ${ age } лет, стоит на развилке. ` ;
if ( actionChoice === "left" ) {
story += ` ${ weather } ${ name } находит старый сундук. В сундуке — древняя карта! ${ name } теперь знает путь к сокровищам. Конец — счастливый.` ;
} else if ( actionChoice === "right" ) {
story += ` ${ weather } ${ name } встречает странника. Странник рассказывает ${ name } важную тайну! Конец — мудрый.` ;
} else {
story += ` ${ weather } время идёт... Неожиданно появляется волшебное существо и дарит ${ name } подарок! Конец — волшебный.` ;
}
return story ;
}
const
settingChoice
=
document
.
getElementById
(
"setting"
)
.
value
;
const actionChoice = document . querySelector ( 'input[name="action"]:checked' ) . value ;
const story = generateStory ( name , age , settingChoice , actionChoice );
document . getElementById ( "result" ) . textContent = story ;
});