JS 气泡碰撞|极客笔记

JS 气泡碰撞

在网页设计中，经常会使用气泡效果来吸引用户的注意力，而当多个气泡同时出现在页面上时，可能会发生碰撞的情况。在本文中，我们将详细介绍如何使用 JavaScript 实现气泡碰撞效果，让多个气泡在页面上自由移动并避免碰撞。

实现思路

实现气泡碰撞效果的基本思路如下：

创建一个气泡对象（Bubble）表示每一个气泡，包括位置、大小、速度等属性，并提供移动方法。
创建多个气泡对象并定时更新它们的位置，让它们在页面上移动。
检测每个气泡之间的距离，若距离小于气泡的半径之和，则认为发生碰撞。
当发生碰撞时，调整碰撞的两个气泡的速度，让它们分开，避免继续碰撞。

实现步骤

步骤一：创建气泡对象

首先，我们需要创建一个气泡对象来表示每一个气泡，包括位置、大小、速度等属性，并提供移动方法。下面是一个简单的气泡对象代码示例：

class Bubble {
  constructor(x, y, radius, speedX, speedY) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.speedX = speedX;
    this.speedY = speedY;
  }

  move() {
    this.x += this.speedX;
    this.y += this.speedY;
  }
}

步骤二：创建多个气泡对象并更新位置

接下来，我们创建多个气泡对象，并使用 requestAnimationFrame 方法来定时更新它们的位置。在更新位置的过程中，我们还需要检测每两个气泡之间的距离，判断是否发生碰撞。下面是一个简单的示例代码：

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');

const bubbles = [];

function createBubble() {
  const x = Math.random() * canvas.width;
  const y = Math.random() * canvas.height;
  const radius = Math.random() * 20 + 10;
  const speedX = Math.random() * 2 - 1;
  const speedY = Math.random() * 2 - 1;

  const bubble = new Bubble(x, y, radius, speedX, speedY);
  bubbles.push(bubble);
}

function drawBubble(bubble) {
  ctx.beginPath();
  ctx.arc(bubble.x, bubble.y, bubble.radius, 0, Math.PI * 2);
  ctx.fillStyle = '#0000ff';
  ctx.fill();
}

function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  bubbles.forEach(bubble => {
    bubble.move();
    drawBubble(bubble);
  });

  requestAnimationFrame(update);
}

canvas.width = 800;
canvas.height = 600;

for (let i = 0; i < 10; i++) {
  createBubble();
}

update();

在上面的代码中，我们首先创建了一个画布并获取其 2D 上下文对象，然后定义了 Bubble 类和相应的绘制、更新位置的方法。最后，我们创建了 10 个随机位置和速度的气泡对象，并通过 requestAnimationFrame 方法来不断更新它们的位置。

步骤3：碰撞检测和处理

在更新位置的过程中，我们需要检测每两个气泡之间的距离，判断是否发生碰撞。若两个气泡之间的距离小于它们的半径之和，就表示发生了碰撞。在碰撞发生时，我们需要调整碰撞的两个气泡的速度，使它们分开。下面是一个简单的碰撞检测和处理代码示例：

function checkCollision(bubble1, bubble2) {
  const dx = bubble1.x - bubble2.x;
  const dy = bubble1.y - bubble2.y;
  const distance = Math.sqrt(dx * dx + dy * dy);

  if (distance < bubble1.radius + bubble2.radius) {
    const angle = Math.atan2(dy, dx);

    bubble1.speedX = Math.cos(angle);
    bubble1.speedY = Math.sin(angle);
    bubble2.speedX = -Math.cos(angle);
    bubble2.speedY = -Math.sin(angle);
  }
}

function checkCollisions() {
  for (let i = 0; i < bubbles.length; i++) {
    for (let j = i + 1; j < bubbles.length; j++) {
      checkCollision(bubbles[i], bubbles[j]);
    }
  }
}

function update() {
  // 省略之前的代码...

  checkCollisions();

  requestAnimationFrame(update);
}

在上述代码中，我们定义了 checkCollision 方法来检测两个气泡之间的距离，并在发生碰撞时调整它们的速度。然后，在 update 方法中调用 checkCollisions 方法来检测所有气泡之间的碰撞情况。

https://codepen.io/pen/?template=ExWZYBJ)