Update index.html

index.html

@@ -195,27 +195,34 @@
       let selectedApples = [];
       let score = 0;
       let isMouseDown = false;
-        let lastTouchEnd = 0;
+      let lastTouchEnd = 0;
 
+      // Helper function to get relative coordinates, handling both mouse and touch events.
       function getRelativeCoordinates(event, element) {
         const rect = element.getBoundingClientRect();
         const clientX = event.clientX || (event.touches && event.touches[0].clientX);
         const clientY = event.clientY || (event.touches && event.touches[0].clientY);
-        if (clientX === undefined || clientY === undefined) { return null; }
+
+        if (clientX === undefined || clientY === undefined) {
+          return null;
+        }
         return { x: clientX - rect.left, y: clientY - rect.top };
       }
 
+      // Helper function to get the row and column of a cell from coordinates.
       function getCellFromCoordinates(coords) {
         if (!coords) return null;
         const cellSize = gameContainer.offsetWidth / gridSize;
         const col = Math.floor(coords.x / cellSize);
         const row = Math.floor(coords.y / cellSize);
+
         if (row >= 0 && row < gridSize && col >= 0 && col < gridSize) {
           return { row, col };
         }
         return null;
       }
 
+      // Creates an apple with a random number (1-9).
       function createApple(row, col) {
         const apple = document.createElement('div');
         apple.classList.add('apple');
@@ -227,6 +234,7 @@
         return apple;
       }
 
