Update script.js

script.js

@@ -40,12 +40,28 @@ gameArea.addEventListener('touchmove', (e) => {
     }
 });
 
-function handlePaddleCollision(paddleY, paddleXDirection) {
+function handlePaddleCollision(paddleY, paddleXDirection, isLeftPaddle) {
     const hitPosition = (ballY - (paddleY + paddleHeight / 2)) / (paddleHeight / 2);
     const angle = hitPosition * maxAngle * (Math.PI / 180); // Convert to radians
     
     ballSpeedX = paddleXDirection * Math.abs(ballSpeedX); // Ensure proper direction
     ballSpeedY = Math.sin(angle) * Math.abs(ballSpeedX);  // Adjust vertical speed
+
+    // Reposition ball to ensure no clipping through paddle
+    if (isLeftPaddle) {
+        ballX = paddleWidth + 10; // Place ball just outside left paddle
+    } else {
+        ballX = window.innerWidth - paddleWidth - 25; // Place ball just outside right paddle
+    }
+}
+
+function checkPaddleCollision(paddleY, paddleX, isLeftPaddle) {
+    if (
+        ballX >= paddleX && ballX <= paddleX + paddleWidth &&
+        ballY + ballSize >= paddleY && ballY <= paddleY + paddleHeight
+    ) {
+        handlePaddleCollision(paddleY, isLeftPaddle ? 1 : -1, isLeftPaddle);
+    }
 }
 
 function update() {
@@ -59,23 +75,9 @@ function update() {
             ballSpeedY = -ballSpeedY;
         }
 
-        // Ball collision with left paddle
-        if (
-            ballX <= paddleWidth + 10 && // Left paddle
-            ballY + ballSize >= paddleLeftY &&
-            ballY <= paddleLeftY + paddleHeight
-        ) {
-            handlePaddleCollision(paddleLeftY, 1); // Move right
-        }
-
-        // Ball collision with right paddle
-        if (
-            ballX >= window.innerWidth - paddleWidth - 25 && // Right paddle
-            ballY + ballSize >= paddleRightY &&
-            ballY <= paddleRightY + paddleHeight
-        ) {
-            handlePaddleCollision(paddleRightY, -1); // Move left
-        }
+        // Check collision with paddles using improved detection
+        checkPaddleCollision(paddleLeftY, paddleWidth, true); // Left paddle
+        checkPaddleCollision(paddleRightY, window.innerWidth - paddleWidth - 25, false); // Right paddle
 
         // Ball out of bounds (left or right)
         if (ballX <= 0) {