返回赛题列表
混沌碎片整理程序
挑战致敬 Windows XP 磁盘碎片整理器——屏幕上数百块彩色碎片乱成一团，点击"开始整理"后算法逐步搬运归位，最终拼出一幅隐藏像素画。考察排序算法可视化、大规模动画性能和复古系统工具的氛围营造。
规则说明▼
模型需要生成一个单文件 HTML（内联 CSS + 原生 JS）。
页面核心是复刻经典操作系统的"磁盘碎片整理"过程，将打散的彩色碎片作为起点，通过算法调度，一步步将碎片搬运归位，最终拼出一幅隐藏的像素画。
重点考察大数量级 DOM/Canvas 元素高频更新的渲染性能，排序算法的可视化转化能力，以及通过控制面板和机械寻道音效营造解压氛围的设计品味。
Prompt▼
Prompt▼
做一个单文件 HTML 作品：**混沌碎片整理程序（Chaos Defragmenter）**。
想象一下 Windows XP 时代那个磁盘碎片整理程序——满屏五颜六色的小方块，看着它们一点一点被搬到正确的位置，莫名地解压。这次我们要在网页里复刻这种感觉，但整理的不是磁盘块，而是一幅打碎的像素画。
页面加载后，屏幕上铺满大量彩色小方块（200~800 块），颜色和位置完全打乱。旁边有个复古风格的信息面板，显示碎片总数、已归位数量、进度百分比。用户点击"开始整理"，算法就开始工作——你能清楚地看到碎片被一块一块搬运、交换、归位，像看一台机器在认真干活。整理完成后，所有碎片拼成一幅清晰可辨的像素画（比如一个笑脸、一只小动物、一个磁盘图标——什么都行，但必须让人一眼认出来）。
功能要点：
1. **初始混沌态**：一打开就是碎片化画面，颜色和位置全乱。信息面板实时显示碎片总数、归位数、进度、当前速度
2. **控制按钮**：至少有"开始整理""暂停/继续""重置"三个。重置要生成新的乱序，不是简单回放上一轮
3. **算法可视化**：这是核心——用户要能看到碎片正在被搬运的过程（交换、吸附、批量归并都行），UI 上最好能看到当前在执行什么策略。用什么排序/重排算法随你，但行为要让人看得懂
4. **隐藏像素画**：整理完成后拼出的图案要清晰可辨识，完成那一刻要有仪式感（扫光、庆祝动画、完成提示）
5. **音效**：用 Web Audio API 做机械硬盘寻道/读写风格的音效，节奏跟整理过程挂钩（速度变化、阶段切换、完成时刻）。要有静音按钮
6. **性能**：几百个碎片持续动画不能卡，Canvas 或 DOM 都行，DOM 要注意批量更新。不调后端，不请求外部图片，像素画由代码生成
7. **响应式**：桌面优先，移动端也能用，文字能读、按钮能点
视觉风格：
- 复古系统工具的感觉——CRT 扫描线、像素风、工业面板感，但信息层次要现代清晰
- 加点扫描线、网格线、状态指示灯、进度条之类的元素来强化主题
- 不允许纯炫技，要让用户能直观感受到"从混沌走向秩序"的过程
直接输出完整可运行的单文件 HTML，所有 CSS 和 JS 内联。