功能借鉴 SimonAKing 个人主页偶然间看到他的网站有这个功能便用 AI 分析复刻出一个可直接使用的 JS 库并分享出来Github 仓库地址https://github.com/z-hanzhe/snake-backgroundhttps://github.com/grayesters/xyakur/blob/main/%E7%BD%91%E5%9D%80889.ga%E6%AC%A7%E5%8D%9A%E7%BD%91%E5%9D%80APPB.mdGithub Pages 在线演示SnakeBackground 演示 · 鼠标贪吃蛇背景本项目代码全部由 Claude Opus 4.8 完成接下来的项目介绍也由它生成以下是 AI 提供的文档SnakeBackground · 鼠标贪吃蛇网格背景一个零依赖、原生 Canvas 2D的网页背景特效库。引入后会自动在页面最底层铺一张全屏画布把网页背景替换为一张缓慢流动的网格鼠标滑过时会拖出一条跟随移动的“贪吃蛇”蛇头碰到随机出现的食物方块后蛇身会增长。特性#零依赖单文件约 15KB直接script引入即可引入即生效无需编写任何初始化代码背景层pointer-events: none不影响页面的点击、选中、滚动等正常交互支持 UMD浏览器全局 / CommonJS / AMD高清屏devicePixelRatio自适应不模糊页面切到后台自动暂停动画省电丰富的可配置项与运行时 API快速开始#最简单的用法——引入即生效script srcsnake-background.js/script三种使用方式#1. 自动模式默认#引入脚本即自动挂载实例暴露在window.snakeBackground上script srcsnake-background.js/script2. 自定义配置#在引入脚本之前声明全局配置对象script window.SNAKE_BACKGROUND_CONFIG { squareSize: 32, speed: 0.08, foodColor: rgba(255, 120, 120, 0.85), }; /script script srcsnake-background.js/script也可以直接在script标签上用data-*属性覆盖常用项script srcsnake-background.js >3. 手动模式#在标签上加data-manual则不自动启动由你自行控制script srcsnake-background.js>配置项#字段类型默认值说明directionstringdiagonal网格流动方向right/left/up/down/diagonalspeednumber0.05网格每帧流动像素速度很小以营造缓慢漂移感squareSizenumber40单个格子的边长像素borderColorstringrgba(255,255,255,0.1)网格线颜色hoverFillColorstringrgba(255,255,255,0.8)鼠标悬停格子的填充色hoverShadowColorstringrgba(255,255,255,0.8)悬停格子的辉光颜色transitionDurationnumber200悬停高亮透明度过渡时长毫秒trailDurationnumber1500鼠标划过残影的渐隐时长毫秒foodColorstringrgba(100,255,152,0.8)食物方块颜色snakeHeadColorstringrgba(255,255,255,0.95)蛇头颜色snakeTailColorstringrgba(218,231,255,0.25)蛇尾颜色蛇身由头到尾在两色间渐变snakeColorDecaynumber0.85蛇身颜色衰减系数越小尾部褪色越快backgroundColorstring#060606画布背景色vignettebooleantrue是否绘制四周渐暗的朦胧遮罩暗角vignetteColorstring | nullnull遮罩边缘颜色缺省跟随backgroundColorvignetteIntensitynumber1遮罩强度[0,1]0 无遮罩、1 边缘完全变暗vignetteStartnumber0中心清晰区比例[0,1)越大朦胧从越靠边处开始zIndexnumber-1背景 Canvas 的层级默认置于内容之下mountTargetstring | Element | nullnull挂载容器为空时铺满整个视口运行时 API#实例方法自动模式下通过window.snakeBackground调用https://github.com/katarriski/poknml/blob/main/%E5%BE%AE%E4%BF%A15487663%E6%AC%A7%E5%8D%9A%E5%AE%98%E7%BD%91appr.md方法说明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。作者张涵哲出处https://github.com/prabutuni/nmlajs/blob/main/%E7%BD%91%E5%9D%80889.ga%E6%AC%A7%E5%8D%9A%E6%B8%B8%E6%88%8FAPPb.md版权本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。作者多数为原创文章 ( 部分转载已标出 )目前资历尚浅文章内描述可能有误对此造成的后果深表歉意如有错误还望指正