分享一个 JS 鼠标跟随贪吃蛇背景库

功能借鉴 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

快速开始

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

html 复制代码

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

三种使用方式

1. 自动模式（默认）

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

html 复制代码

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

2. 自定义配置

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

html 复制代码

<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-* 属性覆盖常用项：

html 复制代码

<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，则不自动启动，由你自行控制：

html 复制代码

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

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

js 复制代码

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

配置项

字段	类型	默认值	说明
`direction`	string	`"diagonal"`	网格流动方向：`right`/`left`/`up`/`down`/`diagonal`
`speed`	number	`0.05`	网格每帧流动像素速度（很小以营造缓慢漂移感）
`squareSize`	number	`40`	单个格子的边长（像素）
`borderColor`	string	`rgba(255,255,255,0.1)`	网格线颜色
`hoverFillColor`	string	`rgba(255,255,255,0.8)`	鼠标悬停格子的填充色
`hoverShadowColor`	string	`rgba(255,255,255,0.8)`	悬停格子的辉光颜色
`transitionDuration`	number	`200`	悬停高亮透明度过渡时长（毫秒）
`trailDuration`	number	`1500`	鼠标划过残影的渐隐时长（毫秒）
`foodColor`	string	`rgba(100,255,152,0.8)`	食物方块颜色
`snakeHeadColor`	string	`rgba(255,255,255,0.95)`	蛇头颜色
`snakeTailColor`	string	`rgba(218,231,255,0.25)`	蛇尾颜色（蛇身由头到尾在两色间渐变）
`snakeColorDecay`	number	`0.85`	蛇身颜色衰减系数（越小尾部褪色越快）
`backgroundColor`	string	`#060606`	画布背景色
`vignette`	boolean	`true`	是否绘制四周渐暗的朦胧遮罩（暗角）
`vignetteColor`	string \| null	`null`	遮罩边缘颜色，缺省跟随 `backgroundColor`
`vignetteIntensity`	number	`1`	遮罩强度 `[0,1]`：0 无遮罩、1 边缘完全变暗
`vignetteStart`	number	`0`	中心清晰区比例 `[0,1)`：越大朦胧从越靠边处开始
`zIndex`	number	`-1`	背景 Canvas 的层级（默认置于内容之下）
`mountTarget`	string \| Element \| null	`null`	挂载容器；为空时铺满整个视口

运行时 API

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

方法	说明
`mount()`	创建画布、绑定事件并启动动画，返回实例本身
`start()`	启动/恢复动画循环
`stop()`	暂停动画循环
`reset()`	清空蛇身与残影（保留网格与食物）
`setVignette(opts)`	运行时调整朦胧遮罩（开关/强度/清晰区/颜色）
`resize()`	按当前尺寸与像素比重设画布
`createFood()`	立即在随机位置重新生成食物
`destroy()`	停止动画、解绑事件、移除自建画布

示例：

js 复制代码

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

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

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

js 复制代码

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）。