Update script.js

script.js

@@ -35,23 +35,44 @@ gameArea.addEventListener('touchmove', (e) => {
 });
 
 function handlePaddleCollision(paddleY, paddleX, isLeftPaddle) {
-    let previousBallX = ballX - ballSpeedX;
-    
-    // Swept collision detection: Check if the ball crossed the paddle between frames
-    if (
-        previousBallX < paddleX + paddleWidth &&
-        ballX > paddleX &&
-        ballY + ballSize > paddleY &&
-        ballY < paddleY + paddleHeight
-    ) {
-        const hitPosition = (ballY - (paddleY + paddleHeight / 2)) / (paddleHeight / 2);
-        const angle = hitPosition * maxAngle * (Math.PI / 180);
-
-        ballSpeedX = (isLeftPaddle ? 1 : -1) * Math.abs(ballSpeedX);
-        ballSpeedY = Math.sin(angle) * Math.abs(ballSpeedX);
-
-        // Reposition the ball outside the paddle to avoid clipping
-        ballX = isLeftPaddle ? paddleX + paddleWidth + 1 : paddleX - ballSize - 1;
+    const ballRadius = ballSize / 2;
+
+    if (isLeftPaddle && ballSpeedX < 0) {
+        // Collision X position for left paddle
+        let collisionX = paddleX + paddleWidth + ballRadius;
+        let t = (collisionX - ballX) / ballSpeedX;
+        if (t >= 0 && t <= 1) {
+            let collisionY = ballY + ballSpeedY * t;
+            if (collisionY >= paddleY && collisionY <= paddleY + paddleHeight) {
+                // Collision detected with left paddle
+                let hitPosition = collisionY - (paddleY + paddleHeight / 2);
+                let angle = hitPosition / (paddleHeight / 2) * maxAngle * (Math.PI / 180);
+                // Update ball's velocity
+                ballSpeedX = Math.abs(ballSpeedX); // Reverse X direction for left paddle
+                ballSpeedY = Math.sin(angle) * ballSpeedX;
+                // Reposition ball outside the paddle
+                ballX = collisionX + ballRadius;
+                ballY = collisionY;
+            }
+        }
+    } else if (!isLeftPaddle && ballSpeedX > 0) {
+        // Collision X position for right paddle
+        let collisionX = paddleX - ballRadius;
+        let t = (collisionX - ballX) / ballSpeedX;
+        if (t >= 0 && t <= 1) {
+            let collisionY = ballY + ballSpeedY * t;
+            if (collisionY >= paddleY && collisionY <= paddleY + paddleHeight) {
+                // Collision detected with right paddle
+                let hitPosition = collisionY - (paddleY + paddleHeight / 2);
+                let angle = hitPosition / (paddleHeight / 2) * maxAngle * (Math.PI / 180);
+                // Update ball's velocity
+                ballSpeedX = -Math.abs(ballSpeedX); // Reverse X direction for right paddle
+                ballSpeedY = Math.sin(angle) * Math.abs(ballSpeedX);
+                // Reposition ball outside the paddle
+                ballX = collisionX - ballRadius;
+                ballY = collisionY;
+            }
+        }
     }
 }