- improve responsive design with fluid layout using aspect-ratio

TobiasMue91 · TobiasMue91 · commit 5d9059a7943b · 2025-02-27T20:38:41.000+01:00
- enhance multiball powerup to duplicate all active balls
- fix mobile styling with better container sizing and padding
- optimize controls display with flex-wrap for small screens
- add additional media queries for large screens (1200px+)
diff --git a/games/breakout.html b/games/breakout.html
@@ -36,14 +36,15 @@
             align-items: center;
             justify-content: center;
             min-height: 100vh;
-            overflow: hidden;
-            transition: background-color 0.3s ease;
+            margin: 0;
+            padding: 0;
         }
 
         .game-container {
             position: relative;
             width: var(--game-width);
-            margin: 20px auto;
+            max-width: 100%;
+            margin: 0 auto;
         }
 
         .game-header {
@@ -104,8 +105,9 @@
         }
 
         #game-board {
-            width: var(--game-width);
-            height: var(--game-height);
+            width: 100%;
+            aspect-ratio: 6/5;
+            max-height: 80vh;
             background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
             border-radius: 10px;
             position: relative;
@@ -259,15 +261,16 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            justify-content: center;
+            justify-content: flex-start;
             background: rgba(18, 18, 18, 0.9);
             z-index: 50;
             opacity: 0;
             pointer-events: none;
             transition: opacity 0.5s ease;
             text-align: center;
-            padding: 20px;
+            padding: 5% 5% 0 5%;
             overflow-y: auto;
+            box-sizing: border-box;
         }
 
         .screen.active {
@@ -319,14 +322,15 @@
             background: rgba(25, 27, 58, 0.7);
             border-radius: 10px;
             padding: 15px;
-            margin: 20px auto;
-            width: 80%;
-            max-width: 500px;
+            margin: 10px 0 20px 0;
+            width: 90%;
             gap: 20px;
+            flex-wrap: wrap;
         }
 
         .controls-column {
             flex: 1;
+            min-width: 120px;
             padding: 10px;
             text-align: left;
         }
@@ -444,8 +448,7 @@
 
         @media (max-width: 768px) {
             :root {
-                --game-width: 100%;
-                --game-height: 400px;
+                --game-width: 95vw;
             }
 
             .game-container {
@@ -464,8 +467,17 @@
             .controls-info {
                 flex-direction: column;
             }
-        }
 
+            .screen h2 {
+                font-size: 1.8rem;
+                margin-top: 10px;
+            }
+
+            .screen p {
+                font-size: 1rem;
+                margin-bottom: 15px;
+            }
+        }
 
         @media (min-width: 769px) {
             .game-container {
@@ -478,6 +490,12 @@
                 height: min(var(--game-height), 70vh);
             }
         }
+
+        @media (min-width: 1200px) {
+            :root {
+                --game-width: 800px;
+            }
+        }
     </style>
 </head>
 <body>
@@ -1679,33 +1697,72 @@ <h2>You Win!</h2>
     }
 
     function applyMultiballPowerup() {
-        for (let i = 0; i < config.multiBallCount; i++) {
-            createNewBall();
+        // Store all active balls that need to be duplicated
+        const activeBalls = [];
+
+        // Add main ball if it's launched
+        if (ball.launched) {
+            activeBalls.push({
+                x: ball.x,
+                y: ball.y,
+                speed: ball.speed,
+                fireball: ball.fireball
+            });
+        }
+
+        // Add all other active balls
+        state.balls.forEach(ballObj => {
+            if (ballObj.launched) {
+                activeBalls.push({
+                    x: ballObj.x,
+                    y: ballObj.y,
+                    speed: ballObj.speed,
+                    fireball: ballObj.fireball
+                });
+            }
+        });
+
+        // If no active balls, create from main ball position even if not launched
+        if (activeBalls.length === 0) {
+            activeBalls.push({
+                x: ball.x,
+                y: ball.y,
+                speed: ball.speed,
+                fireball: ball.fireball
+            });
         }
+
+        // Create new balls based on each active ball
+        activeBalls.forEach(activeBall => {
+            for (let i = 0; i < config.multiBallCount; i++) {
+                createNewBall(activeBall.x, activeBall.y, activeBall.speed, activeBall.fireball);
+            }
+        });
     }
 
-    function createNewBall() {
+    function createNewBall(x, y, speed, isFireball) {
         const newBallElement = document.createElement('div');
         newBallElement.classList.add('ball');
         newBallElement.style.width = config.ballSize + 'px';
         newBallElement.style.height = config.ballSize + 'px';
 
-        if (ball.fireball) {
+        if (isFireball) {
             newBallElement.style.background = 'radial-gradient(circle at 30% 30%, white, #FF9E00)';
             newBallElement.style.boxShadow = '0 0 15px rgba(255, 158, 0, 0.7)';
         }
 
         elements.gameBoard.appendChild(newBallElement);
 
+        const angle = (Math.random() * 90 - 45) * Math.PI / 180;
         const newBall = {
-            x: ball.x,
-            y: ball.y,
-            dx: (Math.random() * 2 - 1) * ball.speed,
-            dy: -ball.speed,
-            speed: ball.speed,
+            x: x,
+            y: y,
+            dx: speed * Math.sin(angle),
+            dy: -speed * Math.cos(angle),
+            speed: speed,
             launched: true,
-            radius: ball.radius,
-            fireball: ball.fireball,
+            radius: config.ballSize / 2,
+            fireball: isFireball,
             element: newBallElement
         };
 
