Monster Block — 45 секунд на разрушение города

# Monster Block — спецификация восстановления ## 1. Цель проекта Создайте браузерную игру Monster Block. Игрок выбирает игрушечного монстра, попадает в миниатюрный город и за 45 секунд разрушает как можно больше зданий. Перемещение, удары когтями по зданиям, броски машин и цепочки разрушений должны сразу сопровождаться визуальной и звуковой обратной связью. В конце покажите счёт, титул, действие для повторной попытки и ссылку на испытание, по которой друг сможет сыграть на той же карте. Интерфейс должен поддерживать английский и упрощённый китайский языки, а также управление с клавиатуры и сенсорного экрана. ## 2. Визуальный стиль Создайте тёплую диораму на столе: толстая квадратная платформа на кремовом фоне. Используйте здания в пастельных тонах с минимумом деталей, небольшими тёмно-бирюзовыми окнами, светлыми парапетами крыш, широкими дорогами приглушённого зелёно-серого цвета, зебрами, округлыми деревьями, крошечными машинами и мягкими тёплыми тенями. В палитре зданий должны быть терракотовый, горчичный, пыльно-бирюзовый, розовый, серо-синий, кремовый и шалфейный цвета. Материалы должны выглядеть как матовые окрашенные игрушки, а не блестящий металл. Используйте камеру с высокой перспективой три четверти, а не плоский вид сверху. Исходная камера расположена в точке (35, 37, 41), направлена на (0, 0.4, 0) и использует угол обзора 38 градусов на широких экранах, 44 градуса на экранах средней ширины и 51 градус на узких экранах. Во время игры камера должна плавно следовать за монстром, сохраняя ближайшие цели в поле зрения. Осветите сцену тёплым полусферическим источником, мягким направленным источником с тенями и холодным заполняющим светом. Для крупных английских заголовков используйте плотный жирный дисплейный шрифт, а для инструкций — хорошо читаемый гротеск. Сочетайте тёмно-зелёный текст, кремовые поверхности, оранжевые действия запуска игры и жёлтые действия создания в Tripo. На главной странице кнопки Play и Create with Tripo должны иметь одинаковую заметность. В диалоге паузы разместите тёмно-зелёную карточку Tripo с тремя миниатюрами персонажей и жёлтой кнопкой создания над контурной кнопкой Resume. Текст справки должен оставаться комфортно читаемым на телефонах. Используйте короткие эффекты, запускаемые действиями игрока: взмахи когтями, краткую отдачу зданий, отчётливые эффекты попадания и разрушения, расходящиеся кольца от топота, небольшие всплески обломков, всплывающие значения счёта, изменения комбо и сдержанный направленный толчок камеры. Поднимайте схваченную машину в руку примерно за 220 мс. При включённом режиме уменьшения анимации отключайте тряску, всплески обломков и масштабирование интерфейса, но сохраняйте счёт, подсказки для целей и результаты разрушений. ## 3. Мир и сцена Разместите 16 разрушаемых зданий в сетке 4 × 4. Используйте расстояние между кварталами 10.4, центры кварталов на расстоянии -1.5, -0.5, 0.5 и 1.5 от этого значения и по пять проспектов вдоль каждой оси. Ширина платформы — 52.6 единицы. Здания должны иметь от двух до пяти этажей, различающиеся основания, детали крыш, отдельные навесы и небольшие вывески HOTEL или NOODS. Генерируйте планировку детерминированно на основе сида. Разместите 12 машин вдоль дорог и одну гарантированно доступную для броска жёлтую машину рядом с начальной игровой позицией. Добавьте деревья вокруг участков со зданиями и по краям платформы, четыре угловых фонаря, разметку полос и центральный переход. В начале поместите монстра на свободный проспект в точку (0, 0.2, 10.4); для главной страницы используйте переднюю позицию ожидания z=20.8. Один и тот же параметр карты должен воспроизводить одну и ту же планировку зданий. Если параметр отсутствует, выводите сид карты из даты UTC. Параметр beat задаёт целевой счёт друга. При повторной попытке сохраняйте выбранную карту. Случайные обломки не обязаны быть детерминированными. ## 4. Список ассетов Сохраняйте стабильные ID ассетов и отделяйте визуальные модели от прокси-коллайдеров игрового процесса. - munch: Munch / 阿猛, зелёный динозавр по умолчанию. Сохраните исходную округлую морду, кремовое брюхо и рога, оранжевые шипы на спине, короткие руки, большие ступни и длинный хвост. Загружайте /assets/monster-animated.glb и нормализуйте его высоту до 5.6 единицы. Сохраняйте /assets/monster.glb как статический запасной вариант. - bongo: Bongo / 橘拳, оранжевая игрушечная горилла с огромными кулаками и широким телом. Загружайте /assets/bongo-animated.glb и нормализуйте её высоту до 4.5 единицы. - bolt: Bolt / 蓝电, синий игрушечный робот с массивными конечностями и дружелюбным силуэтом. Загружайте /assets/bolt-animated.glb и нормализуйте его высоту до 4.9 единицы. - Для каждого персонажа предусмотрены соответствующий PNG предпросмотра и клипы ожидания, бега и удара. Сохраните всех трёх реально выбираемых персонажей; переключение должно обновлять и предпросмотр, и модель, используемую в следующем раунде. - city_building: процедурно создаваемые повторно используемые группы зданий с отдельно отслеживаемыми здоровьем, границами коллайдера, отдачей при попадании и состоянием разрушения. Парапеты крыш, основания и навесы входят в коллизионный объём. - city_car: процедурно создаваемые повторно используемые машины, которые можно бросать. Отдельно храните состояния машины в руке, в полёте и после разрушения. На трёх машинах разместите жёлтый брендинг Tripo. - city_decor: процедурные деревья, фонари, тротуары, вывески и дорожная разметка. Сохраняйте лёгкость ассетов, повторно используйте геометрию и материалы. - tripo_scenery: одна скульптура с логотипом на крыше, две вывески на крышах, витрина мастерской и три брендированные машины. Создайте их из предоставленного логотипа Tripo и процедурных мешей. Это декорации сцены, а не дополнительные модели, сгенерированные через API, и не усилители игрового процесса. Три модели персонажей — приоритетные ассеты Tripo. При наличии повторно используйте предоставленные сгенерированные и зариггированные GLB-файлы. Для нового персонажа создайте соответствующую модель в игрушечном стиле, проверьте пригодность рига, выполните скиннинг, создайте анимации ожидания, бега и удара и проверьте пропорции перед добавлением в список персонажей. Не вызывайте API генерации при начале раунда. Загрузка персонажей и автоматический импорт собственных работ игрока не входят в эту версию. ## 5. Игровой процесс и обратная связь Поддержите WASD или клавиши со стрелками для перемещения, удержание Space для повторных атак когтями, E для захвата ближайшей машины и повторное нажатие E для броска, R для топота и Escape для паузы. На сенсорных экранах добавьте виртуальный джойстик и отдельные кнопки атаки, захвата/броска и топота. При постановке игры на паузу или потере фокуса сбрасывайте зажатые вводы. Используйте следующие правила: - Раунд длится 45 секунд. Здоровье здания равно числу этажей плюс единица, то есть составляет 3–6 единиц. - Удар когтями наносит 1 единицу урона, интервал между атаками — 0.42 секунды. - Топот наносит каждому зданию в радиусе 3 единицы урона и имеет перезарядку 7 секунд. - Брошенная машина наносит зданиям в зоне попадания 4 единицы урона и приносит 75 базовых очков за попадание машины. - Попадание по зданию приносит 20 очков, умноженных на текущий множитель. За разрушение начисляйте round(180 + высота здания × 50) очков, умноженных на текущий множитель, после увеличения комбо разрушений. - Если снова разрушить здание в течение 3.5 секунды, комбо продолжается. Обычные попадания не продлевают это окно. Множитель равен min(5, 1 + floor(combo / 2)). - Уничтожение всех 16 зданий завершает раунд и приносит ceil(оставшиеся секунды) × 100 очков. В противном случае раунд заканчивается, когда время достигает нуля; после этого новые очки не начисляются. В игре нет врагов, битв с боссами, здоровья игрока и штрафов за смерть. Испытание заключается в выборе маршрута, эффективном использовании машин и топота, а также поддержании комбо разрушений. Показывайте оставшееся время, счёт, число разрушенных зданий, множитель и перезарядку топота. Недоступные действия должны быть понятны и не должны блокировать перемещение. Различайте холостой взмах и успешное попадание с помощью звуковой и визуальной обратной связи. Рассчитывайте перемещение и повороты с учётом выборочного анимированного габарита каждого персонажа, включая руки и хвост. Проверяйте столкновения с полными границами зданий, оставляя небольшой зазор. Монстр должен иметь возможность атаковать из допустимой позиции для стояния. После разрушения здания разрешайте проходить через его участок. Не допускайте застревания игрока в углах и прохождения хвоста через целое здание при повороте. Ставьте на паузу таймер и ввод при нажатии Escape, кнопки паузы, потере фокуса окном и скрытии вкладки. Добавьте сценарии Resume, Retry и Home. В конце показывайте счёт, количество разрушений, лучшее комбо, шуточный титул и ссылку на испытание на той же карте. Предоставьте для скачивания карточку со счётом размером 1080 × 1350 и, если поддерживается MediaRecorder, запись раунда в поддерживаемом формате MP4 или WebM. Используйте нативный шаринг, если он доступен, а для ссылок на испытание предусмотрите запасной вариант с буфером обмена. Никогда не выдавайте вычисленный браузером счёт за защищённый соревновательный рейтинг. ## 6. Техническая реализация Используйте Three.js, TypeScript и Vite со статической сборкой dist. Разделите генерацию мира, правила, коллизии, персонажей, рендеринг, звук, запись, аналитику и UI на отдельные модули. Храните шрифты и необходимые ассеты декодеров локально. Используйте инстансинг для повторяющихся окон и дорожной разметки, повторно применяйте материалы и геометрию. Ограничьте pixel ratio рендера значением 1.65. Ограничивайте временные эффекты и освобождайте их ресурсы после завершения или сброса. Используйте GLTFLoader, микшеры скелетной анимации и предоставленные GLB-клипы. Нормализуйте каждую модель относительно центрированного опорного пивота на земле. Исходные экспортированные модели направлены по оси +X; поверните визуальный пивот на -90 градусов вокруг Y, чтобы выровнять его с направлением +Z игры. Сначала проигрывайте анимацию ожидания и только потом показывайте загруженную модель; ступни в анимации должны оставаться близко к земле. Если загрузка не удалась, отображайте видимый процедурный запасной вариант и честно сообщайте об ошибке. Защитите асинхронный выбор персонажа, чтобы более старая загрузка не заменила последнюю выбранную модель. Храните данные коллизий персонажа отдельно от мешей рендера и заново запекайте выборочные габариты при смене персонажа или анимаций. Проверяйте перемещение и поворот рядом со стенами. Сохраните стабильную работу клавиатурного и сенсорного ввода, адаптивные диалоги, локализованный текст, поведение фокуса, отключение звука, режим уменьшения анимации и восстановление WebGL. Свяжите действия создания в Tripo с https://www.tripo3d.ai/, добавив utm_source=monster_block, utm_medium=referral, utm_campaign=monster_block_game и зависящий от размещения параметр utm_content: header_logo, hero_create, pause_create, result_create или footer_logo. Открывайте эти действия в отдельной вкладке и сначала ставьте активную игру на паузу. Объясните, что Tripo создаёт 3D-ассеты; не обещайте их автоматический импорт в эту игру. Сохраните существующую интеграцию событий Pageview и PostHog, если это допускается политикой хостинга. В статической сборке используйте только общедоступную конфигурацию для приёма данных из браузера. Учётные данные для генерации, CMS, развёртывания и персональной аналитики храните вне исходного кода и артефактов сборки. Записывайте вход на страницу, выбор персонажа, запуск игры, первые действия, результаты раунда, повторную попытку, отправку/экспорт и исходящие клики по Tripo, но не считайте клики подтверждёнными регистрациями или платежами. ## 7. Критерии готовности Предоставьте запускаемый исходный код, локальные ассеты, статическую production-сборку и понятные инструкции по установке, запуску и сборке. Проверьте выбор всех трёх персонажей, полноценный раунд с таймером, разрушение зданий, захват и бросок машин, перезарядку топота, завершение комбо, паузу/возобновление, повторную попытку и подсчёт в конце раунда. Убедитесь, что исходный динозавр по-прежнему доступен для выбора, а все три персонажа могут перемещаться и поворачиваться рядом со зданиями без заметного проникновения в геометрию и застревания. Проверьте английскую и китайскую версии интерфейса на десктопе и узких мобильных экранах, включая читаемый текст справки, сенсорное управление, действия паузы и отправку результатов. Проверьте адреса CTA Tripo и значения UTM для разных размещений, экспорт карточки со счётом и запасной сценарий записи. Протестируйте развёрнутую страницу и фактическое окружение iframe CMS: загрузку моделей, ввод, внешние ссылки и скачивание. Сообщайте об ограничениях браузеров и устройств, не заявляя о повсеместной поддержке или стабильной частоте кадров без подтверждённых измерений.