如何用JavaScript实现30个随机.anger元素无碰撞布局及碰撞检测？

当然可以实现！这个需求属于前端里很常见的「无碰撞随机布局」场景，结合你已经写的开头代码，咱们完全可以把整个逻辑补全落地。下面我会一步步拆解实现思路，再给出完整的代码示例：

要完成这个需求，我们需要三个关键步骤：

• 实现矩形碰撞检测函数：这是判断元素是否重叠的核心逻辑
• 生成单个.anger元素的随机尺寸与位置：要确保元素完全在容器内
• 循环验证并放置元素：每次生成候选元素后，检查是否与头像、已放置元素碰撞，通过验证再添加到容器

function loadAngers() {
  const wrapper = document.getElementById('angerContainer');
  const avatar = document.getElementById('picAvatar');
  const rectAvatar = avatar.getBoundingClientRect();
  const rectWrapper = wrapper.getBoundingClientRect();
  
  // 把头像的视口坐标转换成容器内的相对坐标（避免容器滚动或页面偏移影响计算）
  const avatarRelativeRect = {
    left: rectAvatar.left - rectWrapper.left,
    top: rectAvatar.top - rectWrapper.top,
    right: rectAvatar.right - rectWrapper.left,
    bottom: rectAvatar.bottom - rectWrapper.top,
    width: rectAvatar.width,
    height: rectAvatar.height
  };

  const angerCount = 30; // 需要生成的元素数量
  const minSize = 20; // 元素最小尺寸（px）
  const maxSize = 50; // 元素最大尺寸（px）
  const placedAngers = []; // 存储已放置元素的矩形信息，用于碰撞检测
  const maxAttempts = 1000; // 防止死循环的最大尝试次数（容器太小时避免无限循环）
  let attempts = 0;

  // 核心：检测两个矩形是否发生碰撞
  function isColliding(rect1, rect2) {
    // 只要满足任意一个不碰撞的条件，就返回false；否则返回true（碰撞）
    return !(
      rect1.right < rect2.left ||
      rect1.left > rect2.right ||
      rect1.bottom < rect2.top ||
      rect1.top > rect2.bottom
    );
  }

  // 循环生成元素，直到达到目标数量或尝试次数耗尽
  while (placedAngers.length < angerCount && attempts < maxAttempts) {
    attempts++;
    // 1. 生成随机尺寸
    const width = Math.floor(Math.random() * (maxSize - minSize + 1)) + minSize;
    const height = Math.floor(Math.random() * (maxSize - minSize + 1)) + minSize;
    // 2. 生成容器内的随机位置（确保元素完全在容器内，不会超出边界）
    const left = Math.floor(Math.random() * (rectWrapper.width - width));
    const top = Math.floor(Math.random() * (rectWrapper.height - height));
    // 3. 组装当前候选元素的矩形信息
    const currentRect = {
      left,
      top,
      right: left + width,
      bottom: top + height,
      width,
      height
    };

    // 4. 碰撞验证：先检查是否和头像重叠
    if (isColliding(currentRect, avatarRelativeRect)) continue;
    // 再检查是否和已放置的元素重叠
    let hasCollision = false;
    for (const angerRect of placedAngers) {
      if (isColliding(currentRect, angerRect)) {
        hasCollision = true;
        break;
      }
    }
    if (hasCollision) continue;

    // 5. 所有验证通过，创建并添加元素到容器
    const angerImg = document.createElement('img');
    angerImg.className = 'anger';
    angerImg.src = '你的愤怒表情图片路径'; // 替换成你的实际图片地址
    // 用绝对定位固定元素位置
    angerImg.style.position = 'absolute';
    angerImg.style.left = `${left}px`;
    angerImg.style.top = `${top}px`;
    angerImg.style.width = `${width}px`;
    angerImg.style.height = `${height}px`;
    wrapper.appendChild(angerImg);
    // 记录这个元素的矩形信息，供后续元素碰撞检测使用
    placedAngers.push(currentRect);
  }

  // 可选：如果尝试次数用完还没放够元素，给出提示
  if (placedAngers.length < angerCount) {
    console.warn(`容器空间不足，仅成功放置了${placedAngers.length}个.anger元素`);
  }
}

// 页面DOM加载完成后执行生成逻辑
window.addEventListener('DOMContentLoaded', loadAngers);

• 容器#angerContainer必须设置position: relative;：因为内部的.anger元素用了绝对定位，这样元素的位置才会相对于容器计算，不会乱跑。
• 可调整参数：根据你的实际需求修改minSize、maxSize、angerCount这些值，适配不同的容器大小和视觉需求。
• 防死循环机制：maxAttempts是为了避免容器空间过小、无法放下30个元素时出现无限循环，你可以根据情况调整这个数值。
• 动态碰撞检测：如果后续需要检测.anger元素的位置/尺寸变化是否发生碰撞，直接复用isColliding函数即可。

内容的提问来源于stack exchange，提问作者Taufik Nur Rahmanda