Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pong Game (Player vs AI)</title> | |
| <style> | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| background-color: #000; | |
| } | |
| canvas { | |
| border: 2px solid #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="gameCanvas" width="800" height="500"></canvas> | |
| <script> | |
| const canvas = document.getElementById('gameCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| // Game variables | |
| const screenWidth = 800; | |
| const screenHeight = 500; | |
| let playerScore = 0; | |
| let aiScore = 0; | |
| // Ball | |
| const ball = { | |
| x: screenWidth / 2, | |
| y: screenHeight / 2, | |
| width: 30, | |
| height: 30, | |
| speedX: 7, | |
| speedY: 7 | |
| }; | |
| // Paddles | |
| const paddleWidth = 10; | |
| const paddleHeight = 140; | |
| const playerPaddle = { | |
| x: 10, | |
| y: screenHeight / 2 - paddleHeight / 2, | |
| width: paddleWidth, | |
| height: paddleHeight, | |
| speed: 0 | |
| }; | |
| const aiPaddle = { | |
| x: screenWidth - 20, | |
| y: screenHeight / 2 - paddleHeight / 2, | |
| width: paddleWidth, | |
| height: paddleHeight, | |
| speed: 5 | |
| }; | |
| function ballAnimation() { | |
| ball.x += ball.speedX; | |
| ball.y += ball.speedY; | |
| if (ball.y <= 0 || ball.y + ball.height >= screenHeight) { | |
| ball.speedY *= -1; | |
| } | |
| if (ball.x + ball.width >= screenWidth) { | |
| playerScore++; | |
| ballRestart(); | |
| } else if (ball.x <= 0) { | |
| aiScore++; | |
| ballRestart(); | |
| } | |
| if ( | |
| (ball.x <= playerPaddle.x + playerPaddle.width && | |
| ball.y + ball.height >= playerPaddle.y && | |
| ball.y <= playerPaddle.y + playerPaddle.height) || | |
| (ball.x + ball.width >= aiPaddle.x && | |
| ball.y + ball.height >= aiPaddle.y && | |
| ball.y <= aiPaddle.y + aiPaddle.height) | |
| ) { | |
| ball.speedX *= -1; | |
| } | |
| } | |
| function playerPaddleAnimation() { | |
| playerPaddle.y = Math.max(0, Math.min(screenHeight - playerPaddle.height, playerPaddle.y + playerPaddle.speed)); | |
| } | |
| function aiPaddleAnimation() { | |
| const paddleCenter = aiPaddle.y + aiPaddle.height / 2; | |
| const ballCenter = ball.y + ball.height / 2; | |
| if (paddleCenter < ballCenter - 35) { | |
| aiPaddle.y += aiPaddle.speed; | |
| } else if (paddleCenter > ballCenter + 35) { | |
| aiPaddle.y -= aiPaddle.speed; | |
| } | |
| aiPaddle.y = Math.max(0, Math.min(screenHeight - aiPaddle.height, aiPaddle.y)); | |
| } | |
| function ballRestart() { | |
| ball.x = screenWidth / 2; | |
| ball.y = screenHeight / 2; | |
| ball.speedX *= -1; | |
| } | |
| function draw() { | |
| // Clear canvas | |
| ctx.fillStyle = 'rgb(30, 30, 30)'; | |
| ctx.fillRect(0, 0, screenWidth, screenHeight); | |
| // Draw middle line | |
| ctx.strokeStyle = 'rgb(200, 200, 200)'; | |
| ctx.beginPath(); | |
| ctx.moveTo(screenWidth / 2, 0); | |
| ctx.lineTo(screenWidth / 2, screenHeight); | |
| ctx.stroke(); | |
| // Draw paddles | |
| ctx.fillStyle = 'blue'; | |
| ctx.fillRect(playerPaddle.x, playerPaddle.y, playerPaddle.width, playerPaddle.height); | |
| ctx.fillStyle = 'red'; | |
| ctx.fillRect(aiPaddle.x, aiPaddle.y, aiPaddle.width, aiPaddle.height); | |
| // Draw ball | |
| ctx.fillStyle = 'white'; | |
| ctx.beginPath(); | |
| ctx.arc(ball.x + ball.width / 2, ball.y + ball.height / 2, ball.width / 2, 0, Math.PI * 2); | |
| ctx.fill(); | |
| // Draw scores | |
| ctx.font = '32px Arial'; | |
| ctx.fillStyle = 'white'; | |
| ctx.fillText(playerScore, 360, 40); | |
| ctx.fillText(aiScore, 420, 40); | |
| } | |
| function gameLoop() { | |
| ballAnimation(); | |
| playerPaddleAnimation(); | |
| aiPaddleAnimation(); | |
| draw(); | |
| requestAnimationFrame(gameLoop); | |
| } | |
| // Keyboard controls | |
| document.addEventListener('keydown', (event) => { | |
| if (event.key === 'w' || event.key === 'W') { | |
| playerPaddle.speed = -7; | |
| } else if (event.key === 's' || event.key === 'S') { | |
| playerPaddle.speed = 7; | |
| } | |
| }); | |
| document.addEventListener('keyup', (event) => { | |
| if (event.key === 'w' || event.key === 'W' || event.key === 's' || event.key === 'S') { | |
| playerPaddle.speed = 0; | |
| } | |
| }); | |
| // Start the game | |
| gameLoop(); | |
| </script> | |
| </body> | |
| </html> |