Canvas 实现球体碰撞交互效果：探索物理模拟的魅力

2024-02-10 06:47:09

使用 Canvas 打造栩栩如生的球体碰撞交互

在当今数字世界中，Canvas 作为一种强大的绘图工具脱颖而出，让开发人员能够释放他们的创造力。凭借其令人惊叹的功能，我们能够为应用程序注入栩栩如生的物理模拟效果，例如球体碰撞。本教程将深入探讨如何使用 Canvas 实现迷人的球体碰撞交互，为您的应用程序增添物理定律的魅力。

了解 Canvas 的基础

Canvas 是一个 HTML5 元素，它允许我们在 Web 浏览器中使用 JavaScript 绘制图形。它提供了灵活且高效的绘图 API，使我们能够创建复杂的图形和交互式界面。

要使用 Canvas，我们需要在 HTML 页面中创建一个画布元素并获取其上下文。上下文提供了一组方法和属性，用于绘制形状、线条、文本和其他图形元素。

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

<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");
</script>

设置画布动画

为了让球体移动并相互交互，我们需要设置一个动画循环。动画循环是一个不断重复的函数，它不断地更新画布并绘制新的帧。

function animate() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 更新球体的位置和速度
  updateBalls();

  // 绘制球体
  drawBalls();

  // 重新安排下一次动画循环
  requestAnimationFrame(animate);
}

创建球体对象

为了表示球体，我们将创建 Ball 类。该类将包含球体的属性，例如位置、速度、半径和颜色。

class Ball {
  constructor(x, y, radius, color) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;

    this.vx = Math.random() * 10; // 初始 x 速度
    this.vy = Math.random() * 10; // 初始 y 速度
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    ctx.fillStyle = this.color;
    ctx.fill();
  }

  update() {
    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 checkCollisions() {
  for (let i = 0; i < balls.length; i++) {
    for (let j = i + 1; j < balls.length; j++) {
      const ball1 = balls[i];
      const ball2 = balls[j];

      // 计算两球之间的距离
      const dx = ball1.x - ball2.x;
      const dy = ball1.y - ball2.y;
      const distance = Math.sqrt(dx * dx + dy * dy);

      // 如果距离小于球体半径之和，则发生碰撞
      if (distance < ball1.radius + ball2.radius) {
        // 计算碰撞点处的法向量
        const nx = (ball2.x - ball1.x) / distance;
        const ny = (ball2.y - ball1.y) / distance;

        // 计算碰撞后的速度
        const v1 = reflect(ball1.vx, ball1.vy, nx, ny);
        const v2 = reflect(ball2.vx, ball2.vy, nx, ny);

        // 更新球体的速度
        ball1.vx = v1.x;
        ball1.vy = v1.y;
        ball2.vx = v2.x;
        ball2.vy = v2.y;
      }
    }
  }
}

完成交互

通过结合上述步骤，我们可以创建出令人着迷的球体碰撞交互效果。

// 创建球体数组
const balls = [];
for (let i = 0; i < 10; i++) {
  const ball = new Ball(
    Math.random() * canvas.width,
    Math.random() * canvas.height,
    Math.random() * 50,
    `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`
  );
  balls.push(ball);
}

// 主动画循环
animate();