贪吃蛇核心是坐标更新、碰撞检测、食物生成三步：用requestanimationframe驱动，蛇身存{x,y}数组，禁止180°掉头，撞墙/自身（从第4节起检测）/吃食物判定，食物在空闲格子中随机生成。
用 canvas 画布实现贪吃蛇，核心就三件事
不用框架、不依赖第三方库，纯 HTML + JS 就能跑起来。关键不是“怎么画”，而是“怎么让蛇动得合理”：坐标更新、碰撞检测、食物生成这三步卡住了大多数初学者。
常见错误是直接用 setInterval 控制帧率但没做节流，导致在高刷屏或后台标签页里蛇狂奔或卡死；还有人用 div 模拟格子，结果重绘慢、方向响应延迟明显——canvas 是唯一靠谱选择。
- 用
requestAnimationFrame替代setInterval，保证动画节奏稳定 - 蛇身用数组存
{x, y}坐标，每次只推新头、删尾，别重绘整条蛇 - 所有坐标运算按“格子单位”来（比如每格
20px），避免浮点误差累积
keydown 监听方向键时，为什么不能连按两次左转？
贪吃蛇禁止 180° 掉头（比如向右时按左键），否则下一帧就自撞。这不是逻辑漏洞，是规则硬约束。
典型写法是缓存上一帧的移动方向（direction），新按键触发时先比对：if ((key === 'ArrowLeft' && direction !== 'Right') || ...)。漏掉这个判断，玩家一激动按错键，蛇立刻结束。
- 必须用
event.preventDefault()阻止方向键触发页面滚动 - 推荐用
Map存键值映射：keyMap.set('ArrowUp', 'Up')，比一堆if/else清晰 - 不要在
keydown里直接改蛇方向，先记下意图，等下一帧渲染前再合并处理
碰撞检测只查三处：墙、自己、食物
边界检测最简单：蛇头 x 或 y 超出 canvas.width/canvas.height 就 Game Over。但“撞自己”容易被忽略细节：不是查整个身体数组，而是从第 4 节开始查（前三节太近，刚转弯时会误判）。
食物生成则要避开蛇身所有坐标——很多人用 while 循环随机生成直到不重叠，但极端情况可能卡住。更稳的做法是先算出所有空闲格子坐标，再用 Math.random() 选一个索引。
- 检查撞自己时，遍历从索引
3开始（for (let i = 3; i ） - 食物坐标必须对齐格子单位，比如
foodX = Math.floor(Math.random() * canvas.width / gridSize) * gridSize - 别在每次渲染都调用
fillRect清屏，用clearRect(0, 0, canvas.width, canvas.height)更快
性能差、掉帧？八成是没分离绘制和逻辑
新手常把移动、碰撞、绘图全塞进一个 requestAnimationFrame 回调里，一旦某帧计算久（比如数组遍历食物位置），整条链路就拖慢。正确做法是逻辑更新和画面渲染解耦。
用一个布尔标志 shouldUpdate 控制逻辑频率（例如固定 12 FPS），而渲染保持 60 FPS。这样即使手机性能弱，蛇动得慢但不卡顿，方向响应依然跟手。
- 设定时器变量
lastUpdate = 0，在 rAF 回调里用performance.now()判断是否该走逻辑 - 绘图部分只做
clearRect+fillRect，别在里面算坐标 - 调试时临时加
console.log(Date.now() % 1000)看实际帧间隔，比肉眼靠谱
最难的不是画出蛇，是让每一次转向、每一口食物、每一次碰撞都符合直觉——这些细节藏在坐标对齐、方向锁、帧节奏里，少一个，游戏就“不对劲”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
