Соединяем страницы вместе
Отлично, что у тебя есть силы и мотивация учиться! В этом уроке мы научимся переиспользовать код и добавим новые сюжетные повороты в нашу игру.
Сейчас у нас одна главная сцена, но самое время сделать игру более живой — добавим несколько новых страниц и настроим переходы между ними.
Материалы к уроку можно скачать тут:
Цель этого урока: добавить новые HTML-страницы и настроить переходы между ними — построить структуру квеста.
Что ты изучишь: создание нескольких HTML-страниц, работу с гиперссылками, перенос CSS в отдельный файл, повторное использование стилей.
На выходе: простая, но рабочая игровая навигация с возможностью переходов между сценами.
Линкуем страницы друг с другом
Представь: игрок стоит перед выбором. Войти в сеть? Или срочно выдернуть шнур и исчезнуть?
Создай в папке проекта две новые страницы:
login.htmldisconnect.html
Теперь добавим на главную (index.html) ссылки на эти сцены. Вот как это может выглядеть:
<a href='login.html'>Войти в систему и прочитать сообщение</a>
<a href='disconnect.html'>Срочно выключить питание и исчезнуть</a>На этом этапе страницы ещё пусты. Заполним их содержимым.
Для страницы login.html:
<html lang="ru">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="cyberpunk">
<h1>Вход в сеть</h1>
<div>
<p>
Ты зашел в сеть.
</p>
</div>
</div>
</body>
</html>Для файла disconnect.html будет такое содержимое:
<html lang="ru">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="cyberpunk">
<h1>Отключение от Сети</h1>
<div>
<p>
Соединение с сервером потеряно.
</p>
</div>
</div>
</body>
</html>Теперь, если ты сохранишь файлы и откроешь index.html в браузере, ссылки будут работать — игрок сможет выбирать путь.
Но… пока что стили применяются только на главной странице. Давай это исправим и сделаем внешний вид единым для всех сцен.
Общие стили для проекта
До этого момента мы писали CSS прямо внутри тега <style> в index.html. Это удобно для начала, но...
Представь, что у тебя в игре десятки поворотов сюжета, и каждый — на своей странице. А теперь представь, что тебе нужно поменять цвет фона… на всех этих страницах. Ручками.
Нет-нет, так не пойдёт.
Лучше решение — вынести стили в отдельный CSS-файл и подключить его ко всем страницам.
Шаг 1. Создаём файл style.css
В корне проекта создай файл с названием: style.css
Скопируй туда всё содержимое тега <style> из index.html. А сам <style> — удаляй, он уже не нужен.
Шаг 2. Подключаем стили ко всем HTML-страницам
Теперь нужно сказать каждой странице:
"Эй, вот тут лежат стили — пользуйся ими!"
В теге <head> добавь строку подключения:
`<link rel="stylesheet" href="`;style.css">Итоговый head будет выглядеть, например, так:
<head>
<!-- Тут могут быть другие теги для head -->
<link rel="stylesheet" href="style.css">
<!-- Тут могут быть другие теги для head -->
</head>Изменяем фон для разных сцен
В материалах к уроку ты найдёшь изображения для каждой из страниц нашей игры. Теперь давай сделаем так, чтобы у каждой страницы был свой уникальный фон.
Шаг 1. Добавляем id тегу <body>
Открой каждый из HTML-файлов и добавь в тег <body> уникальный id:
- Для index.html:
<body id="index">
- Для login.html:
<body id="login">
- Для disconnect.html:
<body id="disconnect">
Шаг 2. Обновляем стили
Теперь перенесём фоновые изображения в CSS, используя селекторы по этим id. Все остальные стили для body останутся без изменений.
Пример итогового CSS:
#index { background-image: url('img/cyberpunk-room.png'); /\* путь к изображению \*/ } #login { background-image: url('img/login.png'); /\* путь к изображению \*/ } #disconnect { background-image: url('img/disconnect.png'); /\* путь к изображению \*/ } body { background-size: cover; /\* растягивает фон по ширине и высоте \*/ background-position: center; /\* центрирует изображение \*/ background-repeat: no-repeat; /\* без повторений \*/ height: 100vh; /\* высота body — весь экран \*/ }
Теперь каждая сцена будет иметь свой уникальный фон, а стили останутся чистыми и удобными для управления. Отличная работа — игра становится всё атмосфернее.
Домашнее задание: назови свои сцены
Сейчас названия вкладок в браузере выглядят как index.html, login.html и т.п. Давай это исправим. В каждый HTML-файл в раздел <head>...</head> добавь тег <title>, чтобы вкладка браузера называлась красиво — по названию сцены.
Например, для index.html тайтл будет выглядеть вот так:
<title>Глитч в Сети</title>Аналогично добавь заголовки в другие страницы, чтобы они отражали суть сцены. Сделай это самостоятельно — у тебя точно получится!
Заключение
Отлично! Теперь твоя игра состоит уже из трех веток. Это можно строить и расширять дальше. В следующем уроке мы добавим крутых визуальных эффектов нашей сцене и анимации.
Книга по JavaScript для начинающих
«JavaScript с нуля: учимся программировать, создавая игры»Пошаговый формат с маленькими практическими задачами: от базового синтаксиса до первых игровых механик без перегруза теорией.
Читать книгу на ЛитРес →