Update index.html

index.html

@@ -18,15 +18,18 @@
     /* Khung chữ */
     .container {
       position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      border: 5px solid #8B4513;  /* Khung bao quanh chữ */
+      border: 5px solid #8B4513;
       padding: 40px;
       border-radius: 20px;
-      background-color: rgba(255, 255, 255, 0.3); /* Màu nền trong suốt hơn để thấy video */
-      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Hiệu ứng bóng đổ cho khung */
+      background-color: rgba(255, 255, 255, 0.3);
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
       overflow: hidden;
+      cursor: grab;
+      user-select: none;
+    }
+    
+    .container:active {
+      cursor: grabbing;
     }
 
     /* Video nền cho container */
@@ -130,9 +133,112 @@
 <script>
   const spider = document.getElementById('spider');
   const music = document.getElementById('bg-music');
+  const container = document.querySelector('.container');
   let mouseX = window.innerWidth / 2;
   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;
+  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);
+  
+  function startDrag(e) {
+    isDragging = true;
+    const touch = e.type === 'touchstart' ? e.touches[0] : e;
+    dragOffsetX = touch.clientX - containerX;
+    dragOffsetY = touch.clientY - containerY;
+    containerVelX = 0;
+    containerVelY = 0;
+    e.preventDefault();
+  }
+  
+  document.addEventListener('mousemove', drag);
+  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;
+    }
+  }
+  
+  document.addEventListener('mouseup', stopDrag);
+  document.addEventListener('touchend', stopDrag);
+  
+  function stopDrag() {
+    isDragging = false;
+  }
+  
+  // 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;
+      }
+      // 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(updateContainerPhysics);
+  }
+  
+  updateContainerPhysics();
 
   // Nhện con (ở các góc màn hình)
   const babySpiders = [
@@ -176,21 +282,23 @@
   function createEmoji(x, y) {
     const emoji = document.createElement('div');
     emoji.className = 'emoji';
-    emoji.innerText = getRandomEmoji();  // Chọn ngẫu nhiên emoji
+    emoji.innerText = getRandomEmoji();
     emoji.style.left = `${x}px`;
     emoji.style.top = `${y}px`;
     document.body.appendChild(emoji);
-    setTimeout(() => emoji.remove(), 1000);  // Xóa emoji sau 1 giây
+    setTimeout(() => emoji.remove(), 1000);
   }
 
   document.addEventListener('mousemove', (e) => {
-    mouseX = e.clientX;
-    mouseY = e.clientY;
-    createEmoji(e.clientX, e.clientY);  // Tạo emoji khi di chuyển chuột
+    if (!isDragging) {
+      mouseX = e.clientX;
+      mouseY = e.clientY;
+      createEmoji(e.clientX, e.clientY);
+    }
   });
 
   document.addEventListener('click', (e) => {
-    createEmoji(e.clientX, e.clientY);  // Tạo emoji khi click chuột
+    createEmoji(e.clientX, e.clientY);
     spiderX = e.clientX;
     spiderY = e.clientY;
   });
@@ -199,12 +307,12 @@
     const touch = e.touches[0];
     mouseX = touch.clientX;
     mouseY = touch.clientY;
-    createEmoji(mouseX, mouseY);  // Tạo emoji khi vuốt trên màn hình
+    createEmoji(mouseX, mouseY);
   });
 
   document.addEventListener('touchstart', (e) => {
     const touch = e.touches[0];
-    createEmoji(touch.clientX, touch.clientY);  // Tạo emoji khi chạm vào màn hình
+    createEmoji(touch.clientX, touch.clientY);
     spiderX = touch.clientX;
     spiderY = touch.clientY;
   });
@@ -214,15 +322,14 @@
     music.play();
   }, { once: true });
 
-  // Di chuyển nhện lớn (về vị trí cũ nếu không tương tác)
+  // Di chuyển nhện lớn
   function moveSpider() {
     const dx = mouseX - spiderX;
     const dy = mouseY - spiderY;
-    spiderX += dx * 0.2;  // Tăng tốc độ di chuyển của nhện
+    spiderX += dx * 0.2;
     spiderY += dy * 0.2;
     spider.style.transform = `translate(${spiderX}px, ${spiderY}px)`;
 
-    // Nếu không có sự thay đổi lớn trong khoảng thời gian nhất định, nhện sẽ trở về vị trí ban đầu
     if (Math.abs(dx) < 1 && Math.abs(dy) < 1) {
       spiderX = window.innerWidth / 2;
       spiderY = window.innerHeight / 2;