Enhance mobile touch support and improve responsiveness.

Moiz-CodeByte · Moiz-CodeByte · commit 467b4add5fbd · 2025-04-26T01:04:41.000+05:00
diff --git a/Day #12 - 2048 Game/index.html b/Day #12 - 2048 Game/index.html
@@ -2,7 +2,8 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
     <link rel="stylesheet" href="style.css">
     <title>2048 Game | MoizCodeByte</title>
 </head>
diff --git a/Day #12 - 2048 Game/script.js b/Day #12 - 2048 Game/script.js
@@ -15,8 +15,9 @@ function createGrid() {
             const cell = document.createElement('div');
             cell.classList.add('grid-cell');
             if (grid[i][j] !== 0) {
-                cell.textContent = grid[i][j];
                 cell.setAttribute('data-value', grid[i][j]);
+            } else {
+                cell.removeAttribute('data-value');
             }
             gridContainer.appendChild(cell);
         }
@@ -132,11 +133,15 @@ let touchStartX = 0;
 let touchStartY = 0;
 
 function handleTouchStart(e) {
+    e.preventDefault(); // Prevent default browser handling
     touchStartX = e.touches[0].clientX;
     touchStartY = e.touches[0].clientY;
 }
 
 function handleTouchEnd(e) {
+    e.preventDefault(); // Prevent default browser handling
+    if (!touchStartX || !touchStartY) return; // Exit if we didn't get a valid start position
+    
     const touchEndX = e.changedTouches[0].clientX;
     const touchEndY = e.changedTouches[0].clientY;
 
@@ -145,7 +150,7 @@ function handleTouchEnd(e) {
     const absDx = Math.abs(dx);
     const absDy = Math.abs(dy);
 
-    if (Math.max(absDx, absDy) > 20) { // Swipe threshold
+    if (Math.max(absDx, absDy) > 10) { // Lower swipe threshold for better responsiveness
         if (absDx > absDy) {
             if (dx > 0) {
                 handleMove(39); // Swipe right
@@ -160,10 +165,27 @@ function handleTouchEnd(e) {
             }
         }
     }
+    
+    // Reset touch coordinates
+    touchStartX = 0;
+    touchStartY = 0;
 }
 
-document.addEventListener('touchstart', handleTouchStart, false);
-document.addEventListener('touchend', handleTouchEnd, false);
+// Use touchmove to prevent scrolling while swiping
+function handleTouchMove(e) {
+    if (touchStartX && touchStartY) {
+        e.preventDefault(); // Prevent scrolling
+    }
+}
+
+// Remove previous touch listeners if they exist
+document.removeEventListener('touchstart', handleTouchStart);
+document.removeEventListener('touchend', handleTouchEnd);
+
+// Add improved touch event listeners
+document.addEventListener('touchstart', handleTouchStart, {passive: false});
+document.addEventListener('touchend', handleTouchEnd, {passive: false});
+document.addEventListener('touchmove', handleTouchMove, {passive: false});
 
 function initGame() {
     generateRandom();
diff --git a/Day #12 - 2048 Game/style.css b/Day #12 - 2048 Game/style.css
@@ -6,23 +6,32 @@ body {
     height: 100vh;
     margin: 0;
     background-color: #f7592b;
+    touch-action: none; /* Prevent browser handling of touch events */
 }
 
 .container {
     background-color: white;
-    padding: 30px;
+    padding: 20px;
     border-radius: 15px;
     text-align: center;
-    width: 100%;
+    width: 95%;
     max-width: 500px;
+    box-sizing: border-box;
+}
+
+h1 {
+    margin-top: 0;
+    font-size: 2rem;
 }
 
 .game-container {
     background-color: #bbada0;
     border-radius: 6px;
-    padding: 20px;
+    padding: 15px;
     margin: 0 auto;
     display: inline-block;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 #grid-container {
@@ -31,21 +40,39 @@ body {
     grid-template-rows: repeat(4, 1fr);
     gap: 10px;
     width: 100%;
-    max-width: 400px;
+    aspect-ratio: 1/1; /* Ensure the entire grid is square */
 }
 
-/* Ensure grid cells maintain a square aspect ratio */
 .grid-cell {
+    position: relative;
     width: 100%;
-    padding-bottom: 100%; /* Creates a square aspect ratio */
     background-color: #cdc1b4;
     border-radius: 6px;
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 1.5rem; /* Adjust font size for better visibility */
     font-weight: bold;
     color: #776e65;
+    aspect-ratio: 1/1; /* Each cell is a perfect square */
+    user-select: none; /* Prevent text selection during swipes */
+}
+
+.grid-cell::before {
+    content: attr(data-value);
+    font-size: 1.5rem;
+    position: absolute;
+}
+
+/* Responsive font sizes based on cell values */
+.grid-cell[data-value="128"]::before,
+.grid-cell[data-value="256"]::before,
+.grid-cell[data-value="512"]::before {
+    font-size: 1.3rem;
+}
+
+.grid-cell[data-value="1024"]::before,
+.grid-cell[data-value="2048"]::before {
+    font-size: 1.1rem;
 }
 
 /* Color specific rules for different cell values */
@@ -63,6 +90,45 @@ body {
 
 .score-container {
     margin-top: 20px;
-    font-size: 1.5rem; /* Adjusted for better readability on mobile */
+    font-size: 1.5rem;
     font-weight: bold;
 }
+
+/* Media queries for smaller screens */
+@media (max-width: 480px) {
+    .container {
+        padding: 10px;
+    }
+    
+    h1 {
+        font-size: 1.5rem;
+        margin-bottom: 10px;
+    }
+    
+    .game-container {
+        padding: 10px;
+    }
+    
+    #grid-container {
+        gap: 5px;
+    }
+    
+    .grid-cell::before {
+        font-size: 1.2rem;
+    }
+    
+    .grid-cell[data-value="128"]::before,
+    .grid-cell[data-value="256"]::before,
+    .grid-cell[data-value="512"]::before {
+        font-size: 1rem;
+    }
+    
+    .grid-cell[data-value="1024"]::before,
+    .grid-cell[data-value="2048"]::before {
+        font-size: 0.9rem;
+    }
+    
+    .score-container {
+        font-size: 1.2rem;
+    }
+}
