ДВОР / ПРОЕКТ ДЛЯ СБОРКИ

После закрытия

Библиотека закрылась, а ты остался внутри. За первой дверью — коридор, ещё несколько комнат и новые загадки. Придётся искать улики, собирать предметы и разбираться, как всё это связано.

Собираем такую игру сами. В примере сверху — пять комнат, карта, инвентарь, подсказки и сохранение. Ниже лежит всё для сборки: запрос нейросети и файлы с устройством игры.

УРОВЕНЬ 1 / СОБИРАЕМ ИГРУ

Сделать игру, как наверху

Скачай все пять Markdown-файлов ниже и прикрепи их к одному сообщению нейросети. Затем скопируй запрос. В файлах уже описаны комнаты, загадки, подсказки, оформление и правила работы — придумывать недостающую половину игры не придётся.

Markdown — обычный текстовый файл с расширением .md. Прикладывай сами файлы, а не ссылки на них. Внутри есть ответы на загадки: если хочешь сначала пройти пример без спойлеров, вернись к ним после игры.

Запрос нейросети + пять файловРаскрыть ↓

Собери браузерную игру «После закрытия» по пяти приложенным документам: пять комнат, связанные загадки, инвентарь, карта, подсказки, сохранение и финал.

К сообщению приложены пять файлов:
01-Сценарий.md
02-Логика-и-архитектура.md
03-Подсказки.md
04-Оформление.md
05-Проверки.md

Сначала прочитай все пять файлов. Если какой-то файл недоступен или требования противоречат друг другу, сообщи об этом и уточни вопрос.

Реализуй игру на HTML, CSS и JavaScript. Сценарий и правила возьми из документов 01 и 02, подсказки — из 03, оформление — из 04.

Проверь результат по файлу 05-Проверки.md через доступные инструменты. Исправь найденные ошибки. Перечисли, что действительно проверено, а что осталось проверить вручную.

Результат — один файл game.html со стилями и скриптами внутри. Оформление выполни по документу 04: SVG, нарисованные кодом, размести в HTML; готовые изображения подключай по предоставленным публичным ссылкам. Если дана ссылка на папку, определи нужные файлы и их прямые адреса для загрузки. Если доступа или ссылок не хватает, запроси их. Собери адреса изображений в одном месте, чтобы их было легко заменить. При использовании внешних изображений для игры потребуется интернет.

Файл должен открываться в браузере и работать при размещении на GitHub Pages. Подготовь код для вставки в блок Т123 в Тильде. Сохрани пропорции 16:9 и доступность всех действий при изменении размера экрана.

В сообщении к готовому файлу напиши, как его открыть, разместить на GitHub Pages или вставить в Т123.

Файлы к запросу

Сценарий

Пять комнат, улики, ответы и связь загадок.

Логика и архитектура

ТЗ, состояние игры, условия действий и сохранение.

Подсказки

Три ступени помощи для каждой загадки.

Оформление

Готовый стиль из примера. Можно заменить своим.

Что проверить

Прохождение, ошибки, перезагрузка и управление.

Что проверить в своей игре

Попроси нейросеть пройти игру через доступный ей браузер, проверить консоль и сохранение. Если у неё нет таких инструментов, проходи сам и передавай точные шаги и скриншоты ошибки.

Игрок может исследовать комнаты не в том порядке, который ты ожидал. Проверь два случая: зайти в техническую без предохранителя, выйти за ним в кабинет и вернуться; открыть архив до включения питания, выйти из темноты, включить свет в технической и снова зайти в архив. После каждого случая игру должно быть можно закончить — без сброса и потери нужных предметов.
Неверный код и неподходящий предмет не ломают игру. Повторный клик не выдаёт второй ключ или предохранитель.
После обновления страницы всё на месте: установленный предохранитель, питание, открытые двери и прогресс. Отмена новой игры ничего не сбрасывает.
Записки можно перечитать, инвентарь открывается, подсказки относятся к текущей задаче. Карта не переносит сквозь закрытые двери.
Игра работает мышью, клавиатурой и касаниями. Окна доступны целиком, точки совпадают с предметами, страница не уезжает вбок.
На опубликованной странице загружаются все картинки. Внешние ссылки работают без входа в аккаунт владельца. Если внешних ресурсов нет, проверь игру и без интернета. Человек, который не знает ответов, понимает, как начать и что можно нажать.

Результат первого уровня: один HTML-файл с игрой, которую можно пройти от начала до конца. Его можно разместить на GitHub Pages или вставить код в блок Т123 в Тильде и дать ссылку другим.

УРОВЕНЬ 2 / ПРИМЕР УСЛОЖНЕНИЯ

А если выбираться вдвоём?

У одного игрока — числа, у второго — порядок, в котором их нужно ввести. Каждый видит свою часть истории, поэтому придётся разговаривать и объяснять друг другу, что нашёл.

Пример мультиплеера: два экрана одной игры и общий прогресс в Supabase — Пример двух экранов. Это рисунок механики, а не подключённая сетевая игра.

Как это работает

Одна игра на двоих

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

