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; 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; const paddleHeight = 80; const paddleWidth = 10; const ballSize = 15; const maxAngle = 45; gameArea.addEventListener('touchmove', (e) => { e.preventDefault(); let touchY = e.touches[0].clientY; if (e.touches[0].clientX < window.innerWidth / 2) { paddleLeftY = touchY - paddleHeight / 2; paddleLeftY = Math.max(0, Math.min(paddleLeftY, window.innerHeight - paddleHeight)); if (isGamePaused) { isGamePaused = false; } } }); function handlePaddleCollision(paddleY, paddleX, isLeftPaddle) { const ballRadius = ballSize / 2; if (isLeftPaddle && ballSpeedX < 0) { // Collision X position for left paddle let collisionX = paddleX + paddleWidth + ballRadius; let t = (collisionX - ballX) / ballSpeedX; if (t >= 0 && t <= 1) { let collisionY = ballY + ballSpeedY * t; if (collisionY >= paddleY && collisionY <= paddleY + paddleHeight) { // Collision detected with left paddle let hitPosition = collisionY - (paddleY + paddleHeight / 2); let angle = hitPosition / (paddleHeight / 2) * maxAngle * (Math.PI / 180); // Update ball's velocity ballSpeedX = Math.abs(ballSpeedX); // Reverse X direction for left paddle ballSpeedY = Math.sin(angle) * ballSpeedX; // Reposition ball outside the paddle ballX = collisionX + ballRadius; ballY = collisionY; } } } else if (!isLeftPaddle && ballSpeedX > 0) { // Collision X position for right paddle let collisionX = paddleX - ballRadius; let t = (collisionX - ballX) / ballSpeedX; if (t >= 0 && t <= 1) { let collisionY = ballY + ballSpeedY * t; if (collisionY >= paddleY && collisionY <= paddleY + paddleHeight) { // Collision detected with right paddle let hitPosition = collisionY - (paddleY + paddleHeight / 2); let angle = hitPosition / (paddleHeight / 2) * maxAngle * (Math.PI / 180); // Update ball's velocity ballSpeedX = -Math.abs(ballSpeedX); // Reverse X direction for right paddle ballSpeedY = Math.sin(angle) * Math.abs(ballSpeedX); // Reposition ball outside the paddle ballX = collisionX - ballRadius; ballY = collisionY; } } } } function update() { if (!isGamePaused) { let previousBallX = ballX; ballX += ballSpeedX; ballY += ballSpeedY; // Ball collision with top and bottom walls if (ballY <= 0 || ballY >= window.innerHeight - ballSize) { ballSpeedY = -ballSpeedY; } // Check collision with left paddle using swept collision detection handlePaddleCollision(paddleLeftY, paddleWidth, true); // 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; resetBall('right'); } else if (ballX >= window.innerWidth) { playerScore++; playerScoreDisplay.textContent = playerScore; resetBall('left'); } } // Bot AI movement if (ballSpeedX > 0) { if (paddleRightY + paddleHeight / 2 < ballY) { paddleRightY += 3; } else if (paddleRightY + paddleHeight / 2 > ballY) { paddleRightY -= 3; } } paddleRightY = Math.max(0, Math.min(paddleRightY, window.innerHeight - paddleHeight)); ball.style.left = ballX + 'px'; ball.style.top = ballY + 'px'; paddleLeft.style.top = paddleLeftY + 'px'; paddleRight.style.top = paddleRightY + 'px'; 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); } ballSpeedY = 0; } // Start the game loop update();