基于JavaScript的2D数组平台游戏墙体碰撞问题求助

嘿，很高兴看到你在用二维数组搭建平台游戏的关卡！针对墙体碰撞这个问题，结合你的gridMap结构，我整理了几个实用的方案，应该能帮到你：

这个方法逻辑简单直接，完全贴合你用二维数组存关卡的设计，非常适合入门阶段：

• 第一步：把玩家坐标转成格子坐标
  假设每个格子的尺寸是tileSize（比如32px），玩家当前所在的格子可以通过以下计算得到：

const tileSize = 32;
const playerGridX = Math.floor(player.x / tileSize);
const playerGridY = Math.floor(player.y / tileSize);

• 第二步：预判移动后的碰撞
  当玩家要移动时，先计算移动后的目标格子，检查这个格子在gridMap里的值是否为1（墙体）。比如玩家向右移动，就检查右侧相邻的格子；向下移动就检查下方格子。
• 示例代码片段：

function willCollide(player, moveX, moveY) {
  const targetGridX = Math.floor((player.x + moveX) / tileSize);
  const targetGridY = Math.floor((player.y + moveY) / tileSize);

  // 先判断是否超出地图边界（边界也视为墙体）
  if (targetGridX < 0 || targetGridX >= gridMap[0].length || 
      targetGridY < 0 || targetGridY >= gridMap.length) {
    return true;
  }

  // 检查目标格子是否是墙体
  return gridMap[targetGridY][targetGridX] === 1;
}

// 使用示例：玩家尝试向右移动
const moveSpeed = 5;
if (!willCollide(player, moveSpeed, 0)) {
  player.x += moveSpeed;
} else {
  // 碰撞后修正位置，让玩家贴紧墙体边缘
  player.x = Math.floor(player.x / tileSize) * tileSize + tileSize - 1;
}

• 小优化：如果玩家的碰撞盒大于一个格子（比如宽64px），记得检测玩家碰撞盒覆盖的所有格子，而不是只检测中心点对应的格子。

如果你的玩家或物体有自定义尺寸的碰撞盒（不是刚好一个格子大），AABB是更灵活精准的选择：

• 核心逻辑：判断两个矩形（玩家碰撞盒和墙体碰撞盒）是否重叠。只要两个矩形没有完全在对方的左、右、上、外侧，就说明发生了碰撞。
• 步骤1：为墙体生成碰撞盒
  每个墙体格子的碰撞盒可以表示为：

const wallRect = {
  x: col * tileSize,
  y: row * tileSize,
  width: tileSize,
  height: tileSize
};

• 步骤2：检测玩家与墙体的重叠

function isAABBColliding(rectA, rectB) {
  return !(
    rectA.x + rectA.width < rectB.x ||
    rectA.x > rectB.x + rectB.width ||
    rectA.y + rectA.height < rectB.y ||
    rectA.y > rectB.y + rectB.height
  );
}

// 检测玩家与周围墙体的碰撞
function checkWallCollisions(player) {
  const playerRect = {
    x: player.x,
    y: player.y,
    width: player.width,
    height: player.height
  };

  // 只检测玩家周围的格子，避免遍历整个地图浪费性能
  const startRow = Math.max(0, Math.floor(player.y / tileSize) - 1);
  const endRow = Math.min(gridMap.length - 1, Math.floor(player.y / tileSize) + 1);
  const startCol = Math.max(0, Math.floor(player.x / tileSize) - 1);
  const endCol = Math.min(gridMap[0].length - 1, Math.floor(player.x / tileSize) + 1);

  for (let row = startRow; row <= endRow; row++) {
    for (let col = startCol; col <= endCol; col++) {
      if (gridMap[row][col] === 1) {
        const wallRect = {
          x: col * tileSize,
          y: row * tileSize,
          width: tileSize,
          height: tileSize
        };
        if (isAABBColliding(playerRect, wallRect)) {
          return true;
        }
      }
    }
  }
  return false;
}

检测到碰撞只是第一步，还要让玩家停在合理的位置，避免穿墙：

• 分离轴处理：分开处理X轴和Y轴的碰撞，先处理X方向移动，碰撞就修正X坐标；再处理Y方向，这样玩家不会被卡在墙角。

function handlePlayerMovement(player, dx, dy) {
  // 先处理X轴移动
  player.x += dx;
  if (checkWallCollisions(player)) {
    // 根据移动方向修正位置
    if (dx > 0) {
      // 向右移动撞墙，贴到墙体左侧
      player.x = Math.floor(player.x / tileSize) * tileSize - player.width;
    } else {
      // 向左移动撞墙，贴到墙体右侧
      player.x = Math.ceil(player.x / tileSize) * tileSize;
    }
  }

  // 再处理Y轴移动
  player.y += dy;
  if (checkWallCollisions(player)) {
    if (dy > 0) {
      // 向下移动撞墙，贴到墙体顶部
      player.y = Math.floor(player.y / tileSize) * tileSize - player.height;
    } else {
      // 向上移动撞墙，贴到墙体底部
      player.y = Math.ceil(player.y / tileSize) * tileSize;
    }
  }
}

最后给你几个小建议：

• 可以提前把所有墙体格子转换成碰撞盒列表，不用每次检测都遍历二维数组，提升游戏性能。
• 如果游戏里有移动平台或动态墙体，记得实时更新对应的碰撞盒位置。
• 对于斜向移动，分离处理XY轴的碰撞会让玩家的移动手感更自然。

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