基于p5.js的迷宫坦克游戏线段相交碰撞修正问题

核心思路 #

线段相交检测能覆盖大部分碰撞场景，但端点碰撞时需要额外处理坦克与墙壁端点的距离判断和碰撞后的位移修正逻辑，避免因端点属于横竖墙交汇导致的冲突性修正。

1. 标准化墙壁的线段表示 #

先把墙壁数组元素转换成明确的线段端点（假设墙块为固定像素尺寸，比如32px）：

• 垂直墙（类型1）：线段端点为 (x*32, y*32) 和 (x*32, (y+1)*32)
• 水平墙（类型0，可根据你的定义调整）：线段端点为 (x*32, y*32) 和 ((x+1)*32, y*32)

2. 优化wallCheck函数逻辑 #

分两步处理碰撞，重点解决端点碰撞的位置修正：

第一步：检测移动轨迹与墙壁的相交

用线段相交算法（p5.js内置lineIntersect或自定义实现），判断坦克从旧位置到新位置的移动线段是否与墙壁线段相交，记录碰撞的墙壁和交点。

第二步：端点碰撞的特殊处理

当交点是墙壁端点时，通过坦克移动方向、与端点的相对位置判断阻挡方向，针对性回退位置：

• 横向阻挡：若坦克水平移动占主导（dx绝对值>dy），或坦克中心y坐标在端点的墙块半高范围内，将x坐标回退到碰撞前位置，额外向后推一点（比如坦克半径的10%）避免卡墙
• 纵向阻挡：同理，回退y坐标并微调

3. 具体代码实现 #

function wallCheck(tank) {
  const tankRadius = 10; // 坦克碰撞半径，根据你的游戏调整
  const wallSize = 32; // 墙块像素尺寸
  let collided = false;
  const oldPos = { x: tank.x, y: tank.y };

  // 遍历所有墙壁
  for (const wall of walls) {
    const wallX = wall[0] * wallSize;
    const wallY = wall[1] * wallSize;
    const wallType = wall[2];
    let wallLine;

    // 生成墙壁线段的两个端点
    if (wallType === 1) { // 垂直墙
      wallLine = [createVector(wallX, wallY), createVector(wallX, wallY + wallSize)];
    } else { // 水平墙
      wallLine = [createVector(wallX, wallY), createVector(wallX + wallSize, wallY)];
    }

    // 坦克的移动线段：旧位置 -> 新位置
    const tankLine = [createVector(oldPos.x, oldPos.y), createVector(tank.x, tank.y)];
    const intersect = lineIntersect(
      tankLine[0].x, tankLine[0].y, tankLine[1].x, tankLine[1].y,
      wallLine[0].x, wallLine[0].y, wallLine[1].x, wallLine[1].y
    );

    if (intersect) {
      collided = true;
      const intersectPoint = createVector(intersect.x, intersect.y);

      // 判断是否为墙壁端点碰撞（误差范围内判定）
      const isEndPoint = p5.Vector.dist(intersectPoint, wallLine[0]) < 1 || 
                         p5.Vector.dist(intersectPoint, wallLine[1]) < 1;

      if (isEndPoint) {
        const dx = tank.x - oldPos.x;
        const dy = tank.y - oldPos.y;
        const isHorizontalBlock = Math.abs(dx) > Math.abs(dy);

        // 横向阻挡：回退x并微调
        if (isHorizontalBlock) {
          tank.x = oldPos.x;
          tank.x -= dx > 0 ? tankRadius * 0.1 : -tankRadius * 0.1;
        } else {
          // 纵向阻挡：回退y并微调
          tank.y = oldPos.y;
          tank.y -= dy > 0 ? tankRadius * 0.1 : -tankRadius * 0.1;
        }
      } else {
        // 非端点碰撞：按墙壁类型直接回退
        tank.x = wallType === 1 ? oldPos.x : tank.x;
        tank.y = wallType !== 1 ? oldPos.y : tank.y;
      }
    }
  }
  return collided;
}

// 自定义线段相交函数（适配碰撞检测需求）
function lineIntersect(x1, y1, x2, y2, x3, y3, x4, y4) {
  const den = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
  if (den === 0) return false;
  const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / den;
  const u = -((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / den;
  if (t > 0 && t < 1 && u > 0 && u < 1) {
    return { x: x1 + t * (x2 - x1), y: y1 + t * (y2 - y1) };
  }
  return false;
}

4. 额外优化建议 #

• 用坦克碰撞边界（四个角）代替中心检测，提升碰撞精准度
• 多端点碰撞时只处理距离最近的墙壁，避免多重修正导致的 glitch
• 移动前预判碰撞：先检测目标位置是否会碰撞，再决定是否移动，减少卡顿感

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