+      // Populates the grid with apples.
       function populateGrid() {
         for (let row = 0; row < gridSize; row++) {
           for (let col = 0; col < gridSize; col++) {
@@ -234,7 +242,7 @@
             cell.classList.add('grid-cell');
             cell.dataset.row = row;
             cell.dataset.col = col;
-                cell.addEventListener('touchstart', preventZoom, { passive: false });
+            cell.addEventListener('touchstart', preventZoom, { passive: false });  // Prevent zoom on double-tap
             const apple = createApple(row, col);
             cell.appendChild(apple);
             gameContainer.appendChild(cell);
@@ -242,14 +250,16 @@
         }
         updateCombinablePairs();
       }
-
-        function preventZoom(e) {
+        // Prevent page zoom on touch devices
+       function preventZoom(e) {
             if (e.touches && e.touches.length > 1) {
                 e.preventDefault(); return;
             }
             if (e.timeStamp - lastTouchEnd < 300) { e.preventDefault(); }
         }
 
+
+      // Handles the start of a selection (mousedown or touchstart).
       function handleSelectionStart(event) {
           if (event.type === 'touchend') { lastTouchEnd = event.timeStamp; }
 
@@ -257,28 +267,34 @@
         const cell = getCellFromCoordinates(coords);
         if (!cell) return;
 
+        // Ensure we're starting on an apple.
         const elementAtPoint = document.elementFromPoint(
           event.clientX || (event.touches && event.touches[0].clientX),
           event.clientY || (event.touches && event.touches[0].clientY)
         );
-        if (!elementAtPoint || !elementAtPoint.classList.contains('apple')) { return; }
+
+        if (!elementAtPoint || !elementAtPoint.classList.contains('apple')) {
+          return;
+        }
+
 
         isMouseDown = true;
         startCell = cell;
         isSelecting = true;
         deselectAllApples();
 
+        // Set initial size and position of the selection box.
         const cellSize = gameContainer.offsetWidth / gridSize;
         selectionBox.style.left = `${startCell.col * cellSize}px`;
         selectionBox.style.top = `${startCell.row * cellSize}px`;
         selectionBox.style.width = `${cellSize}px`;
         selectionBox.style.height = `${cellSize}px`;
         selectionBox.style.display = 'block';
-
         selectApplesInBox();
-        event.preventDefault();
+        event.preventDefault(); // Prevent other events like scrolling.
       }
 
+      // Handles mouse/touch movement during selection.
       function handleSelectionMove(event) {
         if (!isSelecting || !isMouseDown) return;
 
@@ -289,84 +305,58 @@
         if (!currentCell) return;
 
         const cellSize = gameContainer.offsetWidth / gridSize;
+
+        // Calculate top-left and bottom-right corners of the selection box.
         const top = Math.min(startCell.row, currentCell.row);
         const left = Math.min(startCell.col, currentCell.col);
         const bottom = Math.max(startCell.row, currentCell.row);
         const right = Math.max(startCell.col, currentCell.col);
 
-        // 선택 영역 축소
-        const shrinkFactor = 0.9; // 바깥쪽 축소
-        const offsetX = cellSize * (1 - shrinkFactor) / 2;
-        const offsetY = cellSize * (1 - shrinkFactor) / 2;
-
-        selectionBox.style.top = `${top * cellSize + offsetY}px`;
-        selectionBox.style.left = `${left * cellSize + offsetX}px`;
-        selectionBox.style.width = `${(right - left + 1) * cellSize * shrinkFactor}px`;
-        selectionBox.style.height = `${(bottom - top + 1) * cellSize * shrinkFactor}px`;
+        // Update selection box size and position.
+        selectionBox.style.top = `${top * cellSize}px`;
+        selectionBox.style.left = `${left * cellSize}px`;
+        selectionBox.style.width = `${(right - left + 1) * cellSize}px`;
+        selectionBox.style.height = `${(bottom - top + 1) * cellSize}px`;
 
         selectApplesInBox();
         event.preventDefault();
       }
 
+      // Handles the end of a selection (mouseup or touchend).
       function handleSelectionEnd(event) {
           if (event.type === 'touchend') { lastTouchEnd = event.timeStamp; }
         if (!isSelecting) return;
 
         isMouseDown = false;
         isSelecting = false;
-        selectionBox.style.display = 'none';
-        checkSum();
-        startCell = null;
+        selectionBox.style.display = 'none';  // Hide selection box.
+        checkSum();  // Check the sum of selected apples.
+        startCell = null; // Reset startCell.
         event.preventDefault();
       }
-      function selectApplesInBox() {
-        const boxRect = selectionBox.getBoundingClientRect();
-        const containerRect = gameContainer.getBoundingClientRect();
-        const apples = document.querySelectorAll('.apple');
 
-        // 선택 상자의 "안쪽" 경계 계산 (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;
+
+    function selectApplesInBox() {
+        const apples = document.querySelectorAll('.apple');
+        const selectionRect = selectionBox.getBoundingClientRect(); // Selection box rect
 
         apples.forEach(apple => {
             const appleRect = apple.getBoundingClientRect();
 
-            // 사과 중심 좌표 계산
-            const appleCenterX = appleRect.left + appleRect.width / 2 - containerRect.left;
-            const appleCenterY = appleRect.top + appleRect.height / 2 - containerRect.top;
-
-            // 1. 중심점 기반 검사 (엄격)
-            const isInside = appleCenterX >= innerBoxLeft && appleCenterX <= innerBoxRight &&
-                            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) {
+            // Calculate the center of the apple.
+            const appleCenterX = appleRect.left + appleRect.width / 2;
+            const appleCenterY = appleRect.top + appleRect.height / 2;
+
+            // Check if the apple's center is within the selection box.
+            const isInside = appleCenterX >= selectionRect.left &&
+                             appleCenterX <= selectionRect.right &&
+                             appleCenterY >= selectionRect.top &&
+                             appleCenterY <= selectionRect.bottom;
+
+            if (isInside) {
                 if (!selectedApples.includes(apple)) {
-                    apple.classList.add('selected');
-                    selectedApples.push(apple);
+                  apple.classList.add('selected');
+                  selectedApples.push(apple);
                 }
             } else {
                 apple.classList.remove('selected');
@@ -374,41 +364,49 @@
             }
         });
     }
+
+
+      // Deselects all apples.
       function deselectAllApples() {
         selectedApples.forEach(apple => apple.classList.remove('selected'));
         selectedApples = [];
       }
 
-      function checkSum() {
-        let sum = 0;
-        selectedApples.forEach(apple => sum += parseInt(apple.dataset.value));
-
-        if (sum === 10) {
-          score += selectedApples.length;
-          scoreDisplay.textContent = `Score: ${score}`;
-
-          selectedApples.forEach(apple => {
-            apple.classList.add('removing');
-            apple.style.setProperty('--random-x', Math.random() * 2 - 1);
-            apple.style.setProperty('--random-y', Math.random() * 2 - 1);
-            apple.style.setProperty('--random-rotate', Math.random() * 2 - 1);
-            apple.style.setProperty('--random-scale', Math.random() * 1 + 0.5);
-
-            apple.addEventListener('animationend', () => {
-              const parentCell = apple.parentElement;
-              if (parentCell && parentCell.classList.contains('grid-cell')) {
-                parentCell.removeChild(apple);
-                updateCombinablePairs();
-              }
+      // Checks if the sum of selected apples is 10.  If so, removes them and updates the score.
+        function checkSum() {
+          let sum = 0;
+          selectedApples.forEach(apple => sum += parseInt(apple.dataset.value));
+
+          if (sum === 10) {
+            score += selectedApples.length;
+            scoreDisplay.textContent = `Score: ${score}`;
+
+            selectedApples.forEach(apple => {
+              apple.classList.add('removing');
+              // Add random animation properties
+              apple.style.setProperty('--random-x', Math.random() * 2 - 1);  // -1 to 1
+              apple.style.setProperty('--random-y', Math.random() * 2 - 1);
+              apple.style.setProperty('--random-rotate', Math.random() * 2 - 1);
+              apple.style.setProperty('--random-scale', Math.random() * 1 + 0.5); // 0.5 to 1.5
+
+              // Remove the apple after the animation finishes.
+              apple.addEventListener('animationend', () => {
+                const parentCell = apple.parentElement;
+                if (parentCell && parentCell.classList.contains('grid-cell')) {
+                  parentCell.removeChild(apple);
+                  updateCombinablePairs(); // Check for game over after removing apples.
+                }
+              });
             });
-          });
 
-          selectedApples = [];
-        } else {
-          deselectAllApples();
+            selectedApples = []; // Clear the selection.
+          } else {
+            deselectAllApples(); // Deselect if the sum is not 10.
+          }
         }
-      }
 
+
+      // Checks if there are any combinable pairs left on the board.
       function hasCombinablePairs() {
         const apples = document.querySelectorAll('.apple');
         const values = Array.from(apples).map(apple => parseInt(apple.dataset.value));
@@ -416,13 +414,14 @@
         for (let i = 0; i < values.length; i++) {
           for (let j = i + 1; j < values.length; j++) {
             if (values[i] + values[j] === 10) {
-              return true;
+              return true; // Found a pair that sums to 10.
             }
           }
         }
-        return false;
+        return false; // No pairs found.
       }
 
+      // Updates the display of combinable pairs and checks for game over.
       function updateCombinablePairs() {
         const apples = document.querySelectorAll('.apple');
         const values = Array.from(apples).map(apple => parseInt(apple.dataset.value));
@@ -438,18 +437,23 @@
 
         combinablePairsDisplay.textContent = `Pairs: ${count}`;
 
+        // Check for game over (no apples left or no combinable pairs).
         if (count === 0 && apples.length > 0) {
           gameOverScreen.style.display = "flex";
         }
       }
 
+
+      // Starts a new game.
       function startGame() {
         populateGrid();
       }
 
+      // Restarts the game.
       function restartGame() {
         score = 0;
         scoreDisplay.textContent = "Score: 0";
+        // Clear existing apples.
         while (gameContainer.firstChild) {
           gameContainer.removeChild(gameContainer.firstChild);
         }
@@ -457,6 +461,7 @@
         startGame();
       }
 
+      // Event listeners for mouse and touch events.
       gameContainer.addEventListener('mousedown', handleSelectionStart);
       gameContainer.addEventListener('mousemove', handleSelectionMove);
       gameContainer.addEventListener('mouseup', handleSelectionEnd);
@@ -464,6 +469,8 @@
       gameContainer.addEventListener('touchmove', handleSelectionMove);
       gameContainer.addEventListener('touchend', handleSelectionEnd);
 
+
+      // Start the game when the page loads.
       startGame();
     </script>
 </body>