Update index.html

index.html

@@ -181,9 +181,6 @@
 </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>
@@ -297,52 +294,59 @@
     });
   }
   
-  // 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;
-      
-      // 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;
+  // 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;
+        }
       }
-      // 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
+      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';
       }
-    }
-    
-    // Cập nhật vị trí DOM
-    container.style.left = containerX + 'px';
-    container.style.top = containerY + 'px';
+    });
     
-    requestAnimationFrame(updateContainerPhysics);
+    requestAnimationFrame(updateBoxPhysics);
   }
   
-  updateContainerPhysics();
+  updateBoxPhysics();
 
   // Nhện con (ở các góc màn hình)
   const babySpiders = [
@@ -394,9 +398,12 @@
   }
 
   document.addEventListener('mousemove', (e) => {
-    if (!isDragging) {
-      mouseX = e.clientX;
-      mouseY = e.clientY;
+    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) {
       createEmoji(e.clientX, e.clientY);
     }
   });