Update script.js

script.js

@@ -36,43 +36,58 @@ gameArea.addEventListener('touchmove', (e) => {
 
 function handlePaddleCollision(paddleY, paddleX, isLeftPaddle) {
     const ballRadius = ballSize / 2;
+    const paddleRight = paddleX + paddleWidth;
+    const paddleTop = paddleY;
+    const paddleBottom = paddleY + paddleHeight;
+
+    // Closest point on paddle to ball's center
+    let closestX = ballX;
+    if (isLeftPaddle) {
+        closestX = paddleRight;
+    } else {
+        closestX = paddleX;
+    }
 
-    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;
-            }
-        }
+    let closestY = ballY;
+    if (ballY < paddleTop) {
+        closestY = paddleTop;
+    } else if (ballY > paddleBottom) {
+        closestY = paddleBottom;
+    }
+
+    // Vector from ball to closest point
+    const dx = ballX - closestX;
+    const dy = ballY - closestY;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+
+    if (distance <= ballRadius) {
+        // Collision occurs
+        // Calculate normal vector
+        const normalX = isLeftPaddle ? 1 : -1;
+        const normalY = 0;
+
+        // Current velocity
+        const velocity = { x: ballSpeedX, y: ballSpeedY };
+
+        // Reflect velocity over the normal
+        const dot = velocity.x * normalX + velocity.y * normalY;
+        const reflected = {
+            x: velocity.x - 2 * dot * normalX,
+            y: velocity.y - 2 * dot * normalY
+        };
+
+        // Adjust Y velocity based on hit position
+        const hitPosition = (closestY - (paddleTop + paddleHeight / 2)) / (paddleHeight / 2);
+        const angle = hitPosition * maxAngle * (Math.PI / 180);
+        reflected.y = Math.sin(angle) * Math.abs(reflected.x);
+
+        // Set new velocity
+        ballSpeedX = reflected.x;
+        ballSpeedY = reflected.y;
+
+        // Reposition ball outside the paddle
+        const overlap = ballRadius - distance;
+        ballX += normalX * overlap;
     }
 }