Spaces:
Running
Running
File size: 14,655 Bytes
32389f1 |
1 |
conversation_id='conv_019b04404bf4702e9d4e391ff387536c' outputs=[MessageOutputEntry(content='Here\'s a complete HTML application for a Ping-Pong game using only HTML, CSS, and JavaScript. The game features responsive design, modern CSS styling, and smooth animations:\n\n```html\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Ping-Pong Game</title>\n <style>\n :root {\n --primary-color: #4a6fa5;\n --secondary-color: #166088;\n --accent-color: #4fc3f7;\n --text-color: #f8f9fa;\n --bg-color: #0d1b2a;\n --paddle-color: #f8f9fa;\n --ball-color: #ff6b6b;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: \'Segoe UI\', Tahoma, Geneva, Verdana, sans-serif;\n }\n\n body {\n background-color: var(--bg-color);\n color: var(--text-color);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n padding: 20px;\n overflow: hidden;\n }\n\n header {\n width: 100%;\n max-width: 800px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n }\n\n .logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--accent-color);\n }\n\n .anycoder-link {\n color: var(--text-color);\n text-decoration: none;\n font-size: 0.9rem;\n opacity: 0.8;\n transition: opacity 0.3s;\n }\n\n .anycoder-link:hover {\n opacity: 1;\n }\n\n .game-container {\n width: 100%;\n max-width: 800px;\n aspect-ratio: 16/9;\n background-color: var(--primary-color);\n border-radius: 10px;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);\n position: relative;\n overflow: hidden;\n }\n\n .game-area {\n width: 100%;\n height: 100%;\n position: relative;\n background-color: var(--secondary-color);\n }\n\n .paddle {\n position: absolute;\n width: 15px;\n height: 100px;\n background-color: var(--paddle-color);\n border-radius: 5px;\n }\n\n .left-paddle {\n left: 20px;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .right-paddle {\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .ball {\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--ball-color);\n border-radius: 50%;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n\n .divider {\n position: absolute;\n left: 50%;\n top: 0;\n width: 2px;\n height: 100%;\n background-color: rgba(255, 255, 255, 0.2);\n transform: translateX(-50%);\n }\n\n .divider::before {\n content: \'\';\n position: absolute;\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n to bottom,\n transparent 0,\n transparent 10px,\n rgba(255, 255, 255, 0.3) 10px,\n rgba(255, 255, 255, 0.3) 20px\n );\n }\n\n .score {\n position: absolute;\n top: 20px;\n font-size: 2rem;\n font-weight: bold;\n color: var(--text-color);\n opacity: 0.8;\n }\n\n .left-score {\n left: 30%;\n }\n\n .right-score {\n right: 30%;\n }\n\n .controls {\n margin-top: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n }\n\n .control-btn {\n padding: 10px 20px;\n background-color: var(--accent-color);\n color: var(--text-color);\n border: none;\n border-radius: 5px;\n font-size: 1rem;\n cursor: pointer;\n transition: all 0.3s;\n font-weight: bold;\n }\n\n .control-btn:hover {\n background-color: #3ba8e6;\n transform: translateY(-2px);\n }\n\n .instructions {\n margin-top: 20px;\n text-align: center;\n max-width: 600px;\n color: var(--text-color);\n opacity: 0.8;\n }\n\n .instructions h3 {\n margin-bottom: 10px;\n color: var(--accent-color);\n }\n\n .instructions p {\n margin-bottom: 5px;\n }\n\n @media (max-width: 600px) {\n .game-container {\n max-width: 100%;\n aspect-ratio: 1/1;\n }\n\n .score {\n font-size: 1.5rem;\n }\n\n .left-score {\n left: 25%;\n }\n\n .right-score {\n right: 25%;\n }\n }\n </style>\n</head>\n<body>\n <header>\n <div class="logo">PING-PONG</div>\n <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a>\n </header>\n\n <div class="game-container">\n <div class="game-area">\n <div class="paddle left-paddle" id="leftPaddle"></div>\n <div class="paddle right-paddle" id="rightPaddle"></div>\n <div class="ball" id="ball"></div>\n <div class="divider"></div>\n <div class="score left-score" id="leftScore">0</div>\n <div class="score right-score" id="rightScore">0</div>\n </div>\n </div>\n\n <div class="controls">\n <button class="control-btn" id="startBtn">START GAME</button>\n <button class="control-btn" id="resetBtn">RESET SCORE</button>\n </div>\n\n <div class="instructions">\n <h3>How to Play</h3>\n <p>Player 1 (Left): Use W (up) and S (down) keys</p>\n <p>Player 2 (Right): Use Arrow Up and Arrow Down keys</p>\n <p>First to score 5 points wins!</p>\n </div>\n\n <script>\n document.addEventListener(\'DOMContentLoaded\', () => {\n // Game elements\n const gameArea = document.querySelector(\'.game-area\');\n const leftPaddle = document.getElementById(\'leftPaddle\');\n const rightPaddle = document.getElementById(\'rightPaddle\');\n const ball = document.getElementById(\'ball\');\n const leftScoreDisplay = document.getElementById(\'leftScore\');\n const rightScoreDisplay = document.getElementById(\'rightScore\');\n const startBtn = document.getElementById(\'startBtn\');\n const resetBtn = document.getElementById(\'resetBtn\');\n\n // Game state\n let gameRunning = false;\n let leftScore = 0;\n let rightScore = 0;\n let ballSpeedX = 5;\n let ballSpeedY = 3;\n let paddleSpeed = 10;\n let animationId;\n\n // Game dimensions\n const gameWidth = gameArea.clientWidth;\n const gameHeight = gameArea.clientHeight;\n const paddleHeight = 100;\n const ballSize = 20;\n\n // Initialize game\n function initGame() {\n // Reset ball position\n ball.style.left = `${gameWidth / 2 - ballSize / 2}px`;\n ball.style.top = `${gameHeight / 2 - ballSize / 2}px`;\n\n // Reset paddles\n leftPaddle.style.top = `${gameHeight / 2 - paddleHeight / 2}px`;\n rightPaddle.style.top = `${gameHeight / 2 - paddleHeight / 2}px`;\n\n // Reset speeds\n ballSpeedX = 5 * (Math.random() > 0.5 ? 1 : -1);\n ballSpeedY = 3 * (Math.random() > 0.5 ? 1 : -1);\n\n // Reset scores if needed\n if (leftScore >= 5 || rightScore >= 5) {\n leftScore = 0;\n rightScore = 0;\n leftScoreDisplay.textContent = leftScore;\n rightScoreDisplay.textContent = rightScore;\n }\n }\n\n // Start game\n function startGame() {\n if (gameRunning) return;\n\n gameRunning = true;\n startBtn.textContent = \'PAUSE GAME\';\n animationId = requestAnimationFrame(gameLoop);\n }\n\n // Pause game\n function pauseGame() {\n gameRunning = false;\n startBtn.textContent = \'RESUME GAME\';\n cancelAnimationFrame(animationId);\n }\n\n // Reset game\n function resetGame() {\n pauseGame();\n leftScore = 0;\n rightScore = 0;\n leftScoreDisplay.textContent = leftScore;\n rightScoreDisplay.textContent = rightScore;\n initGame();\n startBtn.textContent = \'START GAME\';\n }\n\n // Game loop\n function gameLoop() {\n if (!gameRunning) return;\n\n // Move ball\n let ballX = parseInt(ball.style.left) || gameWidth / 2 - ballSize / 2;\n let ballY = parseInt(ball.style.top) || gameHeight / 2 - ballSize / 2;\n\n ballX += ballSpeedX;\n ballY += ballSpeedY;\n\n // Ball collision with top and bottom\n if (ballY <= 0 || ballY >= gameHeight - ballSize) {\n ballSpeedY = -ballSpeedY;\n }\n\n // Ball collision with paddles\n const leftPaddleY = parseInt(leftPaddle.style.top) || gameHeight / 2 - paddleHeight / 2;\n const rightPaddleY = parseInt(rightPaddle.style.top) || gameHeight / 2 - paddleHeight / 2;\n\n // Left paddle collision\n if (ballX <= 35 && ballX >= 20 &&\n ballY + ballSize >= leftPaddleY &&\n ballY <= leftPaddleY + paddleHeight) {\n ballSpeedX = -ballSpeedX * 1.05; // Increase speed slightly\n // Add some angle based on where the ball hits the paddle\n const hitPosition = (ballY - leftPaddleY) / paddleHeight;\n ballSpeedY = (hitPosition - 0.5) * 8;\n }\n\n // Right paddle collision\n if (ballX >= gameWidth - 55 && ballX <= gameWidth - 40 &&\n ballY + ballSize >= rightPaddleY &&\n ballY <= rightPaddleY + paddleHeight) {\n ballSpeedX = -ballSpeedX * 1.05; // Increase speed slightly\n // Add some angle based on where the ball hits the paddle\n const hitPosition = (ballY - rightPaddleY) / paddleHeight;\n ballSpeedY = (hitPosition - 0.5) * 8;\n }\n\n // Ball out of bounds (scoring)\n if (ballX <= 0) {\n rightScore++;\n rightScoreDisplay.textContent = rightScore;\n if (rightScore >= 5) {\n alert(\'Player 2 Wins!\');\n resetGame();\n return;\n }\n initGame();\n } else if (ballX >= gameWidth - ballSize) {\n leftScore++;\n leftScoreDisplay.textContent = leftScore;\n if (leftScore >= 5) {\n alert(\'Player 1 Wins!\');\n resetGame();\n return;\n }\n initGame();\n }\n\n // Update ball position\n ball.style.left = `${ballX}px`;\n ball.style.top = `${ballY}px`;\n\n // Continue game loop\n animationId = requestAnimationFrame(gameLoop);\n }\n\n // Handle keyboard input\n function handleKeyDown(e) {\n const leftPaddleY = parseInt(leftPaddle.style.top) || gameHeight / 2 - paddleHeight / 2;\n const rightPaddleY = parseInt(rightPaddle.style.top) || gameHeight / 2 - paddleHeight / 2;\n\n // Player 1 (left paddle) controls\n if (e.key === \'w\' && leftPaddleY > 0) {\n leftPaddle.style.top = `${leftPaddleY - paddleSpeed}px`;\n } else if (e.key === \'s\' && leftPaddleY < gameHeight - paddleHeight) {\n leftPaddle.style.top = `${leftPaddleY + paddleSpeed}px`;\n }\n\n // Player 2 (right paddle) controls\n if (e.key === \'ArrowUp\' && rightPaddleY > 0) {\n rightPaddle.style.top = `${rightPaddleY - paddleSpeed}px`;\n } else if (e.key === \'ArrowDown\' && rightPaddleY < gameHeight - paddleHeight) {\n rightPaddle.style.top = `${rightPaddleY + paddleSpeed}px`;\n }\n\n // Space to start/pause\n if (e.key === \' \') {\n if (gameRunning) {\n pauseGame();\n } else {\n startGame();\n }\n }\n }\n\n // Event listeners\n startBtn.addEventListener(\'click\', () => {\n if (gameRunning) {\n pauseGame();\n } else {\n startGame();\n }\n });\n\n resetBtn.addEventListener(\'click\', resetGame);\n document.addEventListener(\'keydown\', handleKeyDown);\n\n // Initialize game on load\n initGame();\n });\n </script>\n</body>\n</html> |