Действие у одного — результат у обоих

Смотритель включает питание. Supabase проверяет действие и сохраняет его. У исследователя загорается свет в архиве.

Прогресс живёт в базе

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

Зачем здесь Supabase

Нужно узнавать двух игроков, хранить их общую сессию, проверять игровые действия и передавать изменения между браузерами. Для этого используем Auth, базу Postgres, функции RPC, Realtime и правила доступа RLS. Личные улики не отправляем напарнику.

Для старта потребуется проект Supabase: настройки входа, таблицы и правила доступа. Попроси нейросеть подготовить SQL и объяснить настройку под твой код. Первую проверку делай на одной общей загадке — например, со светом в архиве. После этого переносить остальную историю будет проще.

Пример запроса для доработки готовой игрыРаскрыть ↓

У меня уже есть рабочая одиночная игра «После закрытия». Изучи её код и приложенный файл «06-Мультиплеер-пример.md».

Хочу добавить кооператив на двоих через Supabase. Описание — пример направления: сначала объясни, что потребуется изменить в моей игре, где будут храниться общие и личные данные и как проверять действия игроков. Задай вопросы, если без ответа нельзя выбрать поведение.

Сохрани одиночную версию. Начни с одной общей загадки: один игрок включает питание, у другого загорается свет. Нужны настоящие два пользователя и одна сессия в Supabase, а не переключатель ролей в одном браузере.

Подготовь код, SQL, правила доступа и понятную инструкцию настройки Supabase. Проверь подключение, обновление страницы, обрыв сети, повторные и одновременные действия. Не выдавай неподключённый макет за работающий мультиплеер. Покажи фактические проверки и перечисли, чего не хватает для остальных.

Что спросить и проверить

Где хранятся общие данные и личные улики? Может ли один игрок получить чужую подсказку или управлять чужим предметом?
Два независимых пользователя или два устройства действительно входят в одну сессию. Третьему игроку места нет.
Действие одного меняет мир у второго. Повторный и одновременный запрос не выдают предмет дважды.
Обновление страницы сохраняет роль. Обрыв связи и возвращение не откатывают общий прогресс. Проверь, что будет после очистки данных браузера.
Пройдите историю вдвоём до общего финала. Попроси нейросеть показать результаты реальных проверок; два нарисованных экрана их не заменяют.

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

УРОВЕНЬ 3 / ПРИМЕР УСЛОЖНЕНИЯ

Собирать новые квесты в редакторе

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

Пример редактора: комнаты слева, сцена в центре, условия выбранного объекта справа — Пример редактора. Комнаты слева, сцена в центре, свойства и правила предмета справа. На телефоне картинку можно увеличить кнопкой ниже.

Как это работает

История отдельно от движка

Комнаты, предметы и правила хранятся в JSON. Движок читает сценарий, проверяет условия и меняет прогресс игрока.

Правила собираются в форме

Например: если есть предохранитель и гнездо пустое — установить его в щиток и убрать из инвентаря.

Можно проверить и передать

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

Через что реализовать

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

На примере двери: что меняем в редактореПодробнее ↓

Представь комнату как фон, на который можно поставить отдельные предметы: стол, записку, дверь. В редакторе ты выбираешь предмет и передвигаешь его в нужное место.

Например, добавляешь дверь и задаёшь ей два правила: «открывается маленьким ключом» и «ведёт в коридор». Всё это выбираешь в полях рядом со сценой.

Редактор сохраняет твои настройки. Нажимаешь «Пройти» — и проверяешь, работает ли дверь так, как задумано. Чтобы поменять ключ или комнату за дверью, возвращаешься к настройкам.

Пример запроса для доработки готовой игрыРаскрыть ↓

У меня уже есть рабочая одиночная игра «После закрытия». Изучи её код и приложенный файл «07-Редактор-пример.md».

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

Используй HTML, CSS и JavaScript: обычные элементы страницы для панелей и форм, SVG для рисуемых объектов сцены, JSON для данных сценария. Сохрани исходную игру. В редакторе нужны комнаты, объекты, условия, эффекты, отдельный предпросмотр и импорт/экспорт вместе с ресурсами. Предложи интерфейс: список комнат слева, сцена в центре, свойства выбранного объекта справа.

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

Что спросить и проверить

Какие правила сейчас зашиты в коде? Можно ли перенести их в сценарий и сохранить прохождение исходной игры?
Создай новую комнату и загадку через интерфейс. Проверь, что ради них не пришлось менять движок.
Удали ключ, нужный двери: редактор должен показать, какая связь сломалась. Проверь случай, когда ключ лежит за собственной дверью.
Запусти предпросмотр. После выхода предметы и настройки должны остаться в редактируемом сценарии, а обычное сохранение — не измениться.
Экспортируй квест с картинками и импортируй в чистый браузер. Испорченный файл должен выдать понятную ошибку и не уничтожить текущий проект.
Собери второй квест хотя бы из трёх комнат и пройди его. Потом проверь исходную историю — она тоже должна работать.

Возможный результат: редактор, в котором можно собрать и передать другому человеку новую историю.