《打砖块 BREAKOUT 2》开发复盘：Canvas 碰撞检测、关卡加速与性能优化实践

一、前言

最近用 Canvas 重写了一版经典打砖块游戏，命名为《打砖块 BREAKOUT 2》。相比第一版只求“能玩”，这一版重点打磨了三件事：碰撞检测的准确性、关卡节奏的递进感、低端设备上的流畅度。本文把开发过程中的关键实现、踩过的坑和优化手段完整复盘一遍，希望对同样在做 Canvas 小游戏的开发者有参考价值。

二、技术选型与整体架构

渲染方案选择 Canvas 2D。打砖块属于 2D 简单图形场景，Canvas 的即时绘制模式完全够用，也不需要引入游戏引擎的学习成本。主循环使用 requestAnimationFrame，保证与屏幕刷新率同步，避免 setInterval 在后台标签页漂移的问题。

游戏对象划分为四个模块：Ball（小球）、Paddle（挡板）、Brick（砖块）、Game（主控）。Game 负责统一的 update + render 循环，所有对象只暴露 update(dt) 与 draw(ctx) 两个接口。dt 采用时间增量而非固定步长，这样在不同刷新率的屏幕上球速表现一致。

三、碰撞检测：从“能用”到“准确”

1. 小球与挡板

挡板是水平移动的矩形，小球是圆形。采用“圆心 + 半径 vs 矩形”的最近点检测法：先找到矩形上距离圆心最近的点，再判断该点到圆心的距离是否小于半径。碰撞后根据击中位置调整反弹角度——击中挡板中央附近时接近垂直反弹，击中边缘时反弹角度更大。玩家可以通过走位控制球路，手感提升非常明显。

2. 小球与砖块

砖块是轴对齐矩形，检测逻辑与挡板类似。真正的难点在于“一次碰撞只反转一个方向的速度”：如果小球同时满足水平和垂直方向的穿透条件，两个方向都反转会导致小球“粘”在砖块里来回抖动。正确做法是记录小球上一帧的位置，判断它从哪个方向进入砖块，只反转该方向的速度分量。

另一个坑是高速下的“隧穿”问题：当小球单帧位移超过砖块厚度时，可能一帧直接穿过砖块而检测不到碰撞。我的处理方式是把小球速度上限与砖块最小边长关联起来，保证单帧位移不超过砖块厚度的一半，简单有效。

3. 边界碰撞

四周墙壁最简单：小球圆心坐标加半径超出画布边界即反转对应速度分量。底部设为“死亡线”，小球掉出底部则生命值减一，三条命用完游戏结束。

四、关卡加速设计

BREAKOUT 2 的乐趣在于节奏递进，具体设计如下：

第一，球速递增。每过一关，小球基础速度提升约 8%，同时挡板宽度缩短 5%，双重施压但幅度克制，避免难度曲线过于陡峭。

第二，砖块布局变化。第一关是规则矩形阵列；第二关加入“硬砖块”，需要撞击两次才会碎；第三关起出现斜向排列与空洞，迫使玩家预判反弹路线而不是无脑反弹。

第三，道具系统。击碎特定砖块会掉落道具：加长挡板、多球、慢速球。道具用不同颜色区分，挡板接住即生效，持续 15 秒后失效。多球是翻盘神器，也是手忙脚乱的开端。

关卡数据用二维数组描述，1 表示普通砖，2 表示硬砖，0 表示空位。换关只需替换数组，新增关卡几乎零成本。

五、调试过程：三个印象深刻的 Bug

Bug 1：小球“粘”在挡板上。表现为小球贴着挡板横向滚动。原因是碰撞后只反转了速度方向，但小球位置仍在挡板内部，下一帧又判定为碰撞。修复方法：碰撞发生后，立即把小球位置修正到挡板表面之外，再反转速度。位置修正和速度反转缺一不可。

Bug 2：多球道具下帧率暴跌。同时存在 5 个以上小球时，低端手机明显卡顿。排查发现是每帧都在创建新的渐变对象和阴影。改为复用预创建的渐变、关闭阴影模糊后，帧率恢复稳定。

Bug 3：关卡切换时砖块残留。切换关卡时旧砖块数组没有清空，新关卡出现了“幽灵砖块”，撞上去没有反应但占着位置。教训：关卡状态重置要集中在一个 resetLevel() 函数里，而不是分散在多处各自为政。

六、性能优化点

1. 脏矩形重绘。打砖块场景变化区域小，改为只重绘变化区域而非全屏 clearRect，低端设备帧率提升约 20%。

2. 对象复用。小球、道具、粒子效果全部使用对象池，避免在游戏循环中频繁创建对象，减少垃圾回收带来的卡顿。

3. 预渲染静态层。背景网格、关卡标题等不变元素绘制到离屏 Canvas，每帧只需 drawImage 一次，省下大量绘制调用。

4. 事件节流。挡板跟随鼠标或触摸移动时，对 move 事件做 rAF 节流，避免一帧内多次更新位置造成抖动。

5. 碰撞检测剪枝。砖块数量多时，先用小球包围盒做粗筛，只对可能相交的砖块做精细检测，复杂度从 O(n) 降到接近 O(1)。

七、总结

《打砖块 BREAKOUT 2》从第一版的“能跑”到第二版的“好玩”，最大的体会是：简单游戏的体验差距，往往藏在碰撞检测的细节和节奏设计的克制里。碰撞要准、加速要稳、性能要省——这三件事做好，经典玩法依然能让人“再来一局”。

完整代码约 600 行，后续计划加入本地最高分排行和关卡编辑器，欢迎交流讨论。