120 lines
8.1 KiB
Markdown
120 lines
8.1 KiB
Markdown
# Дело № 260826. Исчезновение подарка — v2
|
||
|
||
Интерактивный веб-квест ко дню рождения. Чистые HTML/CSS/JS, без сборки и
|
||
серверной части.
|
||
|
||
Это переработанная версия. Папка `../quest/` (v1) оставлена нетронутой
|
||
для сравнения.
|
||
|
||
## Быстрый старт
|
||
|
||
1. Откройте `data.js` и заполните блок `CONFIG` вверху файла:
|
||
|
||
```js
|
||
const CONFIG = {
|
||
name: "Алиса", // имя именинницы
|
||
caseNumber: "260826", // номер дела = дата в формате ДДММГГ
|
||
caseDateWords: "двадцать шестое августа две тысячи двадцать шестого года",
|
||
pvzAddress: "Москва, Кочновский пр-д, 4 к. 1. ПВЗ Озон",
|
||
pickupCode: "АРБУЗ", // кодовое слово для запроса штрихкода
|
||
pvzPageUrl: "", // необязательно: ссылка для QR
|
||
songSrc: "assets/song.mp3", // необязательно: аудио песни
|
||
};
|
||
```
|
||
|
||
**Важно:** `caseNumber` и `caseDateWords` должны совпадать — номер дела
|
||
выводится игроком из даты, записанной прописью. Если меняете дату,
|
||
поменяйте оба поля.
|
||
|
||
2. (Необязательно) Положите mp3 в `assets/song.mp3`. Без файла плеер сам
|
||
скроется, текст песни останется — загадка решается по тексту.
|
||
|
||
3. Откройте `index.html` или запустите статический сервер:
|
||
|
||
```bash
|
||
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`; регистр везде не важен.
|
||
|
||
## Финальный экран и выдача подарка
|
||
|
||
Штрихкод намеренно **не показывается в квесте**. Последний шаг —
|
||
написать организатору:
|
||
|
||
1. Именинница отправляет в личные сообщения кодовое слово `АРБУЗ`.
|
||
2. В ответ вы присылаете штрихкод заказа.
|
||
3. Она показывает штрихкод на ПВЗ по адресу с экрана.
|
||
|
||
Это встроено в сюжет как последняя бюрократическая процедура: «Бюро не
|
||
хранит штрихкоды в открытом виде — они выдаются ответственному лицу под
|
||
расписку». Инструкция выведена нумерованным списком под ордером.
|
||
|
||
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 — переполнения нет, стол со сцены получает
|
||
горизонтальную прокрутку, чтобы бирки оставались читаемыми.
|