Update index.html

index.html

@@ -57,6 +57,25 @@
     .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 {
@@ -162,6 +181,9 @@
 </div>
 
 <div id="spider" class="spider">💗</div>
+
+<!-- Ô mini sẽ được tạo động bằng JavaScript -->
+
 <audio id="bg-music" src="music.mp3" preload="auto"></audio>
 
 <script>
@@ -172,34 +194,78 @@
   let mouseY = window.innerHeight / 2;
   let spiderX = mouseX, spiderY = mouseY;
   
-  // 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;
+  // 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;
+  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);
+    
+    // Vị trí ngẫu nhiên
+    const boxData = {
+      element: miniBox,
+      x: Math.random() * (window.innerWidth - 150) + 75,
+      y: Math.random() * (window.innerHeight - 150) + 75,
+      velX: (Math.random() - 0.5) * 5,
+      velY: (Math.random() - 0.5) * 5,
+      isDragging: false,
+      dragOffsetX: 0,
+      dragOffsetY: 0
+    };
+    
+    boxes.push(boxData);
+    
+    // Thêm event listener cho mini box
+    miniBox.addEventListener('mousedown', (e) => startDrag(e, boxData));
+    miniBox.addEventListener('touchstart', (e) => startDrag(e, boxData));
+  }
+  
   const friction = 0.95;
   const elasticity = 0.7;
   const wallMargin = 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
-  container.addEventListener('mousedown', startDrag);
-  container.addEventListener('touchstart', startDrag);
+  // 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%)';
+
+  // Xử lý kéo thả
+  container.addEventListener('mousedown', (e) => startDrag(e, mainBox));
+  container.addEventListener('touchstart', (e) => startDrag(e, mainBox));
   
-  function startDrag(e) {
-    isDragging = true;
+  function startDrag(e, box) {
+    box.isDragging = true;
     const touch = e.type === 'touchstart' ? e.touches[0] : e;
-    dragOffsetX = touch.clientX - containerX;
-    dragOffsetY = touch.clientY - containerY;
-    containerVelX = 0;
-    containerVelY = 0;
+    box.dragOffsetX = touch.clientX - box.x;
+    box.dragOffsetY = touch.clientY - box.y;
+    box.velX = 0;
+    box.velY = 0;
     e.preventDefault();
   }
   
@@ -207,24 +273,28 @@
   document.addEventListener('touchmove', drag);
   
   function drag(e) {
-    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;
-    }
+    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;
+      }
+    });
   }
   
   document.addEventListener('mouseup', stopDrag);
   document.addEventListener('touchend', stopDrag);
   
   function stopDrag() {
-    isDragging = false;
+    boxes.forEach(box => {
+      box.isDragging = false;
+    });
   }
   
   // Cập nhật vật lý container
@@ -351,10 +421,19 @@
     spiderY = touch.clientY;
   });
 
-  // Bỏ qua block autoplay của trình duyệt
-  document.addEventListener('click', () => {
-    music.play();
-  }, { once: true });
+  // 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 });
 
   // Di chuyển nhện lớn
   function moveSpider() {