Canvas 实现玩家与生成砖块侧边碰撞检测失效问题求助

原代码存在的核心问题 #

• 判断条件逻辑完全错位：原代码要求playerRight === objectLeftSide的严格相等才触发判断，而Canvas游戏中玩家每帧是连续移动的，几乎不可能刚好卡到坐标完全相等的位置，会直接导致判断永远不触发。这类严格相等的匹配方式在连续移动的游戏场景中基本不可能命中。
• 触发条件不符合实际碰撞场景：原代码中playerLeft >= objectRightSide的判断，对应的是玩家已经完全走到砖块右侧的状态，根本不属于侧边碰撞的范畴。
• 变量拼写错误：赋值语句里的gameObejct是拼写错误，正确变量名应为gameObject，就算判断条件触发，也会因为引用未定义变量直接报错中断逻辑。
• 位置修正方向错误：原代码的赋值逻辑会把玩家直接推到砖块右侧，完全抵消碰撞效果，起不到撞侧边停止移动的作用。

可直接运行的修正版逻辑 #

侧边碰撞需要分两个独立的方向判断，且必须先校验上下方向的重叠范围，避免把上下碰撞误判为侧边碰撞：

// 提前计算所有碰撞边界值，减少重复计算
const playerLeft = player.position.x
const playerRight = player.position.x + player.width
const playerTop = player.position.y
const playerBottom = player.position.y + player.height
const brickLeft = gameObject.position.x
const brickRight = gameObject.position.x + gameObject.width
const brickTop = gameObject.position.y
const brickBottom = gameObject.position.y + gameObject.height

// 先校验上下方向是否存在重叠，没有重叠则不可能发生侧边碰撞
const hasVerticalOverlap = playerBottom > brickTop && playerTop < brickBottom
if (!hasVerticalOverlap) return

// 场景1：玩家从左侧撞击砖块的右侧面
if (playerRight > brickLeft && playerLeft < brickLeft) {
  // 将玩家位置卡回砖块左侧，同时清零水平方向移动速度，实现撞停效果
  player.position.x = brickLeft - player.width
  player.velocity.x = 0
}

// 场景2：玩家从右侧撞击砖块的左侧面
if (playerLeft < brickRight && playerRight > brickRight) {
  // 将玩家位置卡回砖块右侧，同时清零水平方向移动速度
  player.position.x = brickRight
  player.velocity.x = 0
}

落地注意事项 #

• 所有碰撞边界判断不要用严格相等匹配，改用区间判断覆盖帧移动的跨临界点场景，避免玩家因为移动速度过快直接穿透碰撞检测。
• 碰撞处理逻辑要放在每帧更新完玩家位置、重绘画布之前执行，避免出现一帧的穿透视觉卡顿。
• 动态生成的砖块不需要单独写适配的碰撞逻辑，只要按照相同的边界计算规则传入碰撞检测函数即可正常生效。

内容的提问来源于stack exchange，提问作者shivetay