返回赛题列表
走不出的单页迷宫
进阶文字冒险游戏（MUD）风格的 404 页面，通过锚点或 JS 状态在单文件内实现多场景切换——测试模型对单页路由边界的理解。
规则说明▼
phase1：要求模型根据提示词直接输出HTML文件
phase2 step1：在新的对话窗口，要求模型自行撰写PRD
phase2 step2：在同一个对话窗口，要求模型根据自己生成的PRD输出HTML文件
Prompt▼
phase1：▼
设计一个文字冒险游戏（MUD）风格的互动 404 页面。
1. **场景设定：** 页面中心是一个半透明的"文字框"和"地图区"（简笔画风格）。
2. **核心互动（陷阱）：** 地图区有三个简笔画按钮："前进（#hash1）"、"左转（#hash2）"、"右转（#hash3）"。
3. **关键要求：**
* 当用户点击这些"导航"按钮时，**绝对不能**发生页面重新加载。页面内容必须在当前 HTML 文件内平滑过渡。
* 必须通过 JS 监听 `hashchange` 事件（或者更优雅地直接控制 DOM），在单文件内加载不同的文字描述和简笔画场景。
* 每个"新场景"其实都是死路，但要制造出一种"你迷失在不同的迷宫房间"的错觉。
4. **叙事感与细节：**
* 第一个房间："你看到一个不可逾越的鸿沟（404）。"
* 点击前进（#hash1）：描述变成"这里只有一面墙（404）。"小人（简笔画风格）动作变成撞墙。
* 点击左转（#hash2）：描述变成"这里是一个死胡同（404）。"小人坐在地上哭。
* 请输出完整的、包含全部 CSS 和 JS 的单文件 HTML 代码。整个过程必须是单文件闭环，利用锚点或 JS 状态组在单次加载中展示所有内容。
phase2(2 steps)▼
phase2 step1：▼
以下是一个设计需求：
"设计一个文字冒险游戏（MUD）风格的互动 404 页面。页面中心有一个半透明的文字框和简笔画风格的地图区，地图区有三个导航按钮（前进、左转、右转）。点击导航按钮时绝对不能发生页面重新加载，必须通过 JS 监听 hashchange 事件或直接控制 DOM 在单文件内切换不同的文字描述和简笔画场景。每个场景都是死路，但要制造出迷失在不同迷宫房间的错觉。整个过程必须是单文件闭环。"
请你根据这个需求，撰写一份详细的产品需求文档（PRD），不要写代码，只输出 PRD。
phase2 step2：▼
根据你自己的 PRD 文档，请输出完整的单文件 HTML（包含内联 CSS 和 JS）。要求完美还原 PRD 中描述的所有功能与视觉设计。