用js设置两球碰撞反弹

基础概念

在物理学中，当两个物体相互碰撞时，它们会根据碰撞的类型（弹性碰撞或非弹性碰撞）和碰撞前的速度改变方向和速度。在计算机图形学和游戏开发中，模拟这种碰撞反弹效果通常涉及到计算碰撞后的新位置和速度。

类型

完全弹性碰撞：碰撞前后动能守恒。
非完全弹性碰撞：部分动能转化为内能，如热能。

应用场景

游戏开发：如乒乓球、台球等游戏。
模拟软件：物理实验模拟。
动画制作：创建逼真的动画效果。

示例代码

以下是一个简单的JavaScript示例，使用HTML5 Canvas来模拟两个球的碰撞反弹：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ball Collision</title>
<style>
  canvas {
    border: 1px solid black;
  }
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  class Ball {
    constructor(x, y, radius, dx, dy) {
      this.x = x;
      this.y = y;
      this.radius = radius;
      this.dx = dx;
      this.dy = dy;
    }

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

    update() {
      if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
        this.dx = -this.dx;
      }
      if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
        this.dy = -this.dy;
      }
      this.x += this.dx;
      this.y += this.dy;
    }
  }

  const ball1 = new Ball(50, 50, 20, 5, 5);
  const ball2 = new Ball(150, 150, 20, -5, -5);

  function checkCollision(ball1, ball2) {
    const dx = ball2.x - ball1.x;
    const dy = ball2.y - ball1.y;
    const distance = Math.sqrt(dx * dx + dy * dy);
    const minDistance = ball1.radius + ball2.radius;

    if (distance < minDistance) {
      // Swap velocities for a simple elastic collision
      [ball1.dx, ball2.dx] = [ball2.dx, ball1.dx];
      [ball1.dy, ball2.dy] = [ball2.dy, ball1.dy];
    }
  }

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

  draw();
</script>
</body>
</html>