怪獸街區——45 秒摧毀城市

# 怪獸街區——重建規格 ## 1. 專案目標 打造一款名為 Monster Block、可在瀏覽器遊玩的遊戲。讓玩家選擇玩具怪獸，進入迷你城市，並在 45 秒內盡可能摧毀建築。移動、用爪子攻擊建築、投擲汽車，以及連鎖拆除都必須產生即時回饋。結束時顯示分數、稱號、重試操作，以及讓朋友遊玩同一街區的挑戰連結。提供英文與簡體中文介面，以及鍵盤和觸控操作。 ## 2. 視覺風格 在奶油色背景前的厚實方形平台上，打造溫暖的桌上型立體模型場景。使用低細節的粉彩建築、深青色小窗戶、淡色屋頂邊框、寬闊的低彩度綠灰色道路、斑馬線、圓潤樹木、迷你汽車與溫暖柔和的陰影。建築配色包含陶土色、芥末黃、灰藍綠、玫瑰色、藍灰色、奶油色與鼠尾草綠。材質應呈現霧面彩繪玩具質感，而非閃亮金屬。 使用高角度三分之四視角攝影機，不要使用平面的俯視攝影機。參考攝影機從 (35, 37, 41) 開始，朝向 (0, 0.4, 0)，寬螢幕使用 38 度視野，中等螢幕使用 44 度視野，窄螢幕使用 51 度視野。遊玩期間平順地跟隨怪獸，同時讓附近的目標保持在視野內。使用溫暖的半球光、會投射柔和陰影的方向光，以及冷色補光照亮場景。 大型英文標題使用粗體壓縮展示字體，說明文字使用易讀的無襯線字體。搭配深綠色文字、奶油色表面、橘色遊玩操作，以及黃色 Tripo 創作操作。在首頁上，讓「遊玩」和「使用 Tripo 創作」具有同等醒目程度。在暫停對話框中，將深綠色的 Tripo 卡片放在外框式「繼續」按鈕上方；卡片包含三張角色縮圖與黃色創作按鈕。確保說明文字在手機上也能舒適閱讀。 使用由操作觸發的短暫效果：爪擊揮動、建築短暫回彈、明確的命中與拆除衝擊效果、擴散的踩踏圓環、小型碎片爆散、分數跳出提示、連擊變化，以及克制的定向攝影機震動。將抓住的汽車在約 220 毫秒內抬至手中。遵循減少動態效果偏好設定，移除震動、碎片爆散與 UI 縮放，但保留分數、目標提示與破壞結果。 ## 3. 世界與場景 將 16 棟可破壞建築排列成 4×4 網格。街區間距設為 10.4，街區中心位於該間距乘以 -1.5、-0.5、0.5 與 1.5 的位置，兩個軸向各有五條大道。平台寬度為 52.6 個單位。建築高度為 2 至 5 層，具有不同的平面輪廓、屋頂細節、偶爾出現的遮棚，以及小型 HOTEL 或 NOODS 招牌。根據種子以確定性方式生成配置。 沿道路放置 12 輛汽車，並在初始遊玩位置附近保證放置一輛可投擲的黃色汽車。在建築用地與平台邊緣周圍加入樹木、四盞轉角路燈、車道標線與中央行人穿越道。讓怪獸從 (0, 0.2, 10.4) 的暢通大道開始；首頁使用 z=20.8 的前景待機位置。 相同的街區參數必須重現相同的建築配置。若未提供街區種子，則從 UTC 日期推導。節拍參數提供朋友的目標分數。重試時保留所選街區。隨機碎片不必具備確定性。 ## 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、暫停按鈕、視窗失去焦點或分頁隱藏時，暫停計時器與輸入。提供繼續、重試與首頁流程。結束時顯示分數、拆除數、最佳連擊、趣味稱號，以及相同地圖的挑戰連結。提供可下載的 1080×1350 分數卡；在支援 MediaRecorder 的情況下，提供以支援的 MP4 或 WebM 格式錄製該回合的功能。支援時使用原生分享，挑戰連結則以剪貼簿作為備援。絕不要將瀏覽器計算出的分數呈現為安全可靠的競技排行榜。 ## 6. 技術實作 使用 Three.js、TypeScript 與 Vite，並採用靜態 dist 建置。將世界生成、規則、碰撞、角色、渲染、音訊、錄製、分析與 UI 分隔為獨立模組。在本機打包字型與必要的解碼器資產。針對重複的窗戶與道路標線使用實例化，並重複使用材質與幾何體。將渲染像素比上限設為 1.65。限制暫時性效果的數量，並在效果完成或重設時釋放其資源。 使用 GLTFLoader、骨架動畫混合器與提供的 GLB 動畫片段。將每個模型以置中的地面樞紐點為基準標準化。參考匯出模型朝向 +X；將視覺樞紐繞 Y 軸旋轉 -90 度，使其對齊遊戲的 +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. 完成標準 交付可執行的原始碼、本機資產、生產環境靜態建置，以及清楚的安裝／啟動／建置說明。驗證全部三個角色的選擇、完整計時回合、建築摧毀、抓取與投擲、踩踏冷卻、連擊到期、暫停／繼續、重試與回合結束計分。確認原始恐龍仍可選擇，且三名角色都能在建築附近移動與轉身，不會出現明顯穿模或卡住。 在桌面與窄版手機寬度下檢查英文與中文版面，包括易讀的說明文案、觸控操作、暫停操作與結果分享。驗證 Tripo CTA 目的地、UTM 版位值、分數卡匯出與錄製備援行為。在實際部署的頁面與 CMS iframe 環境中，測試模型載入、輸入、外部連結與下載功能。應報告瀏覽器或裝置限制，不要在沒有證據的情況下宣稱全面支援或具備經測量的穩定幀率。