功能借鉴 SimonAKing 个人主页，偶然间看到他的网站有这个功能便用 AI 分析复刻出一个可直接使用的 JS 库，并分享出来

Github 仓库地址：https://github.com/z-hanzhe/snake-background
Github Pages 在线演示：https://z-hanzhe.github.io/snake-background/

本项目代码全部由 Claude Opus 4.8 完成，接下来的项目介绍也由它生成，以下是 AI 提供的文档：

SnakeBackground · 鼠标贪吃蛇网格背景，一个零依赖、原生 Canvas 2D 的网页背景特效库。引入后会自动在页面最底层铺一张全屏画布，把网页背景替换为一张缓慢流动的网格；鼠标滑过时会拖出一条跟随移动的“贪吃蛇”，蛇头碰到随机出现的食物方块后蛇身会增长。

特性

• 零依赖，单文件，约 15KB，直接 <script> 引入即可
• 引入即生效，无需编写任何初始化代码
• 背景层 pointer-events: none，不影响页面的点击、选中、滚动等正常交互
• 支持 UMD（浏览器全局 / CommonJS / AMD）
• 高清屏（devicePixelRatio）自适应，不模糊
• 页面切到后台自动暂停动画，省电
• 丰富的可配置项与运行时 API

快速开始

最简单的用法——引入即生效：

<script src="snake-background.js"></script>

三种使用方式

1. 自动模式（默认）

引入脚本即自动挂载，实例暴露在 window.snakeBackground 上：

<script src="snake-background.js"></script>

2. 自定义配置

在引入脚本之前声明全局配置对象：

<script>
  window.SNAKE_BACKGROUND_CONFIG = {
    squareSize: 32,
    speed: 0.08,
    foodColor: "rgba(255, 120, 120, 0.85)",
  };
</script>
<script src="snake-background.js"></script>

也可以直接在 <script> 标签上用 data-* 属性覆盖常用项：

<script
  src="snake-background.js"
  data-square-size="32"
  data-speed="0.08"
  data-direction="right"
></script>

支持的 data-* 属性：data-square-size、data-speed、data-direction、data-z-index、data-background-color。

3. 手动模式

在标签上加 data-manual，则不自动启动，由你自行控制：

<script src="snake-background.js" data-manual></script>
<script>
  const bg = new SnakeBackground({ speed: 0.08 });
  bg.mount();      // 挂载并开始动画
  // bg.destroy(); // 需要时销毁
</script>

也可以把背景挂载到某个指定容器（而非整个视口）。容器需为定位元素（如 position: relative）：

new SnakeBackground({ mountTarget: "#hero" }).mount();

配置项

运行时 API

实例方法（自动模式下通过 window.snakeBackground 调用）：

示例：

window.snakeBackground.reset();               // 重置蛇身
window.snakeBackground.stop();                // 暂停
window.snakeBackground.start();               // 继续
window.snakeBackground.setVignette({ intensity: 0.5 }); // 减淡朦胧遮罩

朦胧遮罩（越靠边越看不清的那层）

页面那层淡淡的、四周渐暗的朦胧感，是一张从中心透明到边缘变暗的径向遮罩。可在引入时配置，也可运行时通过 setVignette() 调整：

const bg = window.snakeBackground;
bg.setVignette(false);                 // 关闭朦胧
bg.setVignette({ intensity: 0.4 });    // 整体减淡
bg.setVignette({ start: 0.6 });        // 扩大中心清晰区，仅四角压暗
bg.setVignette({ color: "#001018" });  // 更换边缘色调

完整的方法签名、参数与更多示例见 API.md。

实现原理

• 无限网格：每帧让 gridOffset 按方向累加，再对 squareSize 取模，使偏移始终落在一个格子内，从而用有限的重绘营造出无限平铺、缓慢流动的错觉。
• 贪吃蛇：采用贪吃蛇经典的队列结构——鼠标每进入一个新格子，就把上一个悬停格作为“蛇头”压入队首；未吃到食物时同时弹出队尾，保持长度不变；吃到食物时跳过一次弹出，蛇身即增长一节。
• 蛇身渐变：蛇头为亮色，其后各节按 snakeColorDecay 指数衰减，在头色与尾色之间线性插值，形成由亮到暗的渐变拖尾并带辉光。
• 残影：鼠标离开的格子进入一个 Map，逐帧按 trailDuration 递减透明度，归零即删除，形成划过的余晖。

浏览器兼容

支持所有实现了 Canvas 2D 与 requestAnimationFrame 的现代浏览器（Chrome / Edge / Firefox / Safari）。