解决p5.js中同类多对象碰撞检测的策略与实践

class Paddle {
  constructor(x, y, w, h, isPlayer = false, color = '#22ff2266') {
    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;
    this.isPlayer = isPlayer; // True for player, false for opponent
    this.color = color;
    this.speed = 5; // Paddle movement speed
  }

  show() {
    noStroke();
    fill(this.color);
    rect(this.x, this.y, this.width, this.height);
  }

  move(ballY = null) {
    if (this.isPlayer) {
      // Player paddle movement
      if (keyIsDown(DOWN_ARROW)) this.y += this.speed;
      if (keyIsDown(UP_ARROW)) this.y -= this.speed;
    } else {
      // Opponent AI movement (simple follow)
      if (ballY !== null) {
        this.y = ballY - this.height / 2;
      }
    }
    // Limit paddle position
    this.y = constrain(this.y, 0, height - this.height);
  }
}

class Ball {
  constructor(x, y, size, color = '#ff222266') {
    this.x = x;
    this.y = y;
    this.size = size;
    this.speedX = 5;
    this.speedY = 5;
    this.color = color;
  }

  show() {
    noStroke();
    fill(this.color);
    rect(this.x, this.y, this.size, this.size);
  }

  move() {
    this.x += this.speedX;
    this.y += this.speedY;

    // Bounce off top/bottom walls
    if (this.y < 0 || this.y > height - this.size) {
      this.speedY *= -1;
    }
  }

  reset() {
    this.x = width / 2;
    this.y = height / 2;
    this.speedX = 5 * (random() > 0.5 ? 1 : -1); // Random initial direction
    this.speedY = 5 * (random() > 0.5 ? 1 : -1);
  }
}

let paddles = [];
let balls = [];
let score = 0; // Example score

function setup() {
  createCanvas(600, 600);
  rectMode(CORNER); // Ensure consistent rect mode

  // Create initial player paddle, opponent paddle, and ball
  paddles.push(new Paddle(20, height / 2 - 30, 10, 60, true, color(255, 229, 236))); // Player paddle
  paddles.push(new Paddle(width - 30, height / 2 - 30, 10, 60, false, color(255, 229, 236))); // Opponent paddle
  balls.push(new Ball(width / 2, height / 2, 10, color(255, 255, 255))); // White ball
}

function draw() {
  background(255, 194, 209);
  drawGameElements(); // Draw score, middle line etc.

  // Update and display paddles
  for (let paddle of paddles) {
    // For opponent, pass the first ball's Y position
    paddle.move(balls.length > 0 ? balls[0].y : null);
    paddle.show();
  }

  // Update and display balls, and check collisions
  for (let ball of balls) {
    ball.move();
    ball.show();

    // Check collision with walls (score logic)
    if (ball.x < 0) { // Ball goes past player's side
      ball.reset();
      score = 0; // Reset score
      // Remove extra balls if any
      while (balls.length > 1) {
        balls.pop();
      }
      // Reset paddle sizes if they were changed
      for (let p of paddles) {
        if (p.isPlayer) p.height = 60;
      }
    } else if (ball.x > width - ball.size) { // Ball goes past opponent's side
      ball.speedX *= -1; // Opponent wall bounce (or reset logic)
    }

    // --- Core Collision Logic: Check this ball against ALL paddles ---
    for (let paddle of paddles) {
      // collideRectRect(x, y, width, height, x2, y2, width2, height2)
      let hit = collideRectRect(ball.x, ball.y, ball.size, ball.size,
                                paddle.x, paddle.y, paddle.width, paddle.height);

      if (hit) {
        ball.speedX *= -1.01; // Reverse X direction and slightly increase speed
        ball.speedY *= 1.01; // Slightly increase Y speed
        // Only increase score if it's the player's paddle hitting the ball
        if (paddle.isPlayer) {
          score++;
          // Example: Add a new ball at score 5
          if (score === 5 && balls.length < 2) {
            balls.push(new Ball(width / 2, height / 2, 10, color(0, 0, 0))); // Black ball
            // Optionally make player paddle larger
            for (let p of paddles) {
              if (p.isPlayer) p.height = 100;
            }
          }
        }
      }
    }
  }

  // Display score
  fill(255, 229, 236);
  textSize(35);
  textAlign(CENTER);
  text(score, width / 2, height / 8 + 12);
}

// Helper function for game visuals
function drawGameElements() {
  rectMode(CENTER);
  fill(255, 229, 236);
  rect(width / 2, height / 8, 100, 50); // score box
  rect(width / 2, height / 2, 5, height); // middle line
  rectMode(CORNER);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
<script src="https://unpkg.com/p5.collide2d"></script>