js小球之间的碰撞

在JavaScript中实现小球之间的碰撞检测和处理，通常涉及以下几个基础概念：

基础概念

碰撞检测：判断两个小球是否发生了接触。
碰撞响应：当检测到碰撞时，如何处理两个小球的物理反应，如速度的改变。

优势

实时交互：可以实现动态的、实时的小球碰撞效果。
模拟真实世界：通过碰撞检测和响应，可以模拟物体在现实世界中的相互作用。

类型

圆形碰撞检测：适用于小球这种圆形物体的碰撞检测。
边界碰撞检测：处理小球与画布边界的碰撞。

应用场景

游戏开发：如弹球游戏、台球模拟等。
物理模拟：用于教育和科学演示中的物理现象模拟。

实现步骤

定义小球对象：包括位置（x, y）、速度（vx, vy）和半径（radius）。
碰撞检测：使用距离公式检测两个小球是否相交。
碰撞响应：根据碰撞的方向和速度，调整小球的速度向量。

示例代码

class Ball {
  constructor(x, y, vx, vy, radius) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.radius = radius;
  }

  draw(ctx) {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
  }

  update(canvas) {
    this.x += this.vx;
    this.y += this.vy;
    // 边界碰撞检测
    if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
      this.vx = -this.vx;
    }
    if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
      this.vy = -this.vy;
    }
  }
}

function collisionDetection(ball1, ball2) {
  let dx = ball2.x - ball1.x;
  let dy = ball2.y - ball1.y;
  let distance = Math.sqrt(dx * dx + dy * dy);
  return distance < ball1.radius + ball2.radius;
}

function handleCollision(ball1, ball2) {
  let dx = ball2.x - ball1.x;
  let dy = ball2.y - ball1.y;
  let distance = Math.sqrt(dx * dx + dy * dy);
  let overlap = 0.5 * (distance - ball1.radius - ball2.radius);

  // 移动小球以避免重叠
  let normX = dx / distance;
  let normY = dy / distance;
  ball1.x -= overlap * normX;
  ball1.y -= overlap * normY;
  ball2.x += overlap * normX;
  ball2.y += overlap * normY;

  // 碰撞响应
  let vxTotal = ball1.vx - ball2.vx;
  let vyTotal = ball1.vy - ball2.vy;
  let vxRelative = dx / distance * vxTotal + dy / distance * vyTotal;
  let vyRelative = dy / distance * vxTotal - dx / distance * vyTotal;

  let impulse = 2 * vxRelative / (1 / ball1.mass + 1 / ball2.mass);
  ball1.vx -= impulse * (1 / ball1.mass) * dx / distance;
  ball1.vy -= impulse * (1 / ball1.mass) * dy / distance;
  ball2.vx += impulse * (1 / ball2.mass) * dx / distance;
  ball2.vy += impulse * (1 / ball2.mass) * dy / distance;
}

// 示例使用
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const ball1 = new Ball(50, 50, 2, 1, 10);
const ball2 = new Ball(100, 100, -1, -2, 15);

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ball1.update(canvas);
  ball2.update(canvas);
  ball1.draw(ctx);
  ball2.draw(ctx);

  if (collisionDetection(ball1, ball2)) {
    handleCollision(ball1, ball2);
  }

  requestAnimationFrame(animate);
}

animate();