Canvas JavaScript游戏碰撞问题：角色卡墙无法沿障碍物滑动

问题根源分析 #

你当前的碰撞逻辑存在两个核心问题：

1. 全位置回退：只要玩家和障碍物的任意顶点重叠，就直接把玩家整个退回到上一帧的位置。这会导致一旦触发碰撞，每帧都会强制回退，玩家没法微调位置脱离碰撞状态；
2. 多轴联动回退：x、y轴的移动是同时处理的，只要其中一个轴触发碰撞，整个位置都会被回退，自然出现"卡墙"，没法沿着障碍物边缘滑动的情况。

解决方案：分离轴碰撞处理 #

要实现沿障碍物滑动的效果，核心是把x轴和y轴的移动、碰撞检测分开处理，让单个轴的碰撞不影响另一个轴的有效移动。下面分步骤修改：

1. 替换更高效的矩形碰撞检测函数 #

你当前用顶点检测的方式比较繁琐，直接判断两个矩形是否重叠的函数更简洁可靠：

// 判断两个矩形是否重叠
// 参数格式：{x: 横坐标, y: 纵坐标, w: 宽度, h: 高度}
function isRectOverlap(rectA, rectB) {
  return rectA.x < rectB.x + rectB.w &&
         rectA.x + rectA.w > rectB.x &&
         rectA.y < rectB.y + rectB.h &&
         rectA.y + rectA.h > rectB.y;
}

2. 分离x、y轴的移动与碰撞处理 #

不再一次性更新玩家的x、y位置，而是先处理x轴移动并检测碰撞，有碰撞就回退x轴；再处理y轴移动并检测碰撞，有碰撞就回退y轴。这样单个轴的碰撞不会影响另一个轴的有效移动，就能实现滑动效果。

修改你的update()函数逻辑：

function update() {
  // 保存玩家当前初始位置
  const xOld = xPlayer;
  const yOld = yPlayer;

  // --- 第一步：处理x轴移动与碰撞 ---
  // 这里替换成你的实际按键控制逻辑，比如：
  // if (keys.right) xPlayer += moveSpeed;
  // if (keys.left) xPlayer -= moveSpeed;

  // 创建x轴移动后的玩家矩形
  const playerRectX = {x: xPlayer, y: yPlayer, w: wPlayer, h: hPlayer};
  let xCollided = false;

  // 检测x轴移动是否触发碰撞
  for (const obstacle of obstacles1) {
    if (isRectOverlap(playerRectX, obstacle)) {
      xCollided = true;
      break;
    }
  }

  // 若x轴碰撞，回退到初始x位置
  if (xCollided) {
    xPlayer = xOld;
  }

  // --- 第二步：处理y轴移动与碰撞 ---
  // 这里替换成你的实际按键控制逻辑，比如：
  // if (keys.down) yPlayer += moveSpeed;
  // if (keys.up) yPlayer -= moveSpeed;

  // 创建y轴移动后的玩家矩形
  const playerRectY = {x: xPlayer, y: yPlayer, w: wPlayer, h: hPlayer};
  let yCollided = false;

  // 检测y轴移动是否触发碰撞
  for (const obstacle of obstacles1) {
    if (isRectOverlap(playerRectY, obstacle)) {
      yCollided = true;
      break;
    }
  }

  // 若y轴碰撞，回退到初始y位置
  if (yCollided) {
    yPlayer = yOld;
  }
}

3. 进阶优化：避免持续碰撞回退 #

如果修改后仍出现持续回退的情况（比如玩家刚好卡在障碍物边缘），可以在回退位置后，微调玩家位置直到脱离碰撞区域：

// 回退x位置后，微调脱离碰撞
if (xCollided) {
  xPlayer = xOld;
  const playerRect = {x: xPlayer, y: yPlayer, w: wPlayer, h: hPlayer};
  for (const obstacle of obstacles1) {
    // 循环微调直到脱离碰撞
    while (isRectOverlap(playerRect, obstacle)) {
      // 根据碰撞方向调整：如果是向右撞障碍物，就左移1像素，反之右移
      xPlayer = xPlayer > obstacle.x + obstacle.w ? xPlayer - 1 : xPlayer + 1;
      playerRect.x = xPlayer;
    }
  }
}

效果说明 #

修改后就能实现你想要的滑动效果：

• 当玩家按住右方向键碰到左侧障碍物时，x轴会回退，但如果同时按住上/下方向键，y轴的移动依然有效，玩家可以沿着障碍物边缘上下滑动；
• 不再出现持续重置到旧位置的问题，只有当当前帧的移动导致碰撞时才会回退，玩家可以正常调整位置脱离碰撞区域。

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