React+TypeScript生成无重叠随机div的碰撞检测问题求助

核心问题修复与优化 #

1. 正确的矩形碰撞检测逻辑 #

原代码的碰撞判断过于复杂且存在错误，正确的思路是：判断两个矩形是否处于分离状态，如果不满足任何一种分离情况，就说明重叠了。分离状态包括：新矩形在已有矩形的左侧、右侧、上方、下方。

2. 用React状态管理矩形数据 #

避免直接操作DOM，把所有矩形的位置、尺寸存在React状态里，通过状态驱动渲染，完全符合React的数据流理念。

3. 完整的碰撞重试机制 #

生成新矩形时，必须和所有已存在的矩形做碰撞检测，而不是只检查单个。如果碰撞就重新生成参数，直到找到合法位置或判定空间不足。

4. 剩余空间判断 #

设置重试次数上限（比如100次），如果多次尝试都无法生成合法矩形，就判定为容器剩余空间不足，给用户提示。

完整重构代码 #

import { useState } from 'react';

// 定义矩形类型，确保TypeScript类型安全
interface Rectangle {
  id: number;
  x: number;
  y: number;
  width: number;
  height: number;
}

const RectangleGenerator = () => {
  const [rectangles, setRectangles] = useState<Rectangle[]>([]);
  const [tipMessage, setTipMessage] = useState('');
  // 容器固定尺寸
  const WRAPPER_WIDTH = 1920;
  const WRAPPER_HEIGHT = 1080;
  // 矩形尺寸范围
  const MIN_SIZE = 50;
  const MAX_SIZE = 300;
  // 重试上限，防止无限循环
  const MAX_RETRY_TIMES = 100;

  // 生成随机尺寸（50-300px）
  const getRandomSize = () => Math.floor(Math.random() * (MAX_SIZE - MIN_SIZE + 1)) + MIN_SIZE;

  // 碰撞检测：判断新矩形是否与已有矩形重叠
  const checkOverlap = (newRect: Rectangle, existingRects: Rectangle[]) => {
    return existingRects.some(rect => {
      // 四种分离状态：新矩形在已有矩形的左/右/上/下
      const isLeft = newRect.x + newRect.width <= rect.x;
      const isRight = newRect.x >= rect.x + rect.width;
      const isTop = newRect.y + newRect.height <= rect.y;
      const isBottom = newRect.y >= rect.y + rect.height;
      // 不满足任何分离状态，就是重叠
      return !isLeft && !isRight && !isTop && !isBottom;
    });
  };

  const createRandomRectangle = () => {
    setTipMessage('');
    let retryCount = 0;
    let validRect: Rectangle | null = null;

    while (retryCount < MAX_RETRY_TIMES) {
      const width = getRandomSize();
      const height = getRandomSize();
      // 生成合法位置（确保矩形完全在容器内）
      const x = Math.floor(Math.random() * (WRAPPER_WIDTH - width));
      const y = Math.floor(Math.random() * (WRAPPER_HEIGHT - height));
      const candidateRect = { id: Date.now(), x, y, width, height };

      // 检查是否和所有已有矩形不重叠
      if (!checkOverlap(candidateRect, rectangles)) {
        validRect = candidateRect;
        break;
      }
      retryCount++;
    }

    if (validRect) {
      setRectangles(prev => [...prev, validRect]);
    } else {
      setTipMessage('容器剩余空间不足，无法生成新矩形！');
    }
  };

  return (
    <div 
      id="wrapper"
      style={{
        width: `${WRAPPER_WIDTH}px`,
        height: `${WRAPPER_HEIGHT}px`,
        position: 'relative',
        border: '1px solid #ccc',
        overflow: 'hidden',
      }}
    >
      {rectangles.map(rect => (
        <div
          key={rect.id}
          className="Rectangle"
          style={{
            position: 'absolute',
            left: `${rect.x}px`,
            top: `${rect.y}px`,
            width: `${rect.width}px`,
            height: `${rect.height}px`,
            backgroundColor: `hsl(${Math.random() * 360}, 70%, 70%)`,
            border: '1px solid #333',
          }}
        />
      ))}
      <button onClick={createRandomRectangle} style={{ position: 'absolute', top: 10, left: 10, zIndex: 10 }}>
        生成新矩形
      </button>
      {tipMessage && <div style={{ position: 'absolute', top: 50, left: 10, color: 'red', zIndex: 10 }}>{tipMessage}</div>}
    </div>
  );
};

export default RectangleGenerator;

关键改进说明 #

• 碰撞检测简化：通过分离状态反推重叠，逻辑清晰且不容易出错。
• 状态驱动：所有矩形数据存在rectangles状态中，React负责渲染，避免直接操作DOM带来的副作用。
• 防死循环：设置重试上限，多次失败后直接提示空间不足。
• 类型安全：用TypeScript接口定义矩形结构，避免类型错误。

内容的提问来源于stack exchange，提问作者hawa saki