몬스터 블록 — 45초 동안 도시를 박살 내세요

# 몬스터 블록 — 재구축 사양 ## 1. 프로젝트 목표 Monster Block이라는 플레이 가능한 브라우저 게임을 제작합니다. 플레이어가 장난감 몬스터를 선택해 미니어처 도시에 들어가고, 45초 안에 최대한 많은 건물을 파괴하도록 합니다. 이동, 건물 할퀴기, 자동차 던지기, 연속 철거에 즉각적인 피드백을 제공해야 합니다. 게임 종료 후 점수, 칭호, 재시도 액션, 친구가 같은 블록에서 플레이할 수 있는 도전 링크를 표시합니다. 영어 및 중국어 간체 인터페이스와 키보드 및 터치 조작을 지원합니다. ## 2. 비주얼 스타일 크림색 배경 앞의 두꺼운 정사각형 플랫폼 위에 따뜻한 탁상 디오라마를 구성합니다. 디테일이 단순한 파스텔 건물, 작은 짙은 청록색 창문, 밝은 지붕 테두리, 넓고 채도가 낮은 녹회색 도로, 횡단보도, 둥근 나무, 작은 자동차, 따뜻하고 부드러운 그림자를 사용합니다. 건물 색상은 테라코타, 머스터드, 더스티 틸, 로즈, 블루그레이, 크림, 세이지로 구성합니다. 머티리얼은 반짝이는 금속이 아니라 무광으로 칠한 장난감처럼 보여야 합니다. 평면 탑뷰가 아닌 높은 3/4 시점 카메라를 사용합니다. 기준 카메라의 시작 위치는 (35, 37, 41), 시선 방향은 (0, 0.4, 0)이며, 넓은 화면에서는 38도, 중간 화면에서는 44도, 좁은 화면에서는 51도의 시야각을 사용합니다. 플레이 중에는 몬스터를 부드럽게 따라가되 주변 목표물이 계속 보이도록 합니다. 따뜻한 반구광, 부드러운 그림자를 만드는 방향광, 차가운 필 라이트로 장면을 조명합니다. 큰 영문 제목에는 폭이 좁고 굵은 디스플레이 서체를, 안내문에는 읽기 쉬운 산세리프 서체를 사용합니다. 짙은 녹색 텍스트, 크림색 표면, 주황색 플레이 액션, 노란색 Tripo 제작 액션을 조합합니다. 홈페이지에서는 Play와 Create with Tripo를 동등하게 강조합니다. 일시정지 대화상자에서는 캐릭터 썸네일 3개가 있는 짙은 녹색 Tripo 카드를 노란색 제작 버튼과 함께 외곽선 스타일의 Resume 버튼 위에 배치합니다. 휴대폰에서도 도움말을 편하게 읽을 수 있도록 합니다. 입력에 맞춰 짧게 재생되는 효과를 사용합니다. 발톱 휘두르기, 짧은 건물 반동, 타격 및 철거별 충격 효과, 확장되는 발구르기 링, 작은 파편 폭발, 점수 팝업, 콤보 변화, 절제된 방향성 카메라 흔들림을 포함합니다. 잡은 자동차가 약 220ms에 걸쳐 손으로 들어 올려지도록 합니다. 모션 감소 설정을 존중하여 화면 흔들림, 파편 폭발, UI 확대·축소는 제거하되 점수, 목표 표시, 파괴 결과는 유지합니다. ## 3. 월드 및 장면 파괴 가능한 건물 16개를 4×4 그리드로 배치합니다. 블록 간격은 10.4로 설정하고, 블록 중심은 해당 간격에 -1.5, -0.5, 0.5, 1.5를 곱한 위치에 둡니다. 각 축을 따라 5개의 대로를 배치합니다. 플랫폼의 너비는 52.6 유닛입니다. 건물은 2~5층으로 구성하며, 평면 형태와 지붕 디테일을 다양화하고 일부에는 차양과 작은 HOTEL 또는 NOODS 간판을 추가합니다. 시드에 따라 레이아웃을 결정론적으로 생성합니다. 도로를 따라 자동차 12대를 배치하고, 최초 플레이 위치 근처에 반드시 집어 던질 수 있는 노란 자동차 1대를 둡니다. 건물 구획과 플랫폼 가장자리 주변에 나무를 배치하고, 네 모퉁이의 가로등, 차선 표시, 중앙 횡단보도를 포함합니다. 몬스터는 (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와 idle, run, slash 클립을 제공합니다. 실제로 선택 가능한 캐릭터 3명을 모두 유지하며, 캐릭터를 변경하면 미리보기와 다음 라운드에서 사용할 모델이 모두 업데이트되어야 합니다. - city_building: 절차적으로 재사용 가능한 건물 그룹입니다. 체력, 콜라이더 경계, 피격 반동, 철거 상태를 각각 추적합니다. 지붕 테두리, 기단, 차양은 충돌 범위에 포함합니다. - city_car: 절차적으로 재사용 가능한 투척용 자동차입니다. 들고 있는 상태, 공중 상태, 파괴 상태를 분리해 유지합니다. 자동차 3대에는 노란색 Tripo 브랜딩을 적용합니다. - city_decor: 절차적으로 생성하는 나무, 가로등, 보도, 간판, 도로 도색입니다. 가볍게 구성하고 지오메트리와 머티리얼을 재사용합니다. - tripo_scenery: 옥상 로고 조형물 1개, 옥상 간판 2개, 작업실 매장 1개, 브랜드 자동차 3대입니다. 제공된 Tripo 로고와 절차적 메시로 제작합니다. 이는 장면 장식이며, API로 추가 생성하는 모델이나 게임플레이 파워업이 아닙니다. 세 캐릭터 모델을 Tripo 에셋의 우선순위로 둡니다. 제공된 생성 및 리깅 GLB를 사용할 수 있으면 재사용합니다. 새 캐릭터를 추가할 때는 이에 맞는 장난감 스타일 모델을 생성하고, 리깅 적합성을 확인한 뒤 스키닝하고 idle/run/slash 애니메이션을 제작합니다. 로스터에 추가하기 전에 비율을 검증합니다. 플레이어가 라운드를 시작할 때는 생성 API를 호출하지 않습니다. 캐릭터 업로드와 플레이어가 직접 만든 창작물의 자동 임포트는 이번 버전에서 지원하지 않습니다. ## 5. 게임플레이 및 피드백 이동에는 WASD 또는 방향키, 반복 발톱 공격에는 Space 키 누르기, 근처 자동차를 잡는 데는 E, 던지는 데는 다시 E, 발구르기에는 R, 일시정지에는 Escape를 지원합니다. 터치스크린에는 가상 조이스틱과 공격, 잡기/던지기, 발구르기 버튼을 별도로 제공합니다. 일시정지하거나 포커스를 잃으면 누르고 있던 입력을 초기화합니다. 다음 규칙을 적용합니다. - 라운드는 45초 동안 진행됩니다. 건물의 체력은 층수 + 1로 설정하여 3~6이 되도록 합니다. - 발톱 공격은 피해 1을 주며, 공격 간격은 0.42초입니다. - 발구르기는 범위 내 각 건물에 피해 3을 주며, 쿨다운은 7초입니다. - 던진 자동차는 충돌 범위 내 건물에 피해 4를 주고, 투척 충돌에 대한 기본 점수 75점을 부여합니다. - 건물에 적중하면 현재 배율 × 20점을 얻습니다. 철거하면 철거 콤보를 증가시킨 뒤 배율을 적용해 round(180 + 건물 높이 × 50)점을 추가합니다. - 3.5초 안에 다시 철거하면 콤보가 이어집니다. 일반 타격은 이 시간을 연장하지 않습니다. 배율은 min(5, 1 + floor(combo / 2))입니다. - 건물 16개를 모두 철거하면 라운드가 종료되고 ceil(남은 시간) × 100점을 부여합니다. 그렇지 않으면 시간이 0이 되는 즉시 종료하며 이후에는 점수가 더해지지 않도록 합니다. 적, 보스전, 플레이어 체력, 사망 페널티는 없습니다. 도전 요소는 이동 경로를 선택하고, 자동차와 발구르기를 효율적으로 사용하며, 철거 콤보를 유지하는 데 있습니다. 남은 시간, 점수, 파괴한 건물 수, 배율, 발구르기 쿨다운을 표시합니다. 사용할 수 없는 액션도 이동을 막지 않으면서 이해하기 쉽게 안내합니다. 빗나간 공격과 성공한 타격은 사운드와 시각 피드백으로 구분합니다. 각 캐릭터의 샘플링된 애니메이션 풋프린트를 기준으로 팔과 꼬리를 포함해 이동 및 회전을 판정합니다. 약간의 여유를 두고 건물 전체 경계와 충돌을 검사합니다. 몬스터는 합법적인 서 있는 위치에서 공격할 수 있어야 합니다. 건물이 철거된 뒤에는 해당 구획을 통과할 수 있도록 합니다. 모퉁이에 플레이어가 갇히거나 회전 중 꼬리가 멀쩡한 건물을 관통하지 않도록 합니다. Escape, 일시정지 버튼, 창 포커스 해제, 숨겨진 탭에서 타이머와 입력을 일시정지합니다. Resume, Retry, Home 흐름을 제공합니다. 종료 화면에는 점수, 철거 횟수, 최고 콤보, 재미있는 칭호, 동일 맵 도전 링크를 표시합니다. 1080×1350 크기의 점수 카드를 다운로드할 수 있도록 하고, MediaRecorder가 지원되는 경우 지원되는 MP4 또는 WebM 형식으로 라운드를 녹화합니다. 가능하면 네이티브 공유를 사용하고, 도전 링크에는 클립보드 폴백을 제공합니다. 브라우저에서 계산한 점수를 보안이 보장되는 경쟁형 리더보드 점수처럼 표시하지 않습니다. ## 6. 기술 구현 정적 dist 빌드를 사용하는 Three.js, TypeScript, Vite로 제작합니다. 월드 생성, 규칙, 충돌, 캐릭터, 렌더링, 오디오, 녹화, 분석, UI를 별도 모듈로 분리합니다. 폰트와 필요한 디코더 에셋은 로컬에 번들합니다. 반복되는 창문과 도로 표시에는 인스턴싱을 사용하고 머티리얼과 지오메트리를 재사용합니다. 렌더 픽셀 비율은 1.65로 제한합니다. 임시 효과의 수를 제한하고 완료 또는 초기화 시 리소스를 해제합니다. GLTFLoader, 스켈레탈 애니메이션 믹서, 제공된 GLB 클립을 사용합니다. 각 모델을 중앙의 지면 피벗을 기준으로 정규화합니다. 기준 익스포트의 정면은 +X를 향하므로, 게임의 전방 방향인 +Z에 맞추기 위해 비주얼 피벗을 Y축 기준 -90도로 회전합니다. 로드한 모델을 표시하기 전에 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. 완료 기준 실행 가능한 소스, 로컬 에셋, 프로덕션 정적 빌드, 명확한 설치/시작/빌드 안내를 제공합니다. 세 캐릭터 선택, 전체 시간 제한 라운드, 건물 파괴, 잡기 및 던지기, 발구르기 쿨다운, 콤보 만료, 일시정지/재개, 재시도, 라운드 종료 점수를 모두 검증합니다. 원래의 공룡을 계속 선택할 수 있는지 확인하고, 세 캐릭터 모두 건물 근처에서 눈에 띄는 관통이나 끼임 없이 이동하고 회전할 수 있는지 검증합니다. 데스크톱과 좁은 모바일 화면에서 영어 및 중국어 레이아웃을 확인합니다. 읽기 쉬운 도움말, 터치 컨트롤, 일시정지 액션, 결과 공유를 포함합니다. Tripo CTA 목적지와 UTM 배치 값을 확인하고, 점수 카드 내보내기와 녹화 폴백 동작을 검증합니다. 배포된 페이지와 실제 CMS iframe 환경에서 모델 로딩, 입력, 외부 링크, 다운로드를 테스트합니다. 모든 환경을 지원한다고 주장하거나 근거 없이 안정적인 프레임 레이트를 측정했다고 말하지 말고, 브라우저 또는 기기별 제한 사항을 보고합니다.