用JavaScript打造交互游戏与动画教程

本文深入讲解了使用JavaScript开发交互式游戏与动画的核心实践，强调以requestAnimationFrame替代setInterval构建高效、流畅的动画主循环，并系统梳理了键盘事件监听（基于e.code的状态管理）、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 就够了。

• AABB 判定只需四次比较：rect1.x rect2.x && ...
• 把玩家、敌人、子弹都抽象成带 x、y、width、height 的对象，碰撞逻辑可复用
• 注意：如果物体移动速度过快（单帧位移 > 自身宽高），可能跳过碰撞——此时需做“扫掠检测”或拆分多步校验
• 真正需要圆/多边形检测时，再引入 Math.hypot() 或分离轴定理（SAT），但先确保基础逻辑跑通

实际项目里最常卡住的不是算法，而是状态没清理（比如重复绑定事件）、图像没等加载完就画、或者坐标系理解偏差导致角色往反方向飞。把这些点盯住，比堆功能更重要。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~