贪吃蛇加载动画（Snake Loader 网格游走）

效果演示（真实可交互）

深色面板上，一条四节长的贪吃蛇沿网格四周顺时针巡逻，蛇头白色发光、身体依次跟随，复古像素风十足。绿 / 粉 / 金三套配色，速度 0.3× - 2.5× 实时改变游走频率。

完整代码

HTML 结构：

<div class="sn-panel">
  <div class="sn-grid"></div>   <!-- 网格由 JS 生成 7×5 个格子 -->
</div>

CSS 核心：

.sn-grid { display: grid; grid-template-columns: repeat(7, 1fr);
           grid-template-rows: repeat(5, 1fr); gap: 3px; }
.sn-grid i { border-radius: 4px; background: rgba(120,136,200,.14); }
.sn-grid i.on  { background: #34c48b; box-shadow: 0 0 8px rgba(52,196,139,.7); }
.sn-grid i.head { background: #fff; box-shadow: 0 0 12px #34c48b; }

JS 核心（蛇沿外围路径游走）：

const COLS = 7, ROWS = 5, LEN = 4;

// 1. 生成顺时针外围路径坐标
const path = [];
for (let c = 0; c < COLS; c++) path.push([0, c]);                 // 顶边
for (let r = 1; r < ROWS; r++) path.push([r, COLS - 1]);           // 右边
for (let c = COLS - 2; c >= 0; c--) path.push([ROWS - 1, c]);     // 底边
for (let r = ROWS - 2; r >= 1; r--) path.push([r, 0]);            // 左边

// 2. 每个 tick 蛇头前进一格，身体跟随头部的历史位置
let head = 0;
timer = setInterval(() => {
  head = (head + 1) % path.length;
  render();   // 根据 head 往前数 LEN 格绘制蛇身
}, 300 / speed);

// 3. 渲染：蛇头亮白，身体依次变暗
function render() {
  cells.forEach((el) => el.classList.remove('on', 'head'));
  for (let k = 0; k < LEN; k++) {
    const p = path[(head - k + path.length * 10) % path.length];
    const el = cells[idx(p[0], p[1])];
    el.classList.add('on');
    if (k === 0) el.classList.add('head');
  }
}

参数说明

兼容性与性能

• 动画由单个 setInterval 驱动，每帧只增删几个格子的 class，无持续样式计算
• 网格 35 个 <i> 节点一次性生成，之后只改 class，无 DOM 增删
• 兼容 Chrome / Firefox / Safari / Edge 最新版；grid 布局要求 Chrome 57+，移动端一致
• 定时器方案比 CSS 逐格动画更易扩展：改路径、加障碍、加食物都只需改 JS
• 适合游戏化产品、开发工具控制台、极客风格页面的加载等待，复古像素感自带话题性

常见问题

Q: 想让蛇走螺旋路径而不是只走边框？ 在 path 构造时按螺旋顺序填充坐标：先外圈一圈，再向内一圈，直到中心，蛇就会一圈圈”收拢”游走。

Q: 暂停后重新开始，蛇会跳位吗？ 不会，head 状态保留在 JS 变量中；暂停只清定时器，恢复时从原位置继续，渲染逻辑与之前完全一致。

Q: 格子太小/太大怎么调？ 改 .sn-panel 的宽高与 gap，格子由 1fr 自动等分；面板宽高比建议与 COLS:ROWS 保持一致，格子才接近正方形。

Q: 定时器在后台标签页会被节流，蛇变慢了？ 浏览器会把后台 setInterval 降到每秒 1 次。若必须后台匀速，可用 requestAnimationFrame 累加时间戳的方式替代定时器，前台体验完全一致。