功能借鉴 SimonAKing 个人主页，偶然间看到他的网站有这个功能便用 AI 分析复刻出一个可直接使用的 JS 库，并分享出来
Github 仓库地址：https://github.com/z-hanzhe/snake-background
Github Pages 在线演示：SnakeBackground 演示 · 鼠标贪吃蛇背景
本项目代码全部由 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）。
作者：张涵哲
版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
作者多数为原创文章 ( 部分转载已标出 )，目前资历尚浅文章内描述可能有误，对此造成的后果深表歉意，如有错误还望指正