Update script.js

script.js

@@ -2,6 +2,8 @@ const gameArea = document.getElementById('gameArea');
 const paddleLeft = document.getElementById('paddleLeft');
 const paddleRight = document.getElementById('paddleRight');
 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
@@ -9,6 +11,9 @@ let ballX = window.innerWidth / 2; // Center the ball
 let ballY = window.innerHeight / 2; // Center the ball
 let ballSpeedX = 3; // Horizontal speed
 let ballSpeedY = 3; // Vertical speed
+let playerScore = 0;
+let botScore = 0;
+let isGamePaused = true; // Pause the game until the player moves
 
 const paddleHeight = 80;
 const paddleWidth = 10;
@@ -26,40 +31,53 @@ gameArea.addEventListener('touchmove', (e) => {
         paddleLeftY = touchY - paddleHeight / 2;
         if (paddleLeftY < 0) paddleLeftY = 0;
         if (paddleLeftY > window.innerHeight - paddleHeight) paddleLeftY = window.innerHeight - paddleHeight;
+
+        // Start the game if it's paused
+        if (isGamePaused) {
+            isGamePaused = false;
+        }
     }
 });
 
 function update() {
-    // Update ball position
-    ballX += ballSpeedX;
-    ballY += ballSpeedY;
-
-    // Ball collision with top and bottom walls
-    if (ballY <= 0 || ballY >= window.innerHeight - ballSize) {
-        ballSpeedY = -ballSpeedY;
-    }
+    if (!isGamePaused) {
+        // Update ball position
+        ballX += ballSpeedX;
+        ballY += ballSpeedY;
+
+        // Ball collision with top and bottom walls
+        if (ballY <= 0 || ballY >= window.innerHeight - ballSize) {
+            ballSpeedY = -ballSpeedY;
+        }
 
-    // Ball collision with left paddle
-    if (
-        ballX <= paddleWidth + 10 && // Left paddle
-        ballY + ballSize >= paddleLeftY &&
-        ballY <= paddleLeftY + paddleHeight
-    ) {
-        ballSpeedX = -ballSpeedX;
-    }
+        // Ball collision with left paddle
+        if (
+            ballX <= paddleWidth + 10 && // Left paddle
+            ballY + ballSize >= paddleLeftY &&
+            ballY <= paddleLeftY + paddleHeight
+        ) {
+            ballSpeedX = -ballSpeedX;
+        }
 
-    // Ball collision with right paddle
-    if (
-        ballX >= window.innerWidth - paddleWidth - 25 && // Right paddle
-        ballY + ballSize >= paddleRightY &&
-        ballY <= paddleRightY + paddleHeight
-    ) {
-        ballSpeedX = -ballSpeedX;
-    }
+        // Ball collision with right paddle
+        if (
+            ballX >= window.innerWidth - paddleWidth - 25 && // Right paddle
+            ballY + ballSize >= paddleRightY &&
+            ballY <= paddleRightY + paddleHeight
+        ) {
+            ballSpeedX = -ballSpeedX;
+        }
 
-    // Ball out of bounds (left or right)
-    if (ballX <= 0 || ballX >= window.innerWidth) {
-        resetBall();
+        // Ball out of bounds (left or right)
+        if (ballX <= 0) {
+            botScore++;
+            botScoreDisplay.textContent = botScore;
+            resetBall('right');
+        } else if (ballX >= window.innerWidth) {
+            playerScore++;
+            playerScoreDisplay.textContent = playerScore;
+            resetBall('left');
+        }
     }
 
     // Bot logic for right paddle
@@ -84,10 +102,20 @@ function update() {
     requestAnimationFrame(update);
 }
 
-function resetBall() {
-    ballX = window.innerWidth / 2;
-    ballY = window.innerHeight / 2;
-    ballSpeedX = -ballSpeedX; // Reverse direction
+function resetBall(side) {
+    isGamePaused = true; // Pause the game
+
+    if (side === 'left') {
+        ballX = paddleWidth + 10; // Place ball on the left paddle
+        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
+        ballY = paddleRightY + paddleHeight / 2;
+        ballSpeedX = -Math.abs(ballSpeedX); // Move ball to the left
+    }
+
+    ballSpeedY = (Math.random() - 0.5) * 6; // Randomize vertical speed
 }
 
 // Start the game loop