Update script.js

script.js

@@ -3,17 +3,37 @@ const paddleLeft = document.getElementById('paddleLeft');
 const paddleRight = document.getElementById('paddleRight');
 const ball = document.getElementById('ball');
 
-let paddleLeftY = 160;
-let paddleRightY = 160;
-let ballX = 195;
-let ballY = 195;
-let ballSpeedX = 2;
-let ballSpeedY = 2;
+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 = 3; // Vertical speed
 
-const paddleSpeed = 10;
 const paddleHeight = 80;
-const gameHeight = 400;
-const gameWidth = 400;
+const paddleWidth = 10;
+const ballSize = 15;
+
+// Touch controls
+let touchY = 0;
+
+gameArea.addEventListener('touchmove', (e) => {
+    e.preventDefault();
+    touchY = e.touches[0].clientY;
+
+    // Move paddles based on touch position
+    if (e.touches[0].clientX < window.innerWidth / 2) {
+        // Left paddle
+        paddleLeftY = touchY - paddleHeight / 2;
+        if (paddleLeftY < 0) paddleLeftY = 0;
+        if (paddleLeftY > window.innerHeight - paddleHeight) paddleLeftY = window.innerHeight - paddleHeight;
+    } else {
+        // Right paddle
+        paddleRightY = touchY - paddleHeight / 2;
+        if (paddleRightY < 0) paddleRightY = 0;
+        if (paddleRightY > window.innerHeight - paddleHeight) paddleRightY = window.innerHeight - paddleHeight;
+    }
+});
 
 function update() {
     // Update ball position
@@ -21,28 +41,35 @@ function update() {
     ballY += ballSpeedY;
 
     // Ball collision with top and bottom walls
-    if (ballY <= 0 || ballY >= gameHeight - 15) {
+    if (ballY <= 0 || ballY >= window.innerHeight - ballSize) {
         ballSpeedY = -ballSpeedY;
     }
 
     // Ball collision with paddles
-    if (ballX <= 20 && ballY >= paddleLeftY && ballY <= paddleLeftY + paddleHeight) {
+    if (
+        ballX <= paddleWidth + 10 && // Left paddle
+        ballY >= paddleLeftY &&
+        ballY <= paddleLeftY + paddleHeight
+    ) {
         ballSpeedX = -ballSpeedX;
     }
-    if (ballX >= gameWidth - 35 && ballY >= paddleRightY && ballY <= paddleRightY + paddleHeight) {
+
+    if (
+        ballX >= window.innerWidth - paddleWidth - 10 && // Right paddle
+        ballY >= paddleRightY &&
+        ballY <= paddleRightY + paddleHeight
+    ) {
         ballSpeedX = -ballSpeedX;
     }
 
-    // Ball out of bounds
-    if (ballX <= 0 || ballX >= gameWidth) {
+    // Ball out of bounds (left or right)
+    if (ballX <= 0 || ballX >= window.innerWidth) {
         resetBall();
     }
 
-    // Update ball position on screen
+    // Update ball and paddle positions
     ball.style.left = ballX + 'px';
     ball.style.top = ballY + 'px';
-
-    // Update paddle positions on screen
     paddleLeft.style.top = paddleLeftY + 'px';
     paddleRight.style.top = paddleRightY + 'px';
 
@@ -50,28 +77,10 @@ function update() {
 }
 
 function resetBall() {
-    ballX = gameWidth / 2;
-    ballY = gameHeight / 2;
-    ballSpeedX = -ballSpeedX;
+    ballX = window.innerWidth / 2;
+    ballY = window.innerHeight / 2;
+    ballSpeedX = -ballSpeedX; // Reverse direction
 }
 
-// Touch controls for paddles
-gameArea.addEventListener('touchmove', (e) => {
-    const touchY = e.touches[0].clientY - gameArea.getBoundingClientRect().top;
-
-    // Move left paddle
-    if (touchY < gameWidth / 2) {
-        paddleLeftY = touchY - paddleHeight / 2;
-        if (paddleLeftY < 0) paddleLeftY = 0;
-        if (paddleLeftY > gameHeight - paddleHeight) paddleLeftY = gameHeight - paddleHeight;
-    }
-
-    // Move right paddle
-    else {
-        paddleRightY = touchY - paddleHeight / 2;
-        if (paddleRightY < 0) paddleRightY = 0;
-        if (paddleRightY > gameHeight - paddleHeight) paddleRightY = gameHeight - paddleHeight;
-    }
-});
-
+// Start the game loop
 update();