`pop()` 实际上正常工作，问题根源在于 `clearrect()` 清屏范围过小（仅清除 20×20 像素），导致旧蛇身残留，造成“未删除”的视觉假象。
在实现贪吃蛇类游戏时，snake.pop() 是控制蛇身长度、实现“移动”效果的关键操作——它应移除尾部最后一个身体节点，配合 unshift(newHead) 在头部添加新节点，从而形成蛇向前爬行的动画效果。然而，许多初学者会发现：尽管代码中调用了 snake.pop()，蛇却越变越长，仿佛该方法完全没生效。
根本原因并非 pop() 失效，而是渲染逻辑存在致命疏漏：
ctx.clearRect(0, 0, width, height); // ❌ 错误！只清除了左上角 20×20 区域
此处 width 和 height 被固定为 20（用于绘制单个方块），但 clearRect(x, y, w, h) 的后两个参数表示清除区域的宽高，而非单个格子尺寸。若只清除 20×20 像素，画布其余部分（尤其是之前绘制的蛇身）将全部残留，造成“蛇不断增长”的错觉——实际上 snake 数组长度已正确缩短，只是旧图形未被擦除，新旧帧层层叠加，掩盖了 pop() 的真实效果。
✅ 正确做法是完整清空整个画布：
ctx.clearRect(0, 0, canvas.width, canvas.height); // ✅ 清除整个画布
同时，建议优化代码结构以提升可维护性与逻辑清晰度：
- 清屏必须放在绘制前：避免先画再擦，导致闪烁或残留；
- pop() 与 unshift() 顺序可互换，但语义上更推荐先 unshift 再 pop（即“先长头、再剪尾”），符合直觉；
- 避免重复声明全局变量：如 snakex/snakey 应使用 let 或 const 局部声明，防止意外污染；
- 按键事件监听器需修正：原代码中 up/down/left 均指向同一 querySelector("left")，应分别绑定对应 ID 元素。
完整修复后的核心 move 函数如下：
function move() {
// ✅ 第一步：彻底清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// ✅ 第二步：绘制当前蛇身（所有节点）
for (let i = 0; i < snake.length; i++) {
ctx.strokeStyle = "orange";
ctx.lineWidth = 1;
ctx.strokeRect(snake[i].x, snake[i].y, width, height);
}
// ✅ 第三步：计算新头部位置（示例：向右移动）
const head = snake[0];
const newHead = {
x: head.x + 20, // 可根据方向键动态调整
y: head.y
};
// ✅ 第四步：更新蛇数组 —— 先加头，再删尾
snake.unshift(newHead);
snake.pop(); // 此处真正生效：数组长度减 1
}? 关键总结：
- Array.prototype.pop() 始终可靠，排查渲染问题优先于怀疑数组方法；
- clearRect() 的宽高参数必须匹配画布实际尺寸（canvas.width / canvas.height）；
- 动画逻辑应严格遵循「清屏 → 计算 → 更新数据 → 绘制」顺序；
- 使用浏览器开发者工具的 Console 配合 console.log(snake.length) 可快速验证数组是否真实变化，分离逻辑层与视图层问题。
遵循以上原则，你的蛇就能真正“游动”起来——每帧精准增一减一，干净利落。
