「2D Site Snacker」吃掉你的网页，需要多长时间？

从这里查看本示例运行效果：2d-site-snacker。

这是一个名为「2D Site Snacker」的网页项目，核心功能是：

1. 交互式 HTML 输入界面
   • 提供一个文本框让用户输入 HTML 代码
   • 支持从其他网站复制源码（通过 Ctrl+U 获取）
   • 提供示例链接指向 GitHub 上的单页 HTML 项目
2. 动态生物模拟系统
   • 创建20个彩色圆形生物（带方向指示器）
   • 生物具有自主移动能力（带加速度和最大速度限制）
   • 实现食物检测算法（60度视野范围，10000像素视距）
   • 碰撞检测机制（精确到像素级别）
3. 网页内容"吞噬"效果
   • 自动识别网页中的所有叶子节点元素（无子元素的标签）
   • 将这些元素标记为"食物"
   • 生物会主动寻找并移动至食物位置
   • 碰撞后元素会被移除（模拟被吞噬）
4. 可视化系统
   • 使用 Canvas 实现覆盖全屏的透明画布
   • 实时绘制生物移动轨迹
   • 用粉色边框高亮显示可吞噬的元素
   • 倒计时效果（3-2-1 后开始吞噬）
5. 状态管理
   • 通过 URL 参数保存/加载用户输入的 HTML
   • 支持浏览器前进/后退按钮导航
   • 自动清理被吞噬的 DOM 元素
6. 技术特点
   • 纯前端实现（HTML+CSS+JavaScript）
   • 使用 ES6 类结构组织代码
   • 实现游戏循环（requestAnimationFrame）
   • 响应式设计（适配不同屏幕尺寸）

这个项目本质上是一个创意性的网页交互演示，将代码输入转化为可视化的"生物吞噬"动态效果，展示了如何操作 DOM 和 Canvas 创造有趣的交互体验。