Untitled
unknown
plain_text
13 days ago
3.7 kB
3
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>2-Player Pong</title> <style> body { margin: 0; background: #000; color: #fff; font-family: sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } canvas { background: #111; border: 2px solid white; } #score { margin: 10px; font-size: 24px; } #reset { margin-top: 10px; padding: 8px 16px; font-size: 16px; cursor: pointer; } </style> </head> <body> <div id="score">Player 1: 0 | Player 2: 0</div> <canvas id="game" width="800" height="500"></canvas> <button id="reset">Reset</button> <script> const canvas = document.getElementById("game"); const ctx = canvas.getContext("2d"); const scoreDisplay = document.getElementById("score"); const resetBtn = document.getElementById("reset"); const paddleHeight = 100; const paddleWidth = 10; const ballSize = 10; let player1Y = canvas.height / 2 - paddleHeight / 2; let player2Y = canvas.height / 2 - paddleHeight / 2; let player1Score = 0; let player2Score = 0; let ballX = canvas.width / 2; let ballY = canvas.height / 2; let ballSpeedX = 5; let ballSpeedY = 3; const keys = {}; document.addEventListener("keydown", e => (keys[e.key] = true)); document.addEventListener("keyup", e => (keys[e.key] = false)); resetBtn.addEventListener("click", () => { player1Score = 0; player2Score = 0; resetBall(); updateScore(); }); function updateScore() { scoreDisplay.textContent = `Player 1: ${player1Score} | Player 2: ${player2Score}`; } function resetBall() { ballX = canvas.width / 2; ballY = canvas.height / 2; ballSpeedX *= Math.random() > 0.5 ? 1 : -1; ballSpeedY = 3 * (Math.random() > 0.5 ? 1 : -1); } function gameLoop() { // Move paddles if (keys["w"] && player1Y > 0) player1Y -= 6; if (keys["s"] && player1Y + paddleHeight < canvas.height) player1Y += 6; if (keys["ArrowUp"] && player2Y > 0) player2Y -= 6; if (keys["ArrowDown"] && player2Y + paddleHeight < canvas.height) player2Y += 6; // Move ball ballX += ballSpeedX; ballY += ballSpeedY; // Wall collision if (ballY <= 0 || ballY + ballSize >= canvas.height) ballSpeedY *= -1; // Paddle collision if ( ballX <= paddleWidth && ballY + ballSize > player1Y && ballY < player1Y + paddleHeight ) { ballSpeedX *= -1; } if ( ballX + ballSize >= canvas.width - paddleWidth && ballY + ballSize > player2Y && ballY < player2Y + paddleHeight ) { ballSpeedX *= -1; } // Scoring if (ballX < 0) { player2Score++; updateScore(); resetBall(); } if (ballX > canvas.width) { player1Score++; updateScore(); resetBall(); } // Draw everything ctx.clearRect(0, 0, canvas.width, canvas.height); // Middle line ctx.fillStyle = "#444"; for (let i = 0; i < canvas.height; i += 30) { ctx.fillRect(canvas.width / 2 - 1, i, 2, 20); } // Paddles ctx.fillStyle = "#fff"; ctx.fillRect(0, player1Y, paddleWidth, paddleHeight); ctx.fillRect(canvas.width - paddleWidth, player2Y, paddleWidth, paddleHeight); // Ball ctx.fillRect(ballX, ballY, ballSize, ballSize); requestAnimationFrame(gameLoop); } updateScore(); gameLoop(); </script> </body> </html>
Editor is loading...
Leave a Comment