动手实践：在屏幕上随机分布泡泡

前端

2023-10-11 14:03:54

引言

最近工作上需要做一个功能，要在屏幕上随机分布几个大小不一的泡泡，这些泡泡不能相互覆盖，或者只能覆盖小部分。后面这些泡泡之间会有关系链，所有其他泡泡都与其中一个泡泡相关联。本文将提供详细的步骤和示例代码，帮助您轻松实现此功能。

实现步骤

初始化画布

首先，需要创建一个画布来容纳这些泡泡。可以使用 HTML 的<canvas>元素来实现。<canvas>元素是一个矩形区域，可以用来绘制图形。

随机生成泡泡

接下来，需要随机生成一些泡泡。可以为此创建一个函数，该函数将生成一个指定数量和大小的泡泡。泡泡的位置和大小可以使用随机数来生成。

检测泡泡碰撞

为了防止泡泡相互重叠，需要检测泡泡是否发生碰撞。为此，可以创建一个函数来计算两个泡泡之间的距离。如果两个泡泡之间的距离小于它们的半径之和，则它们就会发生碰撞。

调整泡泡位置

如果两个泡泡发生碰撞，需要调整其中一个泡泡的位置，使其不再与另一个泡泡发生碰撞。可以为此创建一个函数，该函数将计算一个新的位置，使泡泡不再与另一个泡泡发生碰撞。

绘制泡泡

最后，需要将这些泡泡绘制到画布上。可以使用 Canvas API 来实现。Canvas API 提供了一系列方法，可以用来绘制各种图形，包括圆形。

示例代码

以下是一段示例代码，演示了如何使用 JavaScript 在屏幕上随机分布泡泡：

// 创建画布
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// 泡泡类
function Bubble(x, y, radius) {
  this.x = x;
  this.y = y;
  this.radius = radius;
}

// 绘制泡泡
Bubble.prototype.draw = function() {
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
  ctx.fillStyle = "blue";
  ctx.fill();
};

// 生成泡泡
function generateBubbles(numBubbles) {
  var bubbles = [];
  for (var i = 0; i < numBubbles; i++) {
    var radius = Math.random() * 20 + 10;
    var x = Math.random() * (canvas.width - radius * 2) + radius;
    var y = Math.random() * (canvas.height - radius * 2) + radius;
    var bubble = new Bubble(x, y, radius);
    bubbles.push(bubble);
  }
  return bubbles;
}

// 检测泡泡碰撞
function checkCollision(bubble1, bubble2) {
  var distance = Math.sqrt(Math.pow(bubble1.x - bubble2.x, 2) + Math.pow(bubble1.y - bubble2.y, 2));
  if (distance < bubble1.radius + bubble2.radius) {
    return true;
  } else {
    return false;
  }
}

// 调整泡泡位置
function adjustPosition(bubble1, bubble2) {
  var dx = bubble1.x - bubble2.x;
  var dy = bubble1.y - bubble2.y;
  var distance = Math.sqrt(dx * dx + dy * dy);
  var newX = bubble1.x + (dx / distance) * (bubble1.radius + bubble2.radius);
  var newY = bubble1.y + (dy / distance) * (bubble1.radius + bubble2.radius);
  bubble1.x = newX;
  bubble1.y = newY;
}

// 主函数
function main() {
  // 生成泡泡
  var bubbles = generateBubbles(10);

  // 检测泡泡碰撞
  for (var i = 0; i < bubbles.length; i++) {
    for (var j = i + 1; j < bubbles.length; j++) {
      if (checkCollision(bubbles[i], bubbles[j])) {
        // 调整泡泡位置
        adjustPosition(bubbles[i], bubbles[j]);
      }
    }
  }

  // 绘制泡泡
  for (var i = 0; i < bubbles.length; i++) {
    bubbles[i].draw();
  }
}

// 调用主函数
main();