JS实现小球的弹性碰撞效果

JS实现小球的弹性碰撞效果是一项比较基础的前端交互效果，而且很实用。以下是实现该效果的几个步骤：

步骤一：绘制小球

在 HTML 中添加一个 canvas 元素，然后在 JS 中使用 Canvas API 绘制小球。例如：

<canvas id="canvas" width="500" height="500"></canvas>

<script>
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');

  const ball = {
    x: 50,
    y: 50,
    r: 20,
    vx: 5,
    vy: 2
  };

  function drawBall() {
    context.beginPath();
    context.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);
    context.closePath();
    context.fill();
  }

  function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    ball.x += ball.vx;
    ball.y += ball.vy;
    requestAnimationFrame(draw);
  }

  draw();
</script>

ball 是一个球的对象，包含了球的位置、半径和速度。drawBall() 函数用来绘制小球，draw() 函数用来不停地绘制小球和更新小球的状态。

步骤二：添加碰撞检测

在小球的运动过程中，我们需要检测小球是否与墙壁发生碰撞。如果小球碰到了墙壁，我们需要把小球的速度取反，以实现弹性碰撞效果。例如：

function checkCollision() {
  if(ball.x + ball.vx > canvas.width - ball.r || ball.x + ball.vx < ball.r) {
    ball.vx = -ball.vx;
  }
  if(ball.y + ball.vy > canvas.height - ball.r || ball.y + ball.vy < ball.r) {
    ball.vy = -ball.vy;
  }
}

function draw() { 
  // ...
  checkCollision();
  ball.x += ball.vx;
  ball.y += ball.vy;
  requestAnimationFrame(draw);
}

checkCollision() 函数用来检测球体是否与边界相交，并修改球的速度以实现弹性碰撞效果。在这个函数中，我们首先判断小球是否触碰到了右边界或左边界，如果是，则将小球的速度 x 分量取反。接着，我们检测小球是否碰到了下边界或上边界，如果是，则将小球的速度 y 分量取反。

步骤三：添加障碍物

除了墙壁，我们还可以添加一些障碍物，用来增加小球的碰撞效果。例如，我们可以在 canvas 中添加一个矩形，并检测小球是否与矩形相交。如果小球触碰到了该矩形，我们也需要将小球的速度取反以实现弹性碰撞。以下是示例代码：

const obstacle = {
  x: 150,
  y: 200,
  width: 100,
  height: 100
};

function drawObstacle() {
  context.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
}

function checkCollisionWithObstacle() {
  if (ball.x + ball.r > obstacle.x &&
      ball.x - ball.r < obstacle.x + obstacle.width &&
      ball.y + ball.r > obstacle.y &&
      ball.y - ball.r < obstacle.y + obstacle.height) {
    // 检测到碰撞
    const disX = Math.abs(ball.x - obstacle.x - obstacle.width/2);
    const disY = Math.abs(ball.y - obstacle.y - obstacle.height/2);

    if(disX <= (obstacle.width/2 + ball.r) && disY <= (obstacle.height/2 + ball.r)) {
      if(disX > disY) {
        ball.vx = -ball.vx;
      } else {
        ball.vy = -ball.vy;
      }
    }
  }
}

function draw() { 
  // ...
  drawObstacle();
  checkCollisionWithObstacle();
  checkCollision();
  ball.x += ball.vx;
  ball.y += ball.vy;
  requestAnimationFrame(draw);
}

在此示例中，在画布上绘制了一个矩形障碍物，并添加了 checkCollisionWithObstacle() 函数来检测小球是否与矩形相交。如果小球与障碍物相交，我们需要找出两者之间的距离，以便确定小球相对于障碍物的位置。然后，根据球体与障碍物相交时的位置不同，我们将小球的速度 x 或 y 分量取反，实现弹性碰撞效果。

完成上述步骤后，你就可以得到一个具有弹性碰撞效果的小球了。