Update index.html

index.html

@@ -57,25 +57,6 @@
     .container:active {
       cursor: grabbing;
     }
-    
-    /* Ô mini */
-    .mini-box {
-      position: absolute;
-      border: 3px solid #8B4513;
-      padding: 15px;
-      border-radius: 12px;
-      background-color: rgba(255, 255, 255, 0.25);
-      box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
-      overflow: hidden;
-      cursor: grab;
-      user-select: none;
-      width: 120px;
-      height: 120px;
-    }
-    
-    .mini-box:active {
-      cursor: grabbing;
-    }
 
     /* Video nền cho container */
     .video-background {
@@ -191,127 +172,34 @@
   let mouseY = window.innerHeight / 2;
   let spiderX = mouseX, spiderY = mouseY;
   
-  // Mảng chứa tất cả các box (bao gồm cả box chính và mini boxes)
-  const boxes = [];
-  
-  // Khởi tạo box chính
-  const mainBox = {
-    element: container,
-    x: window.innerWidth / 2,
-    y: window.innerHeight / 2,
-    velX: 0,
-    velY: 0,
-    isDragging: false,
-    dragOffsetX: 0,
-    dragOffsetY: 0
-  };
-  boxes.push(mainBox);
-  
-  // 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';
-    
-    // Random chọn video
-    const videoSrc = Math.random() > 0.5 ? 'video.mp4' : 'Background.mp4';
-    
-    miniBox.innerHTML = `
-      <video class="video-background" autoplay loop muted playsinline preload="auto" loading="eager">
-        <source src="${videoSrc}" type="video/mp4">
-      </video>
-    `;
-    
-    document.body.appendChild(miniBox);
-    
-    // Tìm vị trí không bị chồng lên
-    const position = findNonOverlappingPosition(miniBoxes);
-    
-    const boxData = {
-      element: miniBox,
-      x: position.x,
-      y: position.y,
-      velX: (Math.random() - 0.5) * 5,
-      velY: (Math.random() - 0.5) * 5,
-      isDragging: false,
-      dragOffsetX: 0,
-      dragOffsetY: 0
-    };
-    
-    miniBoxes.push(boxData);
-    boxes.push(boxData);
-    
-    // Thêm event listener cho mini box
-    miniBox.addEventListener('mousedown', (e) => startDrag(e, boxData));
-    miniBox.addEventListener('touchstart', (e) => startDrag(e, boxData));
-  }
-  
+  // Vật lý cho container
+  let containerX = window.innerWidth / 2;
+  let containerY = window.innerHeight / 2;
+  let containerVelX = 0;
+  let containerVelY = 0;
+  let isDragging = false;
+  let dragOffsetX = 0;
+  let dragOffsetY = 0;
   const friction = 0.95;
   const elasticity = 0.7;
   const wallMargin = 50;
   
-  // Khởi tạo vị trí ban đầu cho box chính
-  mainBox.element.style.left = mainBox.x + 'px';
-  mainBox.element.style.top = mainBox.y + 'px';
-  mainBox.element.style.transform = 'translate(-50%, -50%)';
+  // Khởi tạo vị trí ban đầu
+  container.style.left = containerX + 'px';
+  container.style.top = containerY + 'px';
+  container.style.transform = 'translate(-50%, -50%)';
 
-  // Xử lý kéo thả
-  container.addEventListener('mousedown', (e) => startDrag(e, mainBox));
-  container.addEventListener('touchstart', (e) => startDrag(e, mainBox));
+  // Xử lý kéo thả container
+  container.addEventListener('mousedown', startDrag);
+  container.addEventListener('touchstart', startDrag);
   
