Update index.html

index.html

@@ -209,6 +209,52 @@
   
   // Tạo 8 ô mini với video ngẫu nhiên
   const miniBoxCount = 8;
+  const miniBoxSize = 120;
+  const spawnMargin = 100; // Khoảng cách tối thiểu giữa các ô
+  
+  // Hàm kiểm tra va chạm giữa 2 ô
+  function isOverlapping(x1, y1, x2, y2, size1, size2) {
+    const distance = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+    const minDistance = (size1 + size2) / 2 + spawnMargin;
+    return distance < minDistance;
+  }
+  
+  // Hàm tìm vị trí không bị chồng lên
+  function findNonOverlappingPosition(existingBoxes, maxAttempts = 100) {
+    for (let attempt = 0; attempt < maxAttempts; attempt++) {
+      const x = Math.random() * (window.innerWidth - 200) + 100;
+      const y = Math.random() * (window.innerHeight - 200) + 100;
+      
+      let hasOverlap = false;
+      
+      // Kiểm tra với box chính
+      const mainRect = mainBox.element.getBoundingClientRect();
+      if (isOverlapping(x, y, mainBox.x, mainBox.y, miniBoxSize, Math.max(mainRect.width, mainRect.height))) {
+        hasOverlap = true;
+      }
+      
+      // Kiểm tra với các mini box đã tạo
+      for (let box of existingBoxes) {
+        if (isOverlapping(x, y, box.x, box.y, miniBoxSize, miniBoxSize)) {
+          hasOverlap = true;
+          break;
+        }
+      }
+      
+      if (!hasOverlap) {
+        return { x, y };
+      }
+    }
+    
+    // Nếu không tìm được vị trí sau nhiều lần thử, trả về vị trí ngẫu nhiên
+    return {
+      x: Math.random() * (window.innerWidth - 200) + 100,
+      y: Math.random() * (window.innerHeight - 200) + 100
+    };
+  }
+  
+  const miniBoxes = [];
+  
   for (let i = 0; i < miniBoxCount; i++) {
     const miniBox = document.createElement('div');
     miniBox.className = 'mini-box';
@@ -224,11 +270,13 @@
     
     document.body.appendChild(miniBox);
     
-    // Vị trí ngẫu nhiên
+    // Tìm vị trí không bị chồng lên
+    const position = findNonOverlappingPosition(miniBoxes);
+    
     const boxData = {
       element: miniBox,
-      x: Math.random() * (window.innerWidth - 150) + 75,
-      y: Math.random() * (window.innerHeight - 150) + 75,
+      x: position.x,
+      y: position.y,
       velX: (Math.random() - 0.5) * 5,
       velY: (Math.random() - 0.5) * 5,
       isDragging: false,
@@ -236,6 +284,7 @@
       dragOffsetY: 0
     };
     
+    miniBoxes.push(boxData);
     boxes.push(boxData);
     
     // Thêm event listener cho mini box