Untitled
unknown
plain_text
5 months ago
3.8 kB
4
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Simple Ping Pong Game</title> <style> body { background: #333; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; } canvas { background: #000; display: block; } </style> </head> <body> <canvas id="gameCanvas" width="800" height="400"></canvas> <script> // Get canvas and context const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); // Paddle properties const paddleWidth = 10; const paddleHeight = 80; // Positions let leftPaddleY = (canvas.height - paddleHeight) / 2; let rightPaddleY = (canvas.height - paddleHeight) / 2; // Ball properties let ballX = canvas.width / 2; let ballY = canvas.height / 2; let ballRadius = 8; let ballSpeedX = 4; let ballSpeedY = 4; // Movement flags let wPressed = false; let sPressed = false; let upPressed = false; let downPressed = false; // Event listeners for keys document.addEventListener('keydown', keyDownHandler); document.addEventListener('keyup', keyUpHandler); function keyDownHandler(e) { if (e.key === 'w' || e.key === 'W') wPressed = true; if (e.key === 's' || e.key === 'S') sPressed = true; if (e.key === 'ArrowUp') upPressed = true; if (e.key === 'ArrowDown') downPressed = true; } function keyUpHandler(e) { if (e.key === 'w' || e.key === 'W') wPressed = false; if (e.key === 's' || e.key === 'S') sPressed = false; if (e.key === 'ArrowUp') upPressed = false; if (e.key === 'ArrowDown') downPressed = false; } // Draw everything function draw() { // Clear screen ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw left paddle ctx.fillStyle = 'white'; ctx.fillRect(10, leftPaddleY, paddleWidth, paddleHeight); // Draw right paddle ctx.fillRect(canvas.width - paddleWidth - 10, rightPaddleY, paddleWidth, paddleHeight); // Draw ball ctx.beginPath(); ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2); ctx.fill(); ctx.closePath(); } // Move paddles function movePaddles() { const paddleSpeed = 5; if (wPressed && leftPaddleY > 0) { leftPaddleY -= paddleSpeed; } if (sPressed && leftPaddleY < canvas.height - paddleHeight) { leftPaddleY += paddleSpeed; } if (upPressed && rightPaddleY > 0) { rightPaddleY -= paddleSpeed; } if (downPressed && rightPaddleY < canvas.height - paddleHeight) { rightPaddleY += paddleSpeed; } } // Move ball function moveBall() { ballX += ballSpeedX; ballY += ballSpeedY; // Top and bottom collision if (ballY - ballRadius < 0 || ballY + ballRadius > canvas.height) { ballSpeedY = -ballSpeedY; } // Left paddle collision if (ballX - ballRadius < 20 && ballY > leftPaddleY && ballY < leftPaddleY + paddleHeight) { ballSpeedX = -ballSpeedX; } // Right paddle collision if (ballX + ballRadius > canvas.width - 20 && ballY > rightPaddleY && ballY < rightPaddleY + paddleHeight) { ballSpeedX = -ballSpeedX; } // If the ball goes off screen left or right, just reset it if (ballX + ballRadius < 0 || ballX - ballRadius > canvas.width) { ballX = canvas.width / 2; ballY = canvas.height / 2; ballSpeedX = -ballSpeedX; ballSpeedY = 4; // Reset in case it got wild } } function gameLoop() { movePaddles(); moveBall(); draw(); requestAnimationFrame(gameLoop); } gameLoop(); </script> </body> </html>
Editor is loading...
Leave a Comment