分享一个 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

快速开始

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

<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();

配置项

字段	类型	默认值	说明
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()	停止动画、解绑事件、移除自建画布

示例：

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