Create script.js

script.js

@@ -0,0 +1,77 @@
+const gameArea = document.getElementById('gameArea');
+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;
+
+const paddleSpeed = 10;
+const paddleHeight = 80;
+const gameHeight = 400;
+const gameWidth = 400;
+
+function update() {
+    // Update ball position
+    ballX += ballSpeedX;
+    ballY += ballSpeedY;
+
+    // Ball collision with top and bottom walls
+    if (ballY <= 0 || ballY >= gameHeight - 15) {
+        ballSpeedY = -ballSpeedY;
+    }
+
+    // Ball collision with paddles
+    if (ballX <= 20 && ballY >= paddleLeftY && ballY <= paddleLeftY + paddleHeight) {
+        ballSpeedX = -ballSpeedX;
+    }
+    if (ballX >= gameWidth - 35 && ballY >= paddleRightY && ballY <= paddleRightY + paddleHeight) {
+        ballSpeedX = -ballSpeedX;
+    }
+
+    // Ball out of bounds
+    if (ballX <= 0 || ballX >= gameWidth) {
+        resetBall();
+    }
+
+    // Update ball position on screen
+    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';
+
+    requestAnimationFrame(update);
+}
+
+function resetBall() {
+    ballX = gameWidth / 2;
+    ballY = gameHeight / 2;
+    ballSpeedX = -ballSpeedX;
+}
+
+// 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;
+    }
+});
+
+update();