- add mobile touch support for paddle movement and ball launch

TobiasMue91 · TobiasMue91 · commit 732e9e7831d7 · 2025-02-27T19:33:50.000+01:00
- adjust game speeds on mobile devices and small screens
- fix combo system (start at 0 instead of 1)
- improve responsive layout:
  - add `overflow-y: auto` to screen containers
  - set specific width constraints for game elements
  - add desktop-specific media query
- enhance UI styling with better margins and max-width
diff --git a/games/breakout.html b/games/breakout.html
@@ -267,6 +267,7 @@
             transition: opacity 0.5s ease;
             text-align: center;
             padding: 20px;
+            overflow-y: auto;
         }
 
         .screen.active {
@@ -318,8 +319,9 @@
             background: rgba(25, 27, 58, 0.7);
             border-radius: 10px;
             padding: 15px;
-            margin-top: 20px;
-            max-width: 80%;
+            margin: 20px auto;
+            width: 80%;
+            max-width: 500px;
             gap: 20px;
         }
 
@@ -463,6 +465,19 @@
                 flex-direction: column;
             }
         }
+
+
+        @media (min-width: 769px) {
+            .game-container {
+                width: var(--game-width);
+                margin: 20px auto;
+                max-height: 90vh;
+            }
+
+            #game-board {
+                height: min(var(--game-height), 70vh);
+            }
+        }
     </style>
 </head>
 <body>
@@ -830,6 +845,13 @@ <h2>You Win!</h2>
         config.boardWidth = elements.gameBoard.offsetWidth;
         config.boardHeight = elements.gameBoard.offsetHeight;
 
+        if (window.innerWidth <= 768 || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+            config.initialBallSpeed *= 0.7;
+            config.maxBallSpeed *= 0.7;
+            paddle.speed *= 0.7;
+            config.powerupSpeed *= 0.7;
+        }
+
         paddle.x = config.boardWidth / 2;
         elements.paddle.style.width = paddle.width + 'px';
         elements.paddle.style.height = paddle.height + 'px';
@@ -843,7 +865,7 @@ <h2>You Win!</h2>
         state.score = 0;
         state.lives = 3;
         state.level = 1;
-        state.combo = 1;
+        state.combo = 0;
         state.powerups = [];
         state.particles = [];
         state.effects = [];
@@ -883,6 +905,27 @@ <h2>You Win!</h2>
             }
         });
 
+        elements.gameBoard.addEventListener('touchmove', (e) => {
+            if (state.running && !state.paused) {
+                e.preventDefault(); // Prevent scrolling
+                const touch = e.touches[0];
+                const gameBoardRect = elements.gameBoard.getBoundingClientRect();
+                const relativeX = touch.clientX - gameBoardRect.left;
+
+                if (relativeX > 0 && relativeX < config.boardWidth) {
+                    paddle.x = relativeX;
+                    updatePaddlePosition();
+                }
+            }
+        });
+
+        elements.gameBoard.addEventListener('touchend', (e) => {
+            if (state.running && !state.paused && !state.transitionActive && state.launchReady &&
+                (!ball.launched || (state.balls.length > 0 && state.balls.some(b => !b.launched)))) {
+                launchBall();
+            }
+        });
+
         document.addEventListener('keydown', (e) => {
             if (e.key === 'ArrowLeft') {
                 state.keyStates.left = true;
@@ -1334,7 +1377,7 @@ <h2>You Win!</h2>
         const brick = state.bricks[index];
 
         const brickType = brickTypes[brick.type];
-        const points = brickType.points * state.combo;
+        const points = brickType.points * (state.combo + 1);
         state.score += points;
         updateScoreDisplay();
 
@@ -1848,7 +1891,7 @@ <h2>You Win!</h2>
         state.lives--;
         updateLivesDisplay();
 
-        state.combo = 1;
+        state.combo = 0;
         updateComboDisplay();
 
         clearPowerups();
@@ -1873,7 +1916,7 @@ <h2>You Win!</h2>
         if (now - state.lastBrickHit < config.comboTimeout) {
             state.combo++;
         } else {
-            state.combo = 1;
+            state.combo = 0;
         }
 
         state.lastBrickHit = now;
@@ -1882,8 +1925,8 @@ <h2>You Win!</h2>
 
     function checkComboTimeout() {
         const now = Date.now();
-        if (state.combo > 1 && now - state.lastBrickHit > config.comboTimeout) {
-            state.combo = 1;
+        if (state.combo > 0 && now - state.lastBrickHit > config.comboTimeout) { // Changed from > 1 to > 0
+            state.combo = 0;
             updateComboDisplay();
         }
     }
