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. Генеруйте компонування детерміновано на основі seed. Розмістіть уздовж доріг 12 автомобілів і один гарантовано доступний для жбурляння жовтий автомобіль біля початкової ігрової позиції. Додайте дерева навколо ділянок із будівлями та по краях платформи, чотири кутові ліхтарі, дорожню розмітку й центральний перехід. Розмістіть монстра на вільному проспекті в точці (0, 0.2, 10.4); для головної сторінки використовуйте передній простій у точці z=20.8. Один і той самий параметр block має відтворювати те саме компонування будівель. Якщо його не задано, виводьте seed блоку з дати за 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-файл попереднього перегляду та кліпи idle, run і slash. Збережіть усіх трьох доступних для вибору персонажів; перемикання має оновлювати і попередній перегляд, і модель, яку буде використано в наступному раунді. - city_building: процедурні багаторазово використовувані групи будівель із окремим відстеженням здоров’я, меж колайдера, відскоку після удару та стану руйнування. Краї дахів, основи й навіси належать до колізійного об’єму. - city_car: процедурні багаторазово використовувані автомобілі, які можна жбурляти. Окремо зберігайте стани автомобіля в руці, у повітрі та після руйнування. Три автомобілі мають жовтий брендинг Tripo. - city_decor: процедурні дерева, ліхтарі, тротуари, вивіски та дорожня розмітка. Зробіть цей ресурс легким, повторно використовуйте геометрію та матеріали. - tripo_scenery: одна скульптура з логотипом на даху, дві вивіски на дахах, фасад майстерні та три брендовані автомобілі. Створіть їх із наданого логотипа Tripo та процедурних сіток. Це декорації сцени, а не додаткові моделі, згенеровані через API, і не бонуси в грі. Три моделі персонажів — пріоритетні ресурси Tripo. За можливості повторно використовуйте надані згенеровані GLB-файли з ригом. Для нового персонажа згенеруйте відповідну іграшкову модель, перевірте придатність до ригінгу, прив’яжіть скелет, створіть анімації idle, run і slash та перевірте пропорції, перш ніж додавати його до складу персонажів. Не викликайте API генерації, коли гравець починає раунд. Завантаження персонажів і автоматичний імпорт власних творінь гравця не входять до цієї версії. ## 5. Ігровий процес і зворотний зв’язок Підтримуйте клавіші WASD або клавіші зі стрілками для переміщення, утримання Space для повторних атак кігтями, E для захоплення найближчого автомобіля та повторне натискання E для жбурляння, R для удару об землю й Escape для паузи. На сенсорних екранах додайте віртуальний джойстик і окремі кнопки атаки, захоплення/жбурляння та удару об землю. Під час паузи або втрати фокуса скидайте утримувані команди. Використовуйте такі правила: - Раунд триває 45 секунд. Здоров’я будівлі дорівнює кількості поверхів плюс один, тобто становить 3–6 одиниць. - Удар кігтями завдає 1 одиниці шкоди; інтервал між атаками — 0.42 секунди. - Удар об землю завдає 3 одиниці шкоди кожній будівлі в зоні дії; час відновлення — 7 секунд. - Жбурляний автомобіль завдає будівлям у зоні удару 4 одиниці шкоди та приносить 75 базових балів за влучання. - За влучання по будівлі нараховується 20 балів, помножених на поточний множник. За руйнування після збільшення комбо руйнувань нараховується round(180 + building height × 50), помножене на множник. - Повторне руйнування протягом 3.5 секунди продовжує комбо. Звичайні влучання не продовжують це вікно. Множник дорівнює min(5, 1 + floor(combo / 2)). - Знищення всіх 16 будівель завершує раунд і додає ceil(seconds remaining) × 100. В іншому разі раунд завершується, коли час досягає нуля, після чого нові бали не нараховуються. У грі немає ворогів, битв із босами, здоров’я гравця чи штрафів за смерть. Виклик полягає у виборі маршруту, ефективному використанні автомобілів і ударів об землю та підтриманні комбо руйнувань. Показуйте час, що залишився, рахунок, кількість зруйнованих будівель, множник і час відновлення удару об землю. Зробіть недоступні дії зрозумілими, не блокуючи переміщення. Розрізняйте порожній замах і вдале влучання за допомогою звукового та візуального зворотного зв’язку. Розраховуйте переміщення й обертання з урахуванням вибіркової анімованої габаритної форми кожного персонажа, зокрема лап і хвоста. Перевіряйте зіткнення з повними межами будівель, залишаючи невеликий зазор. Монстр має мати змогу атакувати з допустимої позиції стояння. Дозвольте проходити через ділянку після руйнування будівлі. Не допускайте затискання гравця в кутах і проходження хвоста крізь неушкоджену будівлю під час повороту. Призупиняйте таймер і введення клавішею Escape, кнопкою паузи, під час втрати фокуса вікном і приховування вкладки. Передбачте сценарії Resume, Retry і Home. Завершуйте раунд показом рахунку, кількості руйнувань, найкращого комбо, жартівливого титулу та посилання на випробування на тій самій мапі. Додайте можливість завантажити картку з рахунком розміром 1080 × 1350 і, якщо підтримується MediaRecorder, запис раунду у форматі MP4 або WebM, який підтримується системою. Використовуйте нативний механізм поширення, якщо він доступний, а для посилань на випробування передбачте запасний варіант із буфером обміну. Ніколи не подавайте рахунок, обчислений браузером, як захищений конкурентний рейтинг. ## 6. Технічна реалізація Використовуйте Three.js, TypeScript і Vite зі статичною збіркою dist. Розділіть генерацію світу, правила, колізії, персонажів, рендеринг, аудіо, запис, аналітику та інтерфейс на окремі модулі. Зберігайте шрифти й необхідні ресурси декодерів локально. Використовуйте інстансинг для повторюваних вікон і дорожньої розмітки, а також повторно використовуйте матеріали й геометрію. Обмежте коефіцієнт піксельного співвідношення рендера значенням 1.65. Обмежуйте тимчасові ефекти та звільняйте їхні ресурси після завершення або скидання. Використовуйте GLTFLoader, мікшери скелетної анімації та надані кліпи GLB. Нормалізуйте кожну модель відносно центрального опорного півота на землі. Еталонний експорт спрямований уздовж +X; поверніть візуальний півот на -90 градусів навколо Y, щоб вирівняти його з напрямком уперед +Z у грі. Обчислюйте idle перед показом завантаженої моделі та тримайте анімовані ступні біля землі. У разі помилки завантаження використовуйте видимий процедурний запасний варіант; чесно повідомляйте про помилку. Захистіть асинхронний вибір персонажа, щоб старіше завантаження не могло замінити останній вибір. Зберігайте дані колізій персонажа окремо від сіток для рендера та повторно випікайте вибіркові габаритні форми під час зміни персонажа або анімацій. Перевіряйте і переміщення, і обертання біля стін. Зберігайте стабільне керування клавіатурою й дотиками, адаптивні діалоги, локалізований текст, поведінку фокуса, вимкнення аудіо, режим зменшення анімації та відновлення 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: завантаження моделей, введення, зовнішні посилання та завантаження файлів. Повідомляйте про обмеження браузерів або пристроїв, не заявляйте про універсальну підтримку чи стабільну частоту кадрів без підтверджених вимірювань.