Ветвление истории: сцены, файлы и собственная концовка

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

Открыть результат в отдельной вкладке

Какие файлы понадобятся

Нужна история с общим CSS. Папка start совпадает с финалом предыдущего урока. Собственные исходы не удаляй: для новой ветки достаточно добавить файлы и поменять один адрес в начале.

Сначала нарисуй схему переходов

index.html
├─ scenes/terminal.html
│  ├─ login.html          → index.html
│  ├─ endings/roof.html   → index.html
│  └─ index.html
└─ disconnect.html       → index.html

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

Создай промежуточную сцену

В папке проекта создай папки scenes и endings. В scenes создай terminal.html. Для сцены на крыше понадобится endings/roof.html: его код приведён в следующем разделе. Создай оба файла, прежде чем проверять переходы.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>У терминала — Глитч в Сети</title>
  <link rel="stylesheet" href="../style.css">
</head>
<body>
  <main class="story">
    <h1>У терминала</h1>
    <p>Сообщение ещё на экране. Можно передать напарнице настоящие координаты или отправить ложный след и выйти через крышу.</p>
    <nav class="choices" aria-label="Варианты действий">
    <p><a href="../login.html">Сообщить свои координаты</a></p>
    <p><a href="../endings/roof.html">Отправить ложный след</a></p>
    <p><a href="../index.html">Передумать и вернуться</a></p>
    </nav>
  </main>
</body>
</html>

../ означает «на один уровень вверх». Из scenes/terminal.html файл ../login.html лежит в корне проекта. Путь ../endings/roof.html сначала поднимается в корень, затем входит в папку endings. Общий стиль тоже лежит выше: ../style.css.

nav обозначает область переходов, aria-label даёт ей понятное имя для вспомогательных технологий, а класс choices пригодится для оформления. Для перехода в другой документ нужна ссылка a. Кнопка button сама по себе другой файл не открывает; действия внутри страницы мы запрограммируем позже на JavaScript.

Напиши новую концовку

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Путь по крышам — Глитч в Сети</title>
  <link rel="stylesheet" href="../style.css">
</head>
<body>
  <main class="story">
    <h1>Путь по крышам</h1>
    <p>
      Пока наблюдатели проверяли пустую комнату, ты добрался до крыши. Напарница не
      получила твоих координат: дальше придётся искать её самому.
    </p>
    <p><a href="../index.html">Вернуться к началу</a></p>
  </main>
</body>
</html>

Открой scenes/terminal.html отдельно и пройди оба исхода. Каждый должен возвращать в начало. Стиль должен загрузиться и на крыше. Это версия step-01: новая ветка работает, но ещё не подключена из главной страницы.

Включи новую сцену в историю

В index.html оберни варианты действий контейнером nav, как в примере ниже. Первый прежний переход замени ссылкой на терминал, второй сохрани. Если после первого урока у тебя есть свой третий путь, оставь его абзац со ссылкой внутри этого же nav: новый контейнер объединяет все варианты, а не удаляет твою работу. Для двух исходных вариантов получится:

<nav class="choices" aria-label="Варианты действий">
  <p><a href="scenes/terminal.html">Подойти к терминалу</a></p>
  <p><a href="disconnect.html">Выключить питание и уйти</a></p>
</nav>

Из корня проекта путь к терминалу начинается с scenes/. Не добавляй начальный /: он изменяет смысл адреса. Не вставляй путь со своего диска — у другого человека нет твоей папки. Относительные адреса работают, пока внутри проекта сохраняется та же структура.

Сохрани и открой начало. Первая ссылка теперь ведёт к ещё одному выбору, а не сразу к прежнему окончанию. Обрати внимание: сцена login.html осталась прежней — теперь к ней ведёт ссылка из терминала. Сверь текст этого окончания с действием «Сообщить свои координаты». Если в первом уроке ты изменил login.html на историю про ложный след или уход в одиночку, согласуй подпись ссылки и последствия либо создай отдельный подходящий исход. Игрок должен получать тот результат, который обещает выбранное действие.

Проверь заголовки и разметку

У каждого документа свой title во вкладке и один главный h1. Основное содержимое находится в main, переходы — в nav. Внутри большой сцены можно добавлять подзаголовки h2, но не выбирай уровень ради размера шрифта: размер меняется CSS. Подробнее — в необязательном справочнике по семантике.

Самостоятельно: добавь ещё одну концовку

Добавь у терминала действие «Подождать ответ». Придумай, чем ожидание меняет результат. Создай файл окончания в endings, добавь ссылку из терминала и возврат. Сначала обнови схему на бумаге, затем файлы. У новой страницы должен загрузиться общий стиль.

Проверь все переходы

Пройди схему из index.html, записывая открывшийся файл после каждого действия. Для каждого исхода проверь возврат. Затем временно испорти один ../, найди ошибку по адресу открываемого документа и верни правильный путь. Ты можешь собрать новую ветку, не копируя чужой сюжет.