应使用 requestAnimationFrame 替代 setInterval 实现动画主循环，因其与屏幕刷新率同步、精度高且不易卡顿；需在回调中更新状态并重绘，末尾递归调用自身，避免耗时操作，配合 keydown/keyup 监听按键状态，注意 Canvas 坐标系、图像加载时机、变换隔离及 AABB 碰撞检测等关键细节。
用 requestAnimationFrame 替代 setInterval 做动画主循环
浏览器对 setInterval 的时间精度不保证，尤其在页面失焦或低性能设备上容易卡顿、跳帧。而 requestAnimationFrame 由浏览器统一调度，与屏幕刷新率同步（通常 60fps），是游戏和动画的正确入口。
- 每次回调中更新状态（位置、角度、速度等），再调用
ctx.clearRect()和ctx.drawImage()等重绘 - 必须在回调末尾递归调用自身，否则动画只执行一帧：
function loop() { /* update + render */ requestAnimationFrame(loop); } - 不要在回调里做耗时操作（如 DOM 查询、大数组遍历），否则会拖慢帧率
监听键盘输入时用 keydown/keyup 而非 keypress
keypress 已废弃，且不响应方向键、空格、Ctrl 等非字符键；游戏控制依赖的是「按键按下/释放」状态，不是字符输入。
- 用一个对象（如
keys = {}）记录当前按下的键：document.addEventListener('keydown', e => keys[e.code] = true) - 在动画主循环中判断状态：
if (keys['ArrowUp'] || keys['KeyW']) player.y -= 5; - 注意处理
keyup时设为false，否则按键松开后角色仍持续移动 -
e.code比e.key更可靠——它反映物理按键位置（如'ArrowLeft'），不受系统输入法或大小写影响
Canvas 坐标系与图像加载的常见陷阱
Canvas 默认以左上角为原点，y 轴向下增长，这和数学直角坐标系相反；同时，Image 加载是异步的，直接在 drawImage 中使用未加载完成的图片会导致空白或报错。
- 绘制前务必检查
img.complete === true，或把绘制逻辑放在img.onload回调内 - 旋转、缩放等变换需配合
ctx.save()/ctx.restore()隔离状态，否则后续绘制会继承错误的变换矩阵 - 想让图片绕中心旋转？先
ctx.translate(x, y)移动到目标点，再ctx.rotate(angle)，最后ctx.drawImage(img, -img.width/2, -img.height/2) - 注意：Canvas 的像素单位是 CSS 像素，若页面缩放或高清屏（devicePixelRatio > 1），需手动调整 canvas 的
width/height属性并缩放ctx
碰撞检测别硬算，优先用矩形轴对齐（AABB）
逐像素检测或圆形公式虽精确，但对简单游戏（如贪吃蛇、打砖块）属于过早优化，CPU 开销大且易出错。大多数 2D 游戏第一阶段用 AABB 就够了。
立即学习“Java免费学习笔记（深入）”；
- AABB 判定只需四次比较：
rect1.x rect2.x && ... - 把玩家、敌人、子弹都抽象成带
x、y、width、height的对象，碰撞逻辑可复用 - 注意：如果物体移动速度过快（单帧位移 > 自身宽高），可能跳过碰撞——此时需做“扫掠检测”或拆分多步校验
- 真正需要圆/多边形检测时，再引入
Math.hypot()或分离轴定理（SAT），但先确保基础逻辑跑通
实际项目里最常卡住的不是算法，而是状态没清理（比如重复绑定事件）、图像没等加载完就画、或者坐标系理解偏差导致角色往反方向飞。把这些点盯住，比堆功能更重要。