-  function startDrag(e, box) {
-    box.isDragging = true;
+  function startDrag(e) {
+    isDragging = true;
     const touch = e.type === 'touchstart' ? e.touches[0] : e;
-    box.dragOffsetX = touch.clientX - box.x;
-    box.dragOffsetY = touch.clientY - box.y;
-    box.velX = 0;
-    box.velY = 0;
+    dragOffsetX = touch.clientX - containerX;
+    dragOffsetY = touch.clientY - containerY;
+    containerVelX = 0;
+    containerVelY = 0;
     e.preventDefault();
   }
   
@@ -319,83 +207,72 @@
   document.addEventListener('touchmove', drag);
   
   function drag(e) {
-    boxes.forEach(box => {
-      if (box.isDragging) {
-        const touch = e.type === 'touchmove' ? e.touches[0] : e;
-        const newX = touch.clientX - box.dragOffsetX;
-        const newY = touch.clientY - box.dragOffsetY;
-        
-        box.velX = (newX - box.x) * 0.5;
-        box.velY = (newY - box.y) * 0.5;
-        
-        box.x = newX;
-        box.y = newY;
-      }
-    });
+    if (isDragging) {
+      const touch = e.type === 'touchmove' ? e.touches[0] : e;
+      const newX = touch.clientX - dragOffsetX;
+      const newY = touch.clientY - dragOffsetY;
+      
+      containerVelX = (newX - containerX) * 0.5;
+      containerVelY = (newY - containerY) * 0.5;
+      
+      containerX = newX;
+      containerY = newY;
+    }
   }
   
   document.addEventListener('mouseup', stopDrag);
   document.addEventListener('touchend', stopDrag);
   
   function stopDrag() {
-    boxes.forEach(box => {
-      box.isDragging = false;
-    });
+    isDragging = false;
   }
   
-  // Cập nhật vật lý cho tất cả boxes
-  function updateBoxPhysics() {
-    boxes.forEach(box => {
-      if (!box.isDragging) {
-        // Áp dụng ma sát
-        box.velX *= friction;
-        box.velY *= friction;
-        
-        // Cập nhật vị trí
-        box.x += box.velX;
-        box.y += box.velY;
-        
-        // Kiểm tra va chạm với tường
-        const rect = box.element.getBoundingClientRect();
-        const halfWidth = rect.width / 2;
-        const halfHeight = rect.height / 2;
-        
-        // Tường trái
-        if (box.x - halfWidth < wallMargin) {
-          box.x = wallMargin + halfWidth;
-          box.velX = Math.abs(box.velX) * elasticity;
-        }
-        // Tường phải
-        if (box.x + halfWidth > window.innerWidth - wallMargin) {
-          box.x = window.innerWidth - wallMargin - halfWidth;
-          box.velX = -Math.abs(box.velX) * elasticity;
-        }
-        // Tường trên
-        if (box.y - halfHeight < wallMargin) {
-          box.y = wallMargin + halfHeight;
-          box.velY = Math.abs(box.velY) * elasticity;
-        }
-        // Tường dưới
-        if (box.y + halfHeight > window.innerHeight - wallMargin) {
-          box.y = window.innerHeight - wallMargin - halfHeight;
-          box.velY = -Math.abs(box.velY) * elasticity;
-        }
-      }
+  // Cập nhật vật lý container
+  function updateContainerPhysics() {
+    if (!isDragging) {
+      // Áp dụng ma sát
+      containerVelX *= friction;
+      containerVelY *= friction;
+      
+      // Cập nhật vị trí
+      containerX += containerVelX;
+      containerY += containerVelY;
+      
+      // Kiểm tra va chạm với tường
+      const rect = container.getBoundingClientRect();
+      const halfWidth = rect.width / 2;
+      const halfHeight = rect.height / 2;
       
-      // Cập nhật vị trí DOM
-      if (box.element === container) {
-        box.element.style.left = box.x + 'px';
-        box.element.style.top = box.y + 'px';
-      } else {
-        box.element.style.left = (box.x - 60) + 'px';
-        box.element.style.top = (box.y - 60) + 'px';
+      // Tường trái
+      if (containerX - halfWidth < wallMargin) {
+        containerX = wallMargin + halfWidth;
+        containerVelX = Math.abs(containerVelX) * elasticity;
+      }
+      // Tường phải
+      if (containerX + halfWidth > window.innerWidth - wallMargin) {
+        containerX = window.innerWidth - wallMargin - halfWidth;
+        containerVelX = -Math.abs(containerVelX) * elasticity;
+      }
+      // Tường trên
+      if (containerY - halfHeight < wallMargin) {
+        containerY = wallMargin + halfHeight;
+        containerVelY = Math.abs(containerVelY) * elasticity;
+      }
+      // Tường dưới
+      if (containerY + halfHeight > window.innerHeight - wallMargin) {
+        containerY = window.innerHeight - wallMargin - halfHeight;
+        containerVelY = -Math.abs(containerVelY) * elasticity;
       }
-    });
+    }
+    
+    // Cập nhật vị trí DOM
+    container.style.left = containerX + 'px';
+    container.style.top = containerY + 'px';
     
-    requestAnimationFrame(updateBoxPhysics);
+    requestAnimationFrame(updateContainerPhysics);
   }
   
-  updateBoxPhysics();
+  updateContainerPhysics();
 
   // Nhện con (ở các góc màn hình)
   const babySpiders = [
@@ -447,12 +324,9 @@
   }
 
   document.addEventListener('mousemove', (e) => {
-    mouseX = e.clientX;
-    mouseY = e.clientY;
-    
-    // Chỉ tạo emoji khi không kéo box nào
-    const anyDragging = boxes.some(box => box.isDragging);
-    if (!anyDragging) {
+    if (!isDragging) {
+      mouseX = e.clientX;
+      mouseY = e.clientY;
       createEmoji(e.clientX, e.clientY);
     }
   });
@@ -477,19 +351,10 @@
     spiderY = touch.clientY;
   });
 
-  // Bỏ qua block autoplay của trình duyệt - tối ưu âm thanh
-  let musicStarted = false;
-  function startMusic() {
-    if (!musicStarted) {
-      music.loop = true;
-      music.play().catch(e => console.log('Music autoplay blocked:', e));
-      musicStarted = true;
-    }
-  }
-  
-  document.addEventListener('click', startMusic, { once: true });
-  document.addEventListener('touchstart', startMusic, { once: true });
-  document.addEventListener('keydown', startMusic, { once: true });
+  // Bỏ qua block autoplay của trình duyệt
+  document.addEventListener('click', () => {
+    music.play();
+  }, { once: true });
 
   // Di chuyển nhện lớn
   function moveSpider() {