Дело № 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 — переполнения нет, стол со сцены получает горизонтальную прокрутку, чтобы бирки оставались читаемыми.

8.1 KiB Raw Permalink Blame History Unescape Escape