Update script.js

script.js

@@ -5,155 +5,248 @@ const ball = document.getElementById('ball');
 const playerScoreDisplay = document.getElementById('playerScore');
 const botScoreDisplay = document.getElementById('botScore');
 
-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;
-
+// --- Constants ---
 const paddleHeight = 80;
 const paddleWidth = 10;
 const ballSize = 15;
-const maxAngle = 45;
+const maxAngle = 45; // Max bounce angle in degrees
+const initialBallSpeedX = 4; // Starting horizontal speed
+const speedIncreaseFactor = 1.1; // Speed multiplier on hit
+const maxBallSpeed = 15; // Maximum overall ball speed
+const botPaddleSpeed = 4; // Speed of the bot paddle
+
+// --- Game State Variables ---
+let paddleLeftY = window.innerHeight / 2 - paddleHeight / 2;
+let paddleRightY = window.innerHeight / 2 - paddleHeight / 2;
+let ballX = window.innerWidth / 2 - ballSize / 2;
+let ballY = window.innerHeight / 2 - ballSize / 2;
+let ballSpeedX = initialBallSpeedX; // Start with initial speed
+let ballSpeedY = 0;
+let playerScore = 0;
+let botScore = 0;
+let isGamePaused = true; // Start paused
 
+// --- Event Listeners ---
 gameArea.addEventListener('touchmove', (e) => {
     e.preventDefault();
+    if (!e.touches || e.touches.length === 0) return; // Safety check
+
     let touchY = e.touches[0].clientY;
+    let touchX = e.touches[0].clientX;
 
-    if (e.touches[0].clientX < window.innerWidth / 2) {
+    // Only control left paddle if touch is on the left half
+    if (touchX < window.innerWidth / 2) {
         paddleLeftY = touchY - paddleHeight / 2;
+        // Clamp paddle position within screen bounds
         paddleLeftY = Math.max(0, Math.min(paddleLeftY, window.innerHeight - paddleHeight));
+        paddleLeft.style.top = paddleLeftY + 'px';
 
+        // Start the game on first touch if paused
         if (isGamePaused) {
+            // Determine initial direction based on which side was touched (less relevant here, but good practice)
+            // ballSpeedX = initialBallSpeedX; // Or keep the direction from resetBall
             isGamePaused = false;
         }
     }
+}, { passive: false }); // Use passive: false if preventDefault is needed
+
+// Add a click/tap listener to start the game as well
+gameArea.addEventListener('click', () => {
+    if (isGamePaused) {
+        isGamePaused = false;
+        // Optional: decide initial direction if needed
+        // if (ballX < window.innerWidth / 2) ballSpeedX = initialBallSpeedX;
+        // else ballSpeedX = -initialBallSpeedX;
+    }
 });
 
+
+// --- Collision Handling ---
 function handlePaddleCollision(paddleY, paddleX, isLeftPaddle) {
     const ballRadius = ballSize / 2;
-    const paddleRight = paddleX + paddleWidth;
+    const ballCenterX = ballX + ballRadius;
+    const ballCenterY = ballY + ballRadius;
+
     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;
-    }
-
-    let closestY = ballY;
-    if (ballY < paddleTop) {
-        closestY = paddleTop;
-    } else if (ballY > paddleBottom) {
-        closestY = paddleBottom;
+    const paddleLeftEdge = paddleX;
+    const paddleRightEdge = paddleX + paddleWidth;
+
+    // Simple AABB collision check first (optimization)
+    if (ballCenterX + ballRadius < paddleLeftEdge ||
+        ballCenterX - ballRadius > paddleRightEdge ||
+        ballCenterY + ballRadius < paddleTop ||
+        ballCenterY - ballRadius > paddleBottom) {
+        return; // No collision based on bounding boxes
     }
 
-    // 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;
+    // More precise check: Find closest point on paddle to ball center
+    let closestX = Math.max(paddleLeftEdge, Math.min(ballCenterX, paddleRightEdge));
+    let closestY = Math.max(paddleTop, Math.min(ballCenterY, paddleBottom));
+
+    // Calculate distance between ball center and closest point
+    const dx = ballCenterX - closestX;
+    const dy = ballCenterY - closestY;
+    const distanceSquared = (dx * dx) + (dy * dy);
+
+    // Check if collision occurred (distance < radius)
+    if (distanceSquared < (ballRadius * ballRadius)) {
+
+        // --- Collision Response ---
+
+        // 1. Calculate where the ball hit the paddle vertically (normalized)
+        // hitPosition: -1 (top edge) to +1 (bottom edge)
+        const paddleCenterY = paddleTop + paddleHeight / 2;
+        let hitPosition = (ballCenterY - paddleCenterY) / (paddleHeight / 2);
+        // Clamp hitPosition to avoid extreme angles if hit exactly on corner
+        hitPosition = Math.max(-1, Math.min(1, hitPosition));
+
+        // 2. Calculate the bounce angle in radians
+        const bounceAngle = hitPosition * maxAngle * (Math.PI / 180);
+
+        // 3. Calculate the current speed
+        const currentSpeed = Math.sqrt(ballSpeedX * ballSpeedX + ballSpeedY * ballSpeedY);
+
+        // 4. Calculate the new speed (increase and cap)
+        let newSpeed = currentSpeed * speedIncreaseFactor;
+        newSpeed = Math.min(newSpeed, maxBallSpeed); // Apply max speed limit
+
+        // 5. Calculate new X and Y speeds based on angle and new total speed
+        // Determine the outward direction for X based on which paddle was hit
+        const directionX = isLeftPaddle ? 1 : -1;
+        ballSpeedX = directionX * newSpeed * Math.cos(bounceAngle);
+        ballSpeedY = newSpeed * Math.sin(bounceAngle);
+
+        // 6. Reposition ball slightly outside the paddle to prevent sticking (optional but recommended)
+        // Move ball along the collision normal (simplified as horizontal push)
+        const overlap = ballRadius - Math.sqrt(distanceSquared);
+         if (isLeftPaddle && dx < 0) { // Ball was moving right, hit left paddle
+             ballX += overlap; // Push right
+         } else if (!isLeftPaddle && dx > 0) { // Ball was moving left, hit right paddle
+             ballX -= overlap; // Push left
+         }
+         // A more accurate push would be along the dx, dy vector, but horizontal is often sufficient
+
+         // Ensure ball is definitely outside after adjustment
+         if (isLeftPaddle && ballX + ballSize < paddleRightEdge) {
+            ballX = paddleRightEdge - ballSize / 2; // Adjust precisely if needed
+         } else if (!isLeftPaddle && ballX > paddleLeftEdge) {
+             ballX = paddleLeftEdge - ballSize / 2; // Adjust precisely if needed
+         }
     }
 }
 
+
+// --- Game Update Loop ---
 function update() {
     if (!isGamePaused) {
-        let previousBallX = ballX;
+        // Store previous position for collision checks if needed (not strictly needed with current collision)
+        // let previousBallX = ballX;
+        // let previousBallY = ballY;
+
+        // Move Ball
         ballX += ballSpeedX;
         ballY += ballSpeedY;
 
         // Ball collision with top and bottom walls
-        if (ballY <= 0 || ballY >= window.innerHeight - ballSize) {
-            ballSpeedY = -ballSpeedY;
+        if (ballY <= 0) {
+            ballY = 0; // Prevent sticking
+            ballSpeedY = Math.abs(ballSpeedY); // Ensure it bounces down
+        } else if (ballY >= window.innerHeight - ballSize) {
+            ballY = window.innerHeight - ballSize; // Prevent sticking
+            ballSpeedY = -Math.abs(ballSpeedY); // Ensure it bounces up
         }
 
-        // Check collision with left paddle using swept collision detection
-        handlePaddleCollision(paddleLeftY, paddleWidth, true);
+        // Paddle Collisions
+        // Check collision with left paddle
+        if (ballSpeedX < 0) { // Only check left paddle if ball is moving left
+             handlePaddleCollision(paddleLeftY, 0, true); // Left paddle is at x=0
+        }
+        // Check collision with right paddle
+        else if (ballSpeedX > 0) { // Only check right paddle if ball is moving right
+             handlePaddleCollision(paddleRightY, window.innerWidth - paddleWidth, false); // Right paddle position
+        }
 
-        // Check collision with right paddle using swept collision detection
-        handlePaddleCollision(paddleRightY, window.innerWidth - paddleWidth - 25, false);
 
-        // Ball out of bounds
-        if (ballX <= 0) {
+        // Ball out of bounds (Score)
+        if (ballX + ballSize <= 0) { // Ball went past left edge
             botScore++;
             botScoreDisplay.textContent = botScore;
-            resetBall('right');
-        } else if (ballX >= window.innerWidth) {
+            resetBall('right'); // Bot serves next
+        } else if (ballX >= window.innerWidth) { // Ball went past right edge
             playerScore++;
             playerScoreDisplay.textContent = playerScore;
-            resetBall('left');
+            resetBall('left'); // Player serves next
         }
-    }
 
-    // Bot AI movement
-    if (ballSpeedX > 0) {
-        if (paddleRightY + paddleHeight / 2 < ballY) {
-            paddleRightY += 3;
-        } else if (paddleRightY + paddleHeight / 2 > ballY) {
-            paddleRightY -= 3;
+        // --- Bot AI Movement ---
+        // Move bot paddle only if the ball is moving towards it
+        if (ballSpeedX > 0) {
+            const botPaddleCenter = paddleRightY + paddleHeight / 2;
+            const ballCenter = ballY + ballSize / 2;
+            const targetY = ballCenter - paddleHeight / 2; // Target top position for bot paddle
+
+            // Move towards the ball's Y position, but not faster than botPaddleSpeed
+            if (paddleRightY < targetY) {
+                paddleRightY += Math.min(botPaddleSpeed, targetY - paddleRightY);
+            } else if (paddleRightY > targetY) {
+                 paddleRightY -= Math.min(botPaddleSpeed, paddleRightY - targetY);
+            }
+             // Clamp bot paddle position
+            paddleRightY = Math.max(0, Math.min(paddleRightY, window.innerHeight - paddleHeight));
+            paddleRight.style.top = paddleRightY + 'px';
         }
     }
 
-    paddleRightY = Math.max(0, Math.min(paddleRightY, window.innerHeight - paddleHeight));
-
+    // Update visual positions regardless of pause state (allows resetBall positioning)
     ball.style.left = ballX + 'px';
     ball.style.top = ballY + 'px';
-    paddleLeft.style.top = paddleLeftY + 'px';
-    paddleRight.style.top = paddleRightY + 'px';
+    // Player paddle updated in event listener
+    // Bot paddle updated in AI logic or here if needed outside AI block
+
 
+    // Request next frame
     requestAnimationFrame(update);
 }
 
-function resetBall(side) {
-    isGamePaused = true;
-
-    if (side === 'left') {
-        ballX = paddleWidth + 10;
-        ballY = paddleLeftY + paddleHeight / 2;
-        ballSpeedX = Math.abs(ballSpeedX);
-    } else {
-        ballX = window.innerWidth - paddleWidth - 25;
-        ballY = paddleRightY + paddleHeight / 2;
-        ballSpeedX = -Math.abs(ballSpeedX);
+// --- Reset Ball Function ---
+function resetBall(scoringSide) {
+    isGamePaused = true; // Pause until next touch/click
+
+    // Center the ball vertically
+    ballY = window.innerHeight / 2 - ballSize / 2;
+
+    // Position ball near the paddle that will serve
+    if (scoringSide === 'left') { // Player scored, player serves (ball starts near left paddle)
+        ballX = paddleWidth + 20; // Start just right of left paddle
+        ballSpeedX = initialBallSpeedX; // Move right
+    } else { // Bot scored, bot serves (ball starts near right paddle)
+        ballX = window.innerWidth - paddleWidth - ballSize - 20; // Start just left of right paddle
+        ballSpeedX = -initialBallSpeedX; // Move left
     }
 
+    // Reset vertical speed
     ballSpeedY = 0;
+
+    // Optional: Briefly show ball position before game restarts on touch/click
+    ball.style.left = ballX + 'px';
+    ball.style.top = ballY + 'px';
+
+    // Display message (optional)
+    // gameMessage.textContent = "Tap to Serve";
+    // gameMessage.style.display = 'block';
 }
 
+// --- Initial Setup ---
+// Set initial paddle positions visually
+paddleLeft.style.top = paddleLeftY + 'px';
+paddleRight.style.top = paddleRightY + 'px';
+// Set initial ball position visually
+ball.style.left = ballX + 'px';
+ball.style.top = ballY + 'px';
+// Set initial scores visually
+playerScoreDisplay.textContent = playerScore;
+botScoreDisplay.textContent = botScore;
+
 // Start the game loop
-update();
+requestAnimationFrame(update);