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</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| height: 100vh; | |
| background-color: #000; | |
| } | |
| canvas { | |
| border: 2px solid #fff; | |
| } | |
| .controls { | |
| margin-top: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .speed-control { | |
| margin-top: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="pongCanvas"></canvas> | |
| <div class="controls"> | |
| <button id="playerVsPlayer">Player vs Player</button> | |
| <button id="playerVsAI">Player vs AI</button> | |
| <div class="speed-control"> | |
| <label for="ballSpeed">Ball Speed:</label> | |
| <input type="range" id="ballSpeed" min="1" max="10" value="7" oninput="updateBallSpeed(this.value)"> | |
| </div> | |
| </div> | |
| <script> | |
| const canvas = document.getElementById('pongCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| // Set canvas dimensions | |
| canvas.width = 800; | |
| canvas.height = 600; | |
| // Ball properties | |
| const ball = { | |
| x: canvas.width / 2, | |
| y: canvas.height / 2, | |
| radius: 10, | |
| speed: 7, | |
| dx: 4, | |
| dy: -4 | |
| }; | |
| // Paddle properties | |
| const paddleWidth = 10; | |
| const paddleHeight = 100; | |
| const leftPaddle = { | |
| x: 0, | |
| y: (canvas.height - paddleHeight) / 2, | |
| width: paddleWidth, | |
| height: paddleHeight, | |
| speed: 8 | |
| }; | |
| const rightPaddle = { | |
| x: canvas.width - paddleWidth, | |
| y: (canvas.height - paddleHeight) / 2, | |
| width: paddleWidth, | |
| height: paddleHeight, | |
| speed: 8 | |
| }; | |
| // Player scores | |
| let leftScore = 0; | |
| let rightScore = 0; | |
| // Game mode | |
| let isPlayerVsAI = false; | |
| // Update ball speed | |
| function updateBallSpeed(newSpeed) { | |
| ball.speed = newSpeed; | |
| ball.dx = Math.sign(ball.dx) * newSpeed; | |
| ball.dy = Math.sign(ball.dy) * newSpeed; | |
| } | |
| // Draw functions | |
| function drawBall() { | |
| ctx.beginPath(); | |
| ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2); | |
| ctx.fillStyle = '#fff'; | |
| ctx.fill(); | |
| ctx.closePath(); | |
| } | |
| function drawPaddle(paddle) { | |
| ctx.beginPath(); | |
| ctx.rect(paddle.x, paddle.y, paddle.width, paddle.height); | |
| ctx.fillStyle = '#fff'; | |
| ctx.fill(); | |
| ctx.closePath(); | |
| } | |
| function drawScores() { | |
| ctx.font = '30px Arial'; | |
| ctx.fillStyle = '#fff'; | |
| ctx.fillText(leftScore, canvas.width / 4, 50); | |
| ctx.fillText(rightScore, 3 * canvas.width / 4, 50); | |
| } | |
| // Update game state | |
| function update() { | |
| // Move ball | |
| ball.x += ball.dx; | |
| ball.y += ball.dy; | |
| // Bounce ball off top and bottom walls | |
| if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) { | |
| ball.dy = -ball.dy; | |
| } | |
| // Bounce ball off paddles | |
| if (ball.x - ball.radius < leftPaddle.x + leftPaddle.width && | |
| ball.y > leftPaddle.y && ball.y < leftPaddle.y + leftPaddle.height) { | |
| ball.dx = -ball.dx; | |
| } | |
| if (ball.x + ball.radius > rightPaddle.x && | |
| ball.y > rightPaddle.y && ball.y < rightPaddle.y + rightPaddle.height) { | |
| ball.dx = -ball.dx; | |
| } | |
| // Score points | |
| if (ball.x - ball.radius < 0) { | |
| rightScore++; | |
| resetBall(); | |
| } | |
| if (ball.x + ball.radius > canvas.width) { | |
| leftScore++; | |
| resetBall(); | |
| } | |
| // Move paddles | |
| if (!isPlayerVsAI) { | |
| if (keys['ArrowUp'] && rightPaddle.y > 0) { | |
| rightPaddle.y -= rightPaddle.speed; | |
| } | |
| if (keys['ArrowDown'] && rightPaddle.y < canvas.height - rightPaddle.height) { | |
| rightPaddle.y += rightPaddle.speed; | |
| } | |
| } else { | |
| // AI logic | |
| if (rightPaddle.y + rightPaddle.height / 2 < ball.y) { | |
| rightPaddle.y += rightPaddle.speed; | |
| } else if (rightPaddle.y + rightPaddle.height / 2 > ball.y) { | |
| rightPaddle.y -= rightPaddle.speed; | |
| } | |
| } | |
| if (keys['w'] && leftPaddle.y > 0) { | |
| leftPaddle.y -= leftPaddle.speed; | |
| } | |
| if (keys['s'] && leftPaddle.y < canvas.height - leftPaddle.height) { | |
| leftPaddle.y += leftPaddle.speed; | |
| } | |
| } | |
| // Reset ball position | |
| function resetBall() { | |
| ball.x = canvas.width / 2; | |
| ball.y = canvas.height / 2; | |
| ball.dx = -ball.dx; | |
| } | |
| // Draw everything | |
| function draw() { | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| drawBall(); | |
| drawPaddle(leftPaddle); | |
| drawPaddle(rightPaddle); | |
| drawScores(); | |
| } | |
| // Game loop | |
| function gameLoop() { | |
| update(); | |
| draw(); | |
| requestAnimationFrame(gameLoop); | |
| } | |
| // Key handling | |
| const keys = {}; | |
| document.addEventListener('keydown', function(e) { | |
| keys[e.key] = true; | |
| }); | |
| document.addEventListener('keyup', function(e) { | |
| delete keys[e.key]; | |
| }); | |
| // Button event listeners | |
| document.getElementById('playerVsPlayer').addEventListener('click', function() { | |
| isPlayerVsAI = false; | |
| }); | |
| document.getElementById('playerVsAI').addEventListener('click', function() { | |
| isPlayerVsAI = true; | |
| }); | |
| // Start the game | |
| gameLoop(); | |
| </script> | |
| </body> | |
| </html> |