Untitled
unknown
plain_text
4 days ago
4.3 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; } button { margin: 5px; padding: 8px 16px; font-size: 16px; cursor: pointer; } </style> </head> <body> <canvas id="gameCanvas" width="800" height="500"></canvas> <div class="controls"> <button onclick="resetGame()">Reset</button> <button onclick="togglePause()">{{ Pause }}</button> </div> <div class="score" id="scoreDisplay">Player 1: 0 | Player 2: 0</div> <script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const paddleWidth = 10, paddleHeight = 100; let leftPaddleY = canvas.height / 2 - paddleHeight / 2; let rightPaddleY = canvas.height / 2 - paddleHeight / 2; let upPressed = false, downPressed = false; let wPressed = false, sPressed = false; let ballX = canvas.width / 2; let ballY = canvas.height / 2; let ballRadius = 8; let ballSpeed = 4; let ballAngleX = ballSpeed, ballAngleY = ballSpeed; let score1 = 0, score2 = 0; let isPaused = false; let hitCount = 0; function drawPaddle(x, y) { ctx.fillStyle = 'white'; ctx.fillRect(x, y, paddleWidth, paddleHeight); } function drawBall() { ctx.beginPath(); ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2); ctx.fillStyle = 'white'; ctx.fill(); ctx.closePath(); } function drawScores() { document.getElementById('scoreDisplay').innerText = `Player 1: ${score1} | Player 2: ${score2}`; } function resetBall() { ballX = canvas.width / 2; ballY = canvas.height / 2; ballAngleX = (Math.random() > 0.5 ? 1 : -1) * ballSpeed; ballAngleY = (Math.random() > 0.5 ? 1 : -1) * ballSpeed; hitCount = 0; } function resetGame() { score1 = 0; score2 = 0; ballSpeed = 4; resetBall(); drawScores(); if (isPaused) togglePause(); // resume if paused } function togglePause() { isPaused = !isPaused; } function draw() { if (isPaused) return requestAnimationFrame(draw); ctx.clearRect(0, 0, canvas.width, canvas.height); drawPaddle(0, leftPaddleY); drawPaddle(canvas.width - paddleWidth, rightPaddleY); drawBall(); drawScores(); // Move paddles if (wPressed && leftPaddleY > 0) leftPaddleY -= 6; if (sPressed && leftPaddleY < canvas.height - paddleHeight) leftPaddleY += 6; if (upPressed && rightPaddleY > 0) rightPaddleY -= 6; if (downPressed && rightPaddleY < canvas.height - paddleHeight) rightPaddleY += 6; // Ball movement ballX += ballAngleX; ballY += ballAngleY; // Top and bottom wall collision if (ballY - ballRadius < 0 || ballY + ballRadius > canvas.height) { ballAngleY = -ballAngleY; } // Paddle collision if ( ballX - ballRadius < paddleWidth && ballY > leftPaddleY && ballY < leftPaddleY + paddleHeight ) { ballAngleX = Math.abs(ballAngleX); hitCount++; } else if ( ballX + ballRadius > canvas.width - paddleWidth && ballY > rightPaddleY && ballY < rightPaddleY + paddleHeight ) { ballAngleX = -Math.abs(ballAngleX); hitCount++; } // Increase speed every 7 hits if (hitCount >= 7) { ballSpeed += 0.1; ballAngleX = ballAngleX > 0 ? ballSpeed : -ballSpeed; ballAngleY = ballAngleY > 0 ? ballSpeed : -ballSpeed; hitCount = 0; } // Scoring if (ballX < 0) { score2++; resetBall(); } else if (ballX > canvas.width) { score1++; resetBall(); } requestAnimationFrame(draw); } document.addEventListener('keydown', e => { if (e.key === 'w') wPressed = true; if (e.key === 's') sPressed = true; if (e.key === 'ArrowUp') upPressed = true; if (e.key === 'ArrowDown') downPressed = true; }); document.addEventListener('keyup', e => { if (e.key === 'w') wPressed = false; if (e.key === 's') sPressed = false; if (e.key === 'ArrowUp') upPressed = false; if (e.key === 'ArrowDown') downPressed = false; }); draw(); </script> </body> </html>
Editor is loading...
Leave a Comment