JavaScript游戏开发应优先掌握游戏循环、Canvas绘图、键盘状态管理与AABB碰撞检测：用requestAnimationFrame实现稳帧循环，canvas.getContext('2d')高效绘图，keys对象记录按键状态，AABB算法快速判断矩形重叠。
JavaScript 游戏开发不需要框架也能起步，但直接写 canvas + requestAnimationFrame 容易卡在“画不出动起来的东西”这一步。真正该先搞懂的不是“怎么画”，而是“游戏循环怎么不卡、不掉帧、不漂移”。
从 requestAnimationFrame 开始，别碰 setInterval
很多新手用 setInterval 每 16ms 更新一次，结果发现动画忽快忽慢，甚至在后台标签页里疯狂累积定时器。根本原因是 setInterval 不感知屏幕刷新节奏，也不暂停。
-
requestAnimationFrame会自动对齐显示器刷新率（通常是 60fps），且在页面不可见时暂停调用 - 它传入的时间戳是高精度的
DOMHighResTimeStamp，比Date.now()更准，适合计算真实帧间隔 - 必须递归调用：每次回调末尾再调一次
requestAnimationFrame(gameLoop)，否则只执行一帧
示例骨架：
function gameLoop(timestamp) {
const deltaTime = timestamp - lastTime;
lastTime = timestamp;
<p>update(deltaTime); // 物理、输入、状态
render(); // 绘制</p><p>requestAnimationFrame(gameLoop);
}
let lastTime = 0;
requestAnimationFrame(gameLoop);
用 canvas.getContext('2d') 而不是直接操作 DOM
想用 div 拖小人？5 个对象就卡；想用 img + transform？旋转缩放失真、碰撞检测难写。所有简单 2D 游戏（贪吃蛇、打砖块、飞机大战）都该从 canvas 入手。
立即学习“Java免费学习笔记（深入）”；
-
getContext('2d')提供基础绘图能力，够用且性能远高于 DOM 操作 - 清屏别用
canvas.innerHTML = ''—— 会重置整个上下文；用ctx.clearRect(0, 0, canvas.width, canvas.height) - 图像加载必须等
img.onload触发后再绘制，否则ctx.drawImage(img, ...)无声失败
键盘输入要用 keydown/keyup 记状态，别在 keypress 里做逻辑
keypress 已废弃，且只对可打印字符触发；方向键、空格、Shift 都不会进这个事件。更关键的是：游戏需要“持续按下”的语义（比如长按加速），而原生事件只告诉你“按下”和“松开”两个瞬间。
- 建一个
keys = {}对象，keydown设keys[event.code] = true，keyup设false - 在
update()里查keys['ArrowUp']，而不是在事件里直接改角色坐标 —— 否则会跳帧、响应延迟 - 注意
event.code（如'KeyW'）比event.key（如'w'）更稳定，不受大小写/输入法影响
碰撞检测先用 AABB，别一上来就搞像素级或圆形
矩形包围盒（AABB）就是比较两个矩形的 left/right/top/bottom 是否重叠。8 行代码能搞定，90% 的入门游戏够用。
错误做法：用 Math.sqrt(dx*dx + dy*dy) < radius 算两点距离——CPU 开销大，且没考虑物体朝向和形状。
- AABB 不依赖图像尺寸，只靠对象的
x,y,width,height - 别在每帧对所有物体两两检测（O(n²)）；如果物体多，先用网格或四叉树粗筛，但 20 个以内直接暴力即可
- 检测到碰撞后，立刻修正位置（比如把玩家推回上一帧位置），否则会穿模或卡进墙里出不来
最简 AABB 判断：
function collides(a, b) {
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;
}
真正卡住初学者的，从来不是“怎么画个方块”，而是“为什么方块动起来像抽搐”“为什么按键按了三下才跳一次”“为什么两个东西明明挨着却不触发碰撞”。这些问题的答案全藏在时间控制、输入采样方式和坐标更新时机里——这些地方错一点，后面加再多特效都没用。
