Update index.html

index.html

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>🍎 Apple Merge</title>
     <style>
-       /* (스타일은 이전과 동일) */
        body {
             font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
             display: flex;
@@ -64,8 +63,8 @@
         }
 
         .grid-cell {
-            width: 100%;  /* 다시 추가 */
-            height: 100%; /* 다시 추가 */
+            width: 100%;
+            height: 100%;
             box-sizing: border-box;
             position: relative;
             border-radius: 8px;
@@ -103,7 +102,7 @@
 
         .apple span {
             font-size: 0.5em;
-            color: #fff;
+            color: #000;
             font-weight: bold;
             z-index: 3;
             pointer-events: none;
@@ -112,7 +111,7 @@
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            text-shadow: 3px 3px 0px black;
+            text-shadow: 0px 1px 3px #fff;
         }
 
         .apple.selected {
@@ -320,14 +319,17 @@
         startCell = null;
         event.preventDefault();
       }
-
       function selectApplesInBox() {
         const boxRect = selectionBox.getBoundingClientRect();
-        const containerRect = gameContainer.getBoundingClientRect(); // 컨테이너 rect
+        const containerRect = gameContainer.getBoundingClientRect();
         const apples = document.querySelectorAll('.apple');
 
-        // 추가적인 안전 거리 (margin) - 더 좁게 선택되도록
-        const selectionMargin = boxRect.width * 0.2;  // 예: 선택 영역 너비의 20%
+        // 선택 상자의 "안쪽" 경계 계산 (margin 적용) - 중심점 검사용
+        const selectionMargin = boxRect.width * 0.2; // margin은 유지
+        const innerBoxLeft = boxRect.left - containerRect.left + selectionMargin;
+        const innerBoxTop = boxRect.top - containerRect.top + selectionMargin;
+        const innerBoxRight = boxRect.right - containerRect.left - selectionMargin;
+        const innerBoxBottom = boxRect.bottom - containerRect.top - selectionMargin;
 
         apples.forEach(apple => {
             const appleRect = apple.getBoundingClientRect();
@@ -336,42 +338,47 @@
             const appleCenterX = appleRect.left + appleRect.width / 2 - containerRect.left;
             const appleCenterY = appleRect.top + appleRect.height / 2 - containerRect.top;
 
-
-            // 선택 상자의 "안쪽" 경계 계산 (margin 적용)
-            const innerBoxLeft = boxRect.left - containerRect.left + selectionMargin;
-            const innerBoxTop = boxRect.top - containerRect.top + selectionMargin;
-            const innerBoxRight = boxRect.right - containerRect.left - selectionMargin;
-            const innerBoxBottom = boxRect.bottom - containerRect.top- selectionMargin;
-
-
-            // 중심점이 "안쪽" 선택 상자 내에 있는지 확인
+            // 1. 중심점 기반 검사 (엄격)
             const isInside = appleCenterX >= innerBoxLeft && appleCenterX <= innerBoxRight &&
-                             appleCenterY >= innerBoxTop  && appleCenterY <= innerBoxBottom;
-
-
-          if (isInside) {
-            if (!selectedApples.includes(apple)) {
-              apple.classList.add('selected');
-              selectedApples.push(apple);
+                            appleCenterY >= innerBoxTop  && appleCenterY <= innerBoxBottom;
+
+            // 2. 경계 겹침 검사 (완화) - containerRect 기준 상대 좌표 사용
+            const adjustedBoxRect = {
+                left: boxRect.left - containerRect.left,
+                top: boxRect.top - containerRect.top,
+                right: boxRect.right - containerRect.left,
+                bottom: boxRect.bottom - containerRect.top
+            };
+            const adjustedAppleRect = {
+                left: appleRect.left - containerRect.left,
+                top: appleRect.top - containerRect.top,
+                right: appleRect.right - containerRect.left,
+                bottom: appleRect.bottom - containerRect.top
+            };
+
+            const isOverlapping = !(adjustedBoxRect.right < adjustedAppleRect.left ||
+                                    adjustedBoxRect.left > adjustedAppleRect.right ||
+                                    adjustedBoxRect.bottom < adjustedAppleRect.top ||
+                                    adjustedBoxRect.top > adjustedAppleRect.bottom);
+
+
+            // 두 조건 중 하나라도 만족하면 선택
+            if (isInside || isOverlapping) {
+                if (!selectedApples.includes(apple)) {
+                    apple.classList.add('selected');
+                    selectedApples.push(apple);
+                }
+            } else {
+                apple.classList.remove('selected');
+                selectedApples = selectedApples.filter(a => a !== apple);
             }
-          } else {
-            apple.classList.remove('selected');
-            selectedApples = selectedApples.filter(a => a !== apple);
-          }
         });
-      }
-
+    }
       function deselectAllApples() {
         selectedApples.forEach(apple => apple.classList.remove('selected'));
         selectedApples = [];
       }
 
-
-    //   function isRectOverlapping(rect1, rect2) { //이제 안 씀
-    //     return !(rect1.right < rect2.left || rect1.left > rect2.right ||
-    //              rect1.bottom < rect2.top || rect1.top > rect2.bottom);
-    //   }
-
       function checkSum() {
         let sum = 0;
         selectedApples.forEach(apple => sum += parseInt(apple.dataset.value));