如何实现HTML Canvas中角色与障碍物的交互（跳跃、阻挡等）

嘿，很高兴你已经搞定了Canvas角色移动的部分！角色和障碍物的交互确实是2D小游戏里的核心环节，我来给你拆解下最实用的实现思路，分碰撞检测和响应逻辑两部分说：

最常用也最容易上手的是轴对齐 bounding box（AABB）——简单来说就是给角色和障碍物都套上矩形框，判断两个矩形是否重叠。这种方法性能好，适合绝大多数2D场景。

先写个基础的碰撞检测函数：

// rect参数是包含x, y, width, height的对象
function checkCollision(rect1, rect2) {
  return (
    rect1.x < rect2.x + rect2.width &&
    rect1.x + rect1.width > rect2.x &&
    rect1.y < rect2.y + rect2.height &&
    rect1.y + rect1.height > rect2.y
  );
}

这个函数的逻辑很直白：两个矩形在水平和垂直方向都有重叠，就判定为碰撞。

有了碰撞检测，接下来就是处理碰撞后的行为——比如被挡住不能动，或者踩在障碍物上可以继续跳。

1. 移动时被障碍物阻挡 #

核心思路是：先预判移动后的位置，再检测碰撞，如果会撞就调整位置到刚好不碰的地方，没撞就正常移动。

这里要注意分X（左右）和Y（上下）方向单独检测，避免角色被卡死：

// 假设player是你的角色对象，包含x, y, width, height, vx(水平速度), vy(垂直速度)
// obstacle是单个障碍物对象，结构和player一致

// 先处理水平方向移动
const nextX = player.x + player.vx;
const tempHorizontalRect = { ...player, x: nextX };

if (!checkCollision(tempHorizontalRect, obstacle)) {
  // 没碰撞，正常移动
  player.x = nextX;
} else {
  // 碰到障碍物了，把角色贴到障碍物边缘
  if (player.vx > 0) {
    // 向右移动撞墙，角色左边缘贴障碍物右边缘
    player.x = obstacle.x - player.width;
  } else {
    // 向左移动撞墙，角色右边缘贴障碍物左边缘
    player.x = obstacle.x + obstacle.width;
  }
  player.vx = 0; // 速度清零，避免持续触发碰撞
}

// 再处理垂直方向移动（落地/撞天花板）
const nextY = player.y + player.vy;
const tempVerticalRect = { ...player, y: nextY };

if (!checkCollision(tempVerticalRect, obstacle)) {
  player.y = nextY;
} else {
  if (player.vy > 0) {
    // 向下移动（下落）碰到障碍物，说明踩在上面了
    player.y = obstacle.y - player.height;
    player.isGrounded = true; // 标记角色在地面/障碍物上，允许跳跃
    player.vy = 0;
  } else {
    // 向上移动（跳跃）碰到天花板，弹回来
    player.y = obstacle.y + obstacle.height;
    player.vy = 0;
  }
}

2. 跳上障碍物的实现 #

跳上障碍物其实是垂直方向碰撞检测的延伸，关键是管理角色的"落地状态"：

• 只有当isGrounded为true时，才允许角色跳跃
• 当角色下落碰到障碍物顶部时，把isGrounded设为true，这样就能在障碍物上再次起跳
• 如果角色从障碍物边缘掉下去，把isGrounded设为false，进入下落状态

比如跳跃触发逻辑：

// 假设你用键盘事件监听空格按键
if (keys.Space && player.isGrounded) {
  player.vy = -10; // 向上的速度，负数根据你的坐标系调整（Y轴向下的话，向上就是负方向）
  player.isGrounded = false; // 跳起来后就不在地面了
}

• 可以给角色的碰撞框稍微缩小一点（比如宽高各减2），避免视觉上看起来角色卡进障碍物里
• 如果有多个障碍物，用循环遍历所有障碍物，逐个检测碰撞即可
• 要是需要更精细的碰撞（比如不规则形状），可以用像素级碰撞，但性能开销大，一般AABB足够应付大部分场景

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