Update script.js

script.js

@@ -5,68 +5,59 @@ const ball = document.getElementById('ball');
 const playerScoreDisplay = document.getElementById('playerScore');
 const botScoreDisplay = document.getElementById('botScore');
 
-let paddleLeftY = window.innerHeight / 2 - 40; // Center the paddle
-let paddleRightY = window.innerHeight / 2 - 40; // Center the paddle
-let ballX = window.innerWidth / 2; // Center the ball
-let ballY = window.innerHeight / 2; // Center the ball
-let ballSpeedX = 3; // Horizontal speed
-let ballSpeedY = 0; // Vertical speed (starts with no vertical movement)
+let paddleLeftY = window.innerHeight / 2 - 40;
+let paddleRightY = window.innerHeight / 2 - 40;
+let ballX = window.innerWidth / 2;
+let ballY = window.innerHeight / 2;
+let ballSpeedX = 3;
+let ballSpeedY = 0;
 let playerScore = 0;
 let botScore = 0;
-let isGamePaused = true; // Pause the game until the player moves
+let isGamePaused = true;
 
 const paddleHeight = 80;
 const paddleWidth = 10;
 const ballSize = 15;
-const maxAngle = 45; // Maximum angle in degrees
-
-// Touch controls
-let touchY = 0;
+const maxAngle = 45;
 
 gameArea.addEventListener('touchmove', (e) => {
     e.preventDefault();
-    touchY = e.touches[0].clientY;
+    let touchY = e.touches[0].clientY;
 
-    // Move left paddle based on touch position
     if (e.touches[0].clientX < window.innerWidth / 2) {
         paddleLeftY = touchY - paddleHeight / 2;
-        if (paddleLeftY < 0) paddleLeftY = 0;
-        if (paddleLeftY > window.innerHeight - paddleHeight) paddleLeftY = window.innerHeight - paddleHeight;
+        paddleLeftY = Math.max(0, Math.min(paddleLeftY, window.innerHeight - paddleHeight));
 
-        // Start the game if it's paused
         if (isGamePaused) {
             isGamePaused = false;
         }
     }
 });
 
-function handlePaddleCollision(paddleY, paddleXDirection, isLeftPaddle) {
-    const hitPosition = (ballY - (paddleY + paddleHeight / 2)) / (paddleHeight / 2);
-    const angle = hitPosition * maxAngle * (Math.PI / 180); // Convert to radians
+function handlePaddleCollision(paddleY, paddleX, isLeftPaddle) {
+    let previousBallX = ballX - ballSpeedX;
     
-    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) {
+    // Swept collision detection: Check if the ball crossed the paddle between frames
     if (
-        ballX >= paddleX && ballX <= paddleX + paddleWidth &&
-        ballY + ballSize >= paddleY && ballY <= paddleY + paddleHeight
+        previousBallX < paddleX + paddleWidth &&
+        ballX > paddleX &&
+        ballY + ballSize > paddleY &&
+        ballY < paddleY + paddleHeight
     ) {
-        handlePaddleCollision(paddleY, isLeftPaddle ? 1 : -1, isLeftPaddle);
+        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;
     }
 }
 
 function update() {
     if (!isGamePaused) {
-        // Update ball position
+        let previousBallX = ballX;
         ballX += ballSpeedX;
         ballY += ballSpeedY;
 
@@ -75,11 +66,13 @@ function update() {
             ballSpeedY = -ballSpeedY;
         }
 
-        // Check collision with paddles using improved detection
-        checkPaddleCollision(paddleLeftY, paddleWidth, true); // Left paddle
-        checkPaddleCollision(paddleRightY, window.innerWidth - paddleWidth - 25, false); // Right paddle
+        // Check collision with left paddle using swept collision detection
+        handlePaddleCollision(paddleLeftY, paddleWidth, true);
 
-        // Ball out of bounds (left or right)
+        // Check collision with right paddle using swept collision detection
+        handlePaddleCollision(paddleRightY, window.innerWidth - paddleWidth - 25, false);
+
+        // Ball out of bounds
         if (ballX <= 0) {
             botScore++;
             botScoreDisplay.textContent = botScore;
@@ -91,20 +84,17 @@ function update() {
         }
     }
 
-    // Bot logic for right paddle
-    if (ballSpeedX > 0) { // Ball is moving towards the right paddle
+    // Bot AI movement
+    if (ballSpeedX > 0) {
         if (paddleRightY + paddleHeight / 2 < ballY) {
-            paddleRightY += 3; // Move paddle down
+            paddleRightY += 3;
         } else if (paddleRightY + paddleHeight / 2 > ballY) {
-            paddleRightY -= 3; // Move paddle up
+            paddleRightY -= 3;
         }
     }
 
-    // Ensure the right paddle stays within bounds
-    if (paddleRightY < 0) paddleRightY = 0;
-    if (paddleRightY > window.innerHeight - paddleHeight) paddleRightY = window.innerHeight - paddleHeight;
+    paddleRightY = Math.max(0, Math.min(paddleRightY, window.innerHeight - paddleHeight));
 
-    // Update ball and paddle positions
     ball.style.left = ballX + 'px';
     ball.style.top = ballY + 'px';
     paddleLeft.style.top = paddleLeftY + 'px';
@@ -114,19 +104,19 @@ function update() {
 }
 
 function resetBall(side) {
-    isGamePaused = true; // Pause the game
+    isGamePaused = true;
 
     if (side === 'left') {
-        ballX = paddleWidth + 10; // Place ball on the left paddle
+        ballX = paddleWidth + 10;
         ballY = paddleLeftY + paddleHeight / 2;
-        ballSpeedX = Math.abs(ballSpeedX); // Move ball to the right
-    } else if (side === 'right') {
-        ballX = window.innerWidth - paddleWidth - 25; // Place ball on the right paddle
+        ballSpeedX = Math.abs(ballSpeedX);
+    } else {
+        ballX = window.innerWidth - paddleWidth - 25;
         ballY = paddleRightY + paddleHeight / 2;
-        ballSpeedX = -Math.abs(ballSpeedX); // Move ball to the left
+        ballSpeedX = -Math.abs(ballSpeedX);
     }
 
-    ballSpeedY = 0; // Reset vertical speed
+    ballSpeedY = 0;
 }
 
 // Start the game loop