js怎样实现游戏碰撞检测 游戏开发的4种碰撞检测算法

function aabbCollision(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
  );
}

// 使用示例
const rect1 = { x: 10, y: 10, width: 50, height: 50 };
const rect2 = { x: 60, y: 10, width: 50, height: 50 };

if (aabbCollision(rect1, rect2)) {
  console.log("AABB Collision detected!");
}

function circleCollision(circle1, circle2) {
  const dx = circle1.x - circle2.x;
  const dy = circle1.y - circle2.y;
  const distance = Math.sqrt(dx * dx + dy * dy);
  return distance < circle1.radius + circle2.radius;
}

// 使用示例
const circle1 = { x: 10, y: 10, radius: 25 };
const circle2 = { x: 60, y: 10, radius: 25 };

if (circleCollision(circle1, circle2)) {
  console.log("Circle Collision detected!");
}

function projectPolygon(polygon, axis) {
  let min = Infinity;
  let max = -Infinity;
  for (const vertex of polygon) {
    const projection = vertex.x * axis.x + vertex.y * axis.y;
    min = Math.min(min, projection);
    max = Math.max(max, projection);
  }
  return { min, max };
}

function isSeparatingAxis(polygon1, polygon2, axis) {
  const projection1 = projectPolygon(polygon1, axis);
  const projection2 = projectPolygon(polygon2, axis);
  return projection1.max < projection2.min || projection2.max < projection1.min;
}

function satCollision(polygon1, polygon2) {
  // 获取所有可能的分离轴（这里简化为只考虑两个多边形的边的法线）
  const axes = [];
  for (let i = 0; i < polygon1.length; i++) {
    const p1 = polygon1[i];
    const p2 = polygon1[(i + 1) % polygon1.length];
    const axis = { x: p2.y - p1.y, y: p1.x - p2.x }; // 法线方向
    axes.push(axis);
  }
  for (let i = 0; i < polygon2.length; i++) {
    const p1 = polygon2[i];
    const p2 = polygon2[(i + 1) % polygon2.length];
    const axis = { x: p2.y - p1.y, y: p1.x - p2.x }; // 法线方向
    axes.push(axis);
  }

  // 判断是否存在分离轴
  for (const axis of axes) {
    if (isSeparatingAxis(polygon1, polygon2, axis)) {
      return false; // 存在分离轴，不相交
    }
  }

  return true; // 不存在分离轴，相交
}

// 使用示例
const polygon1 = [{ x: 10, y: 10 }, { x: 60, y: 10 }, { x: 60, y: 60 }, { x: 10, y: 60 }];
const polygon2 = [{ x: 40, y: 40 }, { x: 90, y: 40 }, { x: 90, y: 90 }, { x: 40, y: 90 }];

if (satCollision(polygon1, polygon2)) {
  console.log("SAT Collision detected!");
}

function pixelCollision(image1, image2, x1, y1, x2, y2) {
  // 获取两个图像的重叠区域
  const overlapXStart = Math.max(x1, x2);
  const overlapYStart = Math.max(y1, y2);
  const overlapXEnd = Math.min(x1 + image1.width, x2 + image2.width);
  const overlapYEnd = Math.min(y1 + image1.height, y2 + image2.height);

  // 遍历重叠区域的每个像素
  for (let x = overlapXStart; x < overlapXEnd; x++) {
    for (let y = overlapYStart; y < overlapYEnd; y++) {
      // 获取两个图像在当前像素位置的颜色值
      const color1 = getImagePixel(image1, x - x1, y - y1);
      const color2 = getImagePixel(image2, x - x2, y - y2);

      // 判断是否有像素重叠（例如，判断alpha值是否都大于0）
      if (color1.alpha > 0 && color2.alpha > 0) {
        return true; // 像素重叠，发生碰撞
      }
    }
  }

  return false; // 没有像素重叠，没有发生碰撞
}

// 使用示例
// 需要先加载图像数据
const image1 = loadImage("image1.png");
const image2 = loadImage("image2.png");

image1.onload = () => {
  image2.onload = () => {
    if (pixelCollision(image1, image2, 10, 10, 40, 40)) {
      console.log("Pixel Collision detected!");
    }
  };
};