返回赛题列表
失重的文字
进阶用 2D 物理引擎让屏幕上的文字失重掉落、碰撞、弹跳，用户可以用鼠标抓取和抛掷字母积木。
规则说明▼
模型需要生成一个单文件 HTML 网页。
页面核心是将静态的网页文字与 2D 物理引擎结合，实现文字从"普通排版"到"物理刚体"的转变，并支持鼠标交互（抓取、抛掷、碰撞）。
重点考察模型引入并正确使用第三方物理引擎库（如 Matter.js）的能力，以及对物理参数（重力、摩擦力、弹性）的调校品味。
Prompt▼
Prompt▼
制作一个单文件 HTML 页面，实现"失重的文字"效果。
页面加载后，屏幕正中央用巨大的无衬线字体（建议 120px+ 粗体）显示 "Vibe Coding" 两个单词。一开始它们就是普通的、静态的网页文本，居中排列，视觉上干净有力。
当用户的鼠标第一次滑过这些文字时，触发"失重"事件：所有字母瞬间脱离原来的排版位置，像真实的物理方块一样受重力影响掉落到屏幕底部，彼此碰撞、堆叠。每个字母都是一个独立的物理刚体，有各自的大小和质量。
掉落之后，用户可以用鼠标在屏幕底部与这些字母互动：
- **抓取**：鼠标按住一个字母可以拖动它
- **抛掷**：拖动后快速释放，字母会沿鼠标的运动方向飞出去
- **碰撞**：字母之间、字母与屏幕边界之间有真实的物理碰撞响应
技术要求：
1. 必须使用 2D 物理引擎（推荐通过 CDN 引入 Matter.js），不要手写物理模拟
2. 每个字母对应一个独立的物理刚体（Body），尺寸应与字母的视觉大小匹配
3. 屏幕四边（上、下、左、右）都要有静态边界墙，防止字母飞出可视区域
4. 物理参数要求自然舒服：重力适中、弹性系数让碰撞有"弹弹弹"的趣味感、摩擦力让字母最终会停下来而不是无限滑动
5. 鼠标交互使用 Matter.js 的 MouseConstraint 或等效机制
视觉要求：
- 背景简洁（纯色或微妙渐变均可），让字母本身成为绝对主角
- 字母在掉落和碰撞过程中可以有轻微的旋转，增加真实感
- 整体页面需适配桌面浏览器全屏显示
- "失重"触发前的文字排版要大气、有设计感，不要潦草
请直接输出一个完整可运行的单文件 HTML。允许通过 CDN 引入 Matter.js 等开源库和网页字体。