用一分钟，搞定你的Canvas动画（二）

2024-02-24 22:37:19

碰撞检测

在Canvas动画中，碰撞检测是一个非常重要的概念。它允许我们模拟物体之间的碰撞并做出相应的反应，从而使动画更加逼真和互动。碰撞检测可以应用于各种类型的动画，例如游戏、模拟和可视化。

弹性碰撞

在弹性碰撞中，碰撞后物体动能守恒，即碰撞前后物体的总动能不变。这意味着碰撞不会导致动能损失。在Canvas动画中，我们可以使用以下公式来计算弹性碰撞后的物体速度：

v1' = (m1 - m2) / (m1 + m2) * v1 + (2 * m2 / (m1 + m2)) * v2
v2' = (2 * m1 / (m1 + m2)) * v1 + (m2 - m1) / (m1 + m2) * v2

其中：

v1' 是物体1碰撞后的速度
v2' 是物体2碰撞后的速度
v1 是物体1碰撞前速度
v2 是物体2碰撞前速度
m1 是物体1的质量
m2 是物体2的质量

非弹性碰撞

在非弹性碰撞中，碰撞后物体动能不守恒，即碰撞导致动能损失。在Canvas动画中，我们可以使用以下公式来计算非弹性碰撞后的物体速度：

v' = (m1 * v1 + m2 * v2) / (m1 + m2)

其中：

v' 是物体碰撞后的速度
v1 是物体1碰撞前速度
v2 是物体2碰撞前速度
m1 是物体1的质量
m2 是物体2的质量

实例代码

以下是如何在Canvas动画中实现碰撞检测的示例代码：

// 创建Canvas元素
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 创建两个物体
var ball1 = {
  x: 100,
  y: 100,
  radius: 20,
  vx: 5,
  vy: 5
};

var ball2 = {
  x: 200,
  y: 200,
  radius: 20,
  vx: -5,
  vy: -5
};

// 更新物体位置
function update() {
  // 更新物体1的位置
  ball1.x += ball1.vx;
  ball1.y += ball1.vy;

  // 更新物体2的位置
  ball2.x += ball2.vx;
  ball2.y += ball2.vy;

  // 检测碰撞
  if (isColliding(ball1, ball2)) {
    // 计算碰撞后的速度
    var v1x = (m1 - m2) / (m1 + m2) * ball1.vx + (2 * m2 / (m1 + m2)) * ball2.vx;
    var v1y = (m1 - m2) / (m1 + m2) * ball1.vy + (2 * m2 / (m1 + m2)) * ball2.vy;
    var v2x = (2 * m1 / (m1 + m2)) * ball1.vx + (m2 - m1) / (m1 + m2) * ball2.vx;
    var v2y = (2 * m1 / (m1 + m2)) * ball1.vy + (m2 - m1) / (m1 + m2) * ball2.vy;

    // 更新物体1的速度
    ball1.vx = v1x;
    ball1.vy = v1y;

    // 更新物体2的速度
    ball2.vx = v2x;
    ball2.vy = v2y;
  }

  // 渲染物体
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'red';
  ctx.beginPath();
  ctx.arc(ball1.x, ball1.y, ball1.radius, 0, 2 * Math.PI);
  ctx.fill();

  ctx.fillStyle = 'blue';
  ctx.beginPath();
  ctx.arc(ball2.x, ball2.y, ball2.radius, 0, 2 * Math.PI);
  ctx.fill();

  // 循环调用update()函数
  requestAnimationFrame(update);
}

// 启动动画
update();

// 检测两个物体是否碰撞
function isColliding(ball1, ball2) {
  var dx = ball1.x - ball2.x;
  var dy = ball1.y - ball2.y;
  var distance = Math.sqrt(dx * dx + dy * dy);

  return distance < ball1.radius + ball2.radius;
}