js两个小球碰撞反弹

基础概念

在JavaScript中模拟两个小球的碰撞反弹，涉及到物理模拟的基本概念，如速度、加速度、碰撞检测和碰撞响应。小球在屏幕上的运动可以通过改变其x和y坐标来模拟，而碰撞反弹则涉及到当小球碰到边界或其他小球时，其速度方向的改变。

类型

边界碰撞：小球与屏幕边界的碰撞。
小球间碰撞：两个或多个小球之间的碰撞。

应用场景

游戏开发：在许多游戏中，物体间的碰撞反弹是基本的游戏机制。
教育工具：用于教学物理运动规律和编程逻辑。
动画制作：创建逼真的物理动画效果。

示例代码

以下是一个简单的JavaScript示例，用于模拟两个小球在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="500" height="500"></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, 10, 2, 2);
  const ball2 = new Ball(100, 100, 10, -2, -2);
  
  function collisionDetection() {
    let dx = ball1.x - ball2.x;
    let dy = ball1.y - ball2.y;
    let distance = Math.sqrt(dx * dx + dy * dy);
    
    if (distance < ball1.radius + ball2.radius) {
      let tempDx = ball1.dx;
      let tempDy = ball1.dy;
      ball1.dx = ball2.dx;
      ball1.dy = ball2.dy;
      ball2.dx = tempDx;
      ball2.dy = tempDy;
    }
  }
  
  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ball1.draw();
    ball2.draw();
    ball1.update();
    ball2.update();
    collisionDetection();
    requestAnimationFrame(draw);
  }
  
  draw();
</script>
</body>
</html>