從空資料夾開始：用 AI 做一款瀏覽器 Roguelike

這一切從一個空資料夾開始。

沒有美術素材、沒有引擎專案、沒有一行程式碼——只有一個想法：能不能讓 AI 從零做出一款真正可玩、而且「手感好」的動作 Roguelike？ 不是技術 demo，而是會讓人想多玩一輪的那種。

為什麼選這個題材

動作 Roguelike（像 Hades、Phantom Tower）是個很好的試金石，因為它同時考驗很多面向：

• 即時戰鬥手感：攻擊判定、連擊、受擊回饋，差一點點就「鈍」
• 程序生成：地城要每次都不一樣，又不能爛
• 系統深度：升級、技能、永久進度要互相咬合
• 效能：瀏覽器裡同屏幾十隻敵人還要順

任何一塊做不好，整體就垮。這正是拿來測 AI 開發能力的好題目。

技術選型

決策	選擇	理由
渲染	Three.js	瀏覽器 3D 的事實標準，生態成熟
物理	Rapier（WASM）	官方角色控制器處理牆壁滑動、台階
語言	TypeScript（strict）	型別安全，重構不怕
架構	Rogue Engine 風格 Component	awake/start/update/onDestroy，日後好遷移
美術	KayKit CC0 資源	免費、可商用、風格統一

一條重要的自我約束

整個專案有一條鐵則：開發者不提供任何美術素材。

所有 3D 模型、骨骼動畫、地城磚塊，都由 AI 自己去找 CC0 授權的免費資源；音效則完全用 Web Audio API 程式合成，連一個音檔都不下載。這條約束讓「全程 AI」這件事更純粹，也意外地指向一個有趣的未來——當 AI 成為素材的主要使用者，素材庫會長成什麼樣子？（這留到最後一篇談。）

開發藍圖

整個專案切成幾個里程碑，每一個結束都是一個「可以在瀏覽器玩」的版本：

• M0–M1：引擎骨架、玩家控制器與第三人稱鏡頭
• M2：戰鬥系統——連擊、hit-stop、命中判定
• M3：種子化隨機地城
• M4：升級三選一與永久進度
• M5：BOSS 戰
• M6：粒子、音效、螢幕震動等視聽回饋
• M7：效能優化與打包

接下來的每一篇日誌，會拆解其中一個里程碑——遇到的問題、為什麼這樣設計、AI 怎麼解的。

準備好了嗎？直接開始遊玩 →