8.1 KiB
Дело № 260826. Исчезновение подарка — v2
Интерактивный веб-квест ко дню рождения. Чистые HTML/CSS/JS, без сборки и серверной части.
Это переработанная версия. Папка ../quest/ (v1) оставлена нетронутой
для сравнения.
Быстрый старт
-
Откройте
data.jsи заполните блокCONFIGвверху файла:const CONFIG = { name: "Алиса", // имя именинницы caseNumber: "260826", // номер дела = дата в формате ДДММГГ caseDateWords: "двадцать шестое августа две тысячи двадцать шестого года", pvzAddress: "Москва, Кочновский пр-д, 4 к. 1. ПВЗ Озон", pickupCode: "АРБУЗ", // кодовое слово для запроса штрихкода pvzPageUrl: "", // необязательно: ссылка для QR songSrc: "assets/song.mp3", // необязательно: аудио песни };Важно:
caseNumberиcaseDateWordsдолжны совпадать — номер дела выводится игроком из даты, записанной прописью. Если меняете дату, поменяйте оба поля. -
(Необязательно) Положите mp3 в
assets/song.mp3. Без файла плеер сам скроется, текст песни останется — загадка решается по тексту. -
Откройте
index.htmlили запустите статический сервер:python -m http.server 8792
Что изменилось по сравнению с v1
Главная претензия к v1: загадки выглядели как загадки, но не требовали думать — ответ почти всегда лежал на том же экране.
| Этап | Было (v1) | Стало (v2) |
|---|---|---|
| Номер дела | Просто перепечатать число из уведомления | Вывести из даты прописью по правилу ДДММГГ |
| Место происшествия | Пиксель-хант: клик по еле заметному овалу | Сверить инвентарные бирки на столе со списком в описи |
| Допрос | Свидетель дословно повторял текст улики | Построить таймлайн по журналу турникета и найти физически невозможное показание |
| Аудио | Ответ «сюжет» был напечатан в припеве дважды | Слова ПАУЗА в песне нет: акростих надо собрать, а припев подсовывает ложное «ожидание» |
| Ложный след | Тот же ответ, что и в филологии — повтор | Два независимых признака подделки: противоречие журналу и падеж; искать в сплошном тексте |
| Финал | Журнал улик прямо показывал П-О-Д-А-Р-О-К | Заполнить форму ордера из трёх граф, каждая — из своей главы |
Ключевое изменение: журнал дела из спойлера стал рабочим блокнотом.
Он копит установленные факты (09:08, ДС-04, ПАУЗА), которые
понадобятся в финальной форме.
Ответы (шпаргалка)
| Глава | Ответ |
|---|---|
| Допуск | 260826 (из даты прописью) |
| Опись | коробка с биркой ДС-04 (единственный предмет вне описи) |
| Показания | Клавдия Ивановна Шлюз (вышла 09:02, вернулась 09:12, а «была на посту в 09:07») |
| Экспертиза | Документ № 3 («согласно приказа» вместо «приказу») |
| Запись | ПАУЗА (первые буквы пяти строк бриджа) |
| Ложный след | в 09:05 (Каверза вошёл только в 09:15) и согласно приказа |
| Ордер | 09:08 · ДС-04 · ПАУЗА |
Ввод терпим к формату: время принимает 9:08, 09.08, 0908; бирка —
дс 04, ДС-04; регистр везде не важен.
Финальный экран и выдача подарка
Штрихкод намеренно не показывается в квесте. Последний шаг — написать организатору:
- Именинница отправляет в личные сообщения кодовое слово
АРБУЗ. - В ответ вы присылаете штрихкод заказа.
- Она показывает штрихкод на ПВЗ по адресу с экрана.
Это встроено в сюжет как последняя бюрократическая процедура: «Бюро не хранит штрихкоды в открытом виде — они выдаются ответственному лицу под расписку». Инструкция выведена нумерованным списком под ордером.
QR-код кодирует адрес, кодовое слово и номер дела короткой строкой,
чтобы код оставался разреженным и уверенно ловился камерой. Если указан
pvzPageUrl, QR ведёт на эту страницу вместо текста.
Адрес и кодовое слово продублированы обычным текстом, плюс кнопка копирования — с запасным путём на случай, когда Clipboard API недоступен (например, при открытии страницы файлом).
Структура
index.html — точка входа
styles.css — оформление
data.js — CONFIG, FACTS и весь текст (правьте здесь)
app.js — логика: состояния экранов, журнал, подсказки, звук
vendor/qrcode.js — MIT-библиотека генерации QR (kazuhikoarase/qrcode-generator)
assets/ — сюда song.mp3 (опционально)
Механики помощи
- Кнопка «Журнал» — все установленные факты, нужны в финале.
- Кнопка «Подсказка» — до трёх уровней на каждую загадку, от намёка до прямого ответа.
- Подсказки открываются и сами: после 3, 5 и 8 неверных попыток.
- После 8 ошибок появляется ссылка «Следствие настаивает на правильном ответе», которая подсвечивает или подставляет ответ. Застрять нельзя.
- Прогресс сохраняется автоматически; «Начать сначала» — внизу экрана, требует двойного нажатия.
Проверено
Полное прохождение в Chrome: все главы, неверные ответы, ловушки, подсказки, журнал, финал с QR. Консоль чистая. Мобильная вёрстка проверена на ширине 361px — переполнения нет, стол со сцены получает горизонтальную прокрутку, чтобы бирки оставались читаемыми.