Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cyber Pong Explosion</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap'); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background-color: #0a0a1a; | |
| color: #00ff9d; | |
| font-family: 'Orbitron', sans-serif; | |
| overflow: hidden; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| header { | |
| width: 100%; | |
| padding: 1rem; | |
| text-align: center; | |
| background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,255,157,0.2) 50%, rgba(0,0,0,0) 100%); | |
| border-bottom: 1px solid #00ff9d; | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| text-shadow: 0 0 10px #00ff9d, 0 0 20px #00ff9d; | |
| letter-spacing: 3px; | |
| } | |
| .score-container { | |
| display: flex; | |
| justify-content: space-between; | |
| width: 600px; | |
| margin: 1rem auto; | |
| } | |
| .score { | |
| font-size: 1.5rem; | |
| text-shadow: 0 0 5px #00ff9d; | |
| padding: 0.5rem 1rem; | |
| background-color: rgba(0,0,0,0.5); | |
| border-radius: 5px; | |
| border: 1px solid #00ff9d; | |
| } | |
| #gameCanvas { | |
| border: 2px solid #00ff9d; | |
| box-shadow: 0 0 20px #00ff9d, inset 0 0 10px #00ff9d; | |
| background-color: #000; | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| .controls { | |
| display: flex; | |
| gap: 2rem; | |
| margin: 1rem 0; | |
| } | |
| button { | |
| background: linear-gradient(to bottom, #002a1d, #003d2b); | |
| color: #00ff9d; | |
| border: 1px solid #00ff9d; | |
| padding: 0.8rem 1.5rem; | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| border-radius: 4px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| transition: all 0.3s; | |
| } | |
| button:hover { | |
| background: linear-gradient(to bottom, #003d2b, #004f38); | |
| box-shadow: 0 0 10px #00ff9d; | |
| transform: translateY(-2px); | |
| } | |
| .explosion { | |
| position: absolute; | |
| pointer-events: none; | |
| transform: translate(-50%, -50%); | |
| border-radius: 50%; | |
| opacity: 0; | |
| } | |
| footer { | |
| width: 100%; | |
| padding: 1rem; | |
| text-align: center; | |
| background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,255,157,0.2) 50%, rgba(0,0,0,0) 100%); | |
| border-top: 1px solid #00ff9d; | |
| font-size: 0.8rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>CYBER PONG EXPLOSION</h1> | |
| </header> | |
| <div class="score-container"> | |
| <div class="score" id="playerScore">PLAYER: 0</div> | |
| <div class="score" id="aiScore">AI: 0</div> | |
| </div> | |
| <canvas id="gameCanvas" width="800" height="500"></canvas> | |
| <div class="controls"> | |
| <button id="startBtn">START GAME</button> | |
| <button id="pauseBtn">PAUSE</button> | |
| <button id="resetBtn">RESET</button> | |
| </div> | |
| <footer> | |
| Use W/S or UP/DOWN keys to control your paddle | © 2023 Cyber Pong Explosion | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const canvas = document.getElementById('gameCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| const playerScoreEl = document.getElementById('playerScore'); | |
| const aiScoreEl = document.getElementById('aiScore'); | |
| const startBtn = document.getElementById('startBtn'); | |
| const pauseBtn = document.getElementById('pauseBtn'); | |
| const resetBtn = document.getElementById('resetBtn'); | |
| // Game state | |
| let gameRunning = false; | |
| let gamePaused = false; | |
| // Ball properties | |
| const ball = { | |
| x: canvas.width / 2, | |
| y: canvas.height / 2, | |
| radius: 10, | |
| speed: 5, | |
| dx: 5, | |
| dy: 5, | |
| color: '#00ff9d', | |
| glow: true, | |
| trail: [] | |
| }; | |
| // Paddle properties | |
| const playerPaddle = { | |
| x: 20, | |
| y: canvas.height / 2 - 50, | |
| width: 15, | |
| height: 100, | |
| color: '#00ff9d', | |
| speed: 8, | |
| score: 0 | |
| }; | |
| const aiPaddle = { | |
| x: canvas.width - 35, | |
| y: canvas.height / 2 - 50, | |
| width: 15, | |
| height: 100, | |
| color: '#ff00aa', | |
| speed: 5.5, | |
| score: 0 | |
| }; | |
| // Key states | |
| const keys = { | |
| w: false, | |
| s: false, | |
| ArrowUp: false, | |
| ArrowDown: false | |
| }; | |
| // Explosion particles array | |
| let explosions = []; | |
| // Event listeners | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key in keys) { | |
| keys[e.key] = true; | |
| } | |
| }); | |
| document.addEventListener('keyup', (e) => { | |
| if (e.key in keys) { | |
| keys[e.key] = false; | |
| } | |
| }); | |
| startBtn.addEventListener('click', startGame); | |
| pauseBtn.addEventListener('click', togglePause); | |
| resetBtn.addEventListener('click', resetGame); | |
| // Start game function | |
| function startGame() { | |
| if (!gameRunning) { | |
| gameRunning = true; | |
| gamePaused = false; | |
| resetBall(); | |
| update(); | |
| } | |
| } | |
| // Toggle pause function | |
| function togglePause() { | |
| if (gameRunning) { | |
| gamePaused = !gamePaused; | |
| pauseBtn.textContent = gamePaused ? 'RESUME' : 'PAUSE'; | |
| } | |
| } | |
| // Reset game function | |
| function resetGame() { | |
| gameRunning = false; | |
| gamePaused = false; | |
| playerPaddle.score = 0; | |
| aiPaddle.score = 0; | |
| updateScore(); | |
| pauseBtn.textContent = 'PAUSE'; | |
| resetBall(); | |
| draw(); | |
| } | |
| // Reset ball to center | |
| function resetBall() { | |
| ball.x = canvas.width / 2; | |
| ball.y = canvas.height / 2; | |
| ball.dx = 5 * (Math.random() > 0.5 ? 1 : -1); | |
| ball.dy = 5 * (Math.random() > 0.5 ? 1 : -1); | |
| } | |
| // Update score display | |
| function updateScore() { | |
| playerScoreEl.textContent = `PLAYER: ${playerPaddle.score}`; | |
| aiScoreEl.textContent = `AI: ${aiPaddle.score}`; | |
| } | |
| // Create explosion effect | |
| function createExplosion(x, y, color) { | |
| const particleCount = 30 + Math.floor(Math.random() * 30); | |
| for (let i = 0; i < particleCount; i++) { | |
| const angle = Math.random() * Math.PI * 2; | |
| const speed = 2 + Math.random() * 5; | |
| const size = 2 + Math.random() * 4; | |
| const lifetime = 30 + Math.floor(Math.random() * 30); | |
| explosions.push({ | |
| x, | |
| y, | |
| dx: Math.cos(angle) * speed, | |
| dy: Math.sin(angle) * speed, | |
| size, | |
| color, | |
| lifetime, | |
| currentLife: 0 | |
| }); | |
| } | |
| } | |
| // Update game state | |
| function update() { | |
| if (!gameRunning || gamePaused) return; | |
| // Clear the canvas | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| // Update ball position | |
| ball.x += ball.dx; | |
| ball.y += ball.dy; | |
| // Store ball position for trail effect | |
| ball.trail.push({x: ball.x, y: ball.y}); | |
| if (ball.trail.length > 10) { | |
| ball.trail.shift(); | |
| } | |
| // Ball collision with top and bottom walls | |
| if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) { | |
| ball.dy = -ball.dy; | |
| createExplosion(ball.x, ball.y, '#00ffff'); | |
| } | |
| // Ball collision with paddles | |
| if ( | |
| ball.x - ball.radius < playerPaddle.x + playerPaddle.width && | |
| ball.x + ball.radius > playerPaddle.x && | |
| ball.y - ball.radius < playerPaddle.y + playerPaddle.height && | |
| ball.y + ball.radius > playerPaddle.y | |
| ) { | |
| const collidePoint = (ball.y - (playerPaddle.y + playerPaddle.height / 2)) / (playerPaddle.height / 2); | |
| const angle = collidePoint * Math.PI / 4; | |
| ball.dx = Math.cos(angle) * ball.speed; | |
| ball.dy = Math.sin(angle) * ball.speed; | |
| ball.speed += 0.2; | |
| createExplosion(ball.x, ball.y, playerPaddle.color); | |
| } | |
| if ( | |
| ball.x + ball.radius > aiPaddle.x && | |
| ball.x - ball.radius < aiPaddle.x + aiPaddle.width && | |
| ball.y - ball.radius < aiPaddle.y + aiPaddle.height && | |
| ball.y + ball.radius > aiPaddle.y | |
| ) { | |
| const collidePoint = (ball.y - (aiPaddle.y + aiPaddle.height / 2)) / (aiPaddle.height / 2); | |
| const angle = Math.PI - collidePoint * Math.PI / 4; | |
| ball.dx = Math.cos(angle) * ball.speed; | |
| ball.dy = Math.sin(angle) * ball.speed; | |
| ball.speed += 0.2; | |
| createExplosion(ball.x, ball.y, aiPaddle.color); | |
| } | |
| // Ball out of bounds (score points) | |
| if (ball.x - ball.radius < 0) { | |
| aiPaddle.score++; | |
| updateScore(); | |
| createExplosion(ball.x, ball.y, aiPaddle.color); | |
| resetBall(); | |
| } | |
| if (ball.x + ball.radius > canvas.width) { | |
| playerPaddle.score++; | |
| updateScore(); | |
| createExplosion(ball.x, ball.y, playerPaddle.color); | |
| resetBall(); | |
| } | |
| // AI paddle movement | |
| const aiPaddleCenter = aiPaddle.y + aiPaddle.height / 2; | |
| if (aiPaddleCenter < ball.y - 10) { | |
| aiPaddle.y += aiPaddle.speed; | |
| } else if (aiPaddleCenter > ball.y + 10) { | |
| aiPaddle.y -= aiPaddle.speed; | |
| } | |
| // Player paddle movement | |
| if (keys.w || keys.ArrowUp) { | |
| playerPaddle.y -= playerPaddle.speed; | |
| } | |
| if (keys.s || keys.ArrowDown) { | |
| playerPaddle.y += playerPaddle.speed; | |
| } | |
| // Keep paddles within canvas | |
| playerPaddle.y = Math.max(0, Math.min(canvas.height - playerPaddle.height, playerPaddle.y)); | |
| aiPaddle.y = Math.max(0, Math.min(canvas.height - aiPaddle.height, aiPaddle.y)); | |
| // Update explosions | |
| explosions.forEach((exp, index) => { | |
| exp.x += exp.dx; | |
| exp.y += exp.dy; | |
| exp.currentLife++; | |
| if (exp.currentLife >= exp.lifetime) { | |
| explosions.splice(index, 1); | |
| } | |
| }); | |
| // Draw everything | |
| draw(); | |
| // Continue animation loop | |
| requestAnimationFrame(update); | |
| } | |
| // Draw game elements | |
| function draw() { | |
| // Clear canvas | |
| ctx.fillStyle = '#0a0a1a'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| // Draw center line | |
| ctx.strokeStyle = 'rgba(0, 255, 157, 0.2)'; | |
| ctx.lineWidth = 2; | |
| ctx.setLineDash([10, 10]); | |
| ctx.beginPath(); | |
| ctx.moveTo(canvas.width / 2, 0); | |
| ctx.lineTo(canvas.width / 2, canvas.height); | |
| ctx.stroke(); | |
| ctx.setLineDash([]); | |
| // Draw ball trail | |
| ball.trail.forEach((pos, i) => { | |
| const alpha = i / ball.trail.length; | |
| ctx.beginPath(); | |
| ctx.arc(pos.x, pos.y, ball.radius * alpha, 0, Math.PI * 2); | |
| ctx.fillStyle = `rgba(0, 255, 157, ${alpha})`; | |
| ctx.fill(); | |
| }); | |
| // Draw ball | |
| ctx.beginPath(); | |
| ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2); | |
| ctx.fillStyle = ball.color; | |
| ctx.fill(); | |
| if (ball.glow) { | |
| ctx.shadowColor = ball.color; | |
| ctx.shadowBlur = 15; | |
| } | |
| // Draw paddles | |
| ctx.fillStyle = playerPaddle.color; | |
| ctx.fillRect(playerPaddle.x, playerPaddle.y, playerPaddle.width, playerPaddle.height); | |
| ctx.fillStyle = aiPaddle.color; | |
| ctx.fillRect(aiPaddle.x, aiPaddle.y, aiPaddle.width, aiPaddle.height); | |
| ctx.shadowColor = 'transparent'; | |
| // Draw explosions | |
| explosions.forEach(exp => { | |
| const alpha = 1 - (exp.currentLife / exp.lifetime); | |
| ctx.fillStyle = `${exp.color}${Math.floor(alpha * 255).toString(16).padStart(2, '0')}`; | |
| ctx.beginPath(); | |
| ctx.arc(exp.x, exp.y, exp.size, 0, Math.PI * 2); | |
| ctx.fill(); | |
| // Add glow effect | |
| ctx.shadowColor = exp.color; | |
| ctx.shadowBlur = 10; | |
| ctx.beginPath(); | |
| ctx.arc(exp.x, exp.y, exp.size / 2, 0, Math.PI * 2); | |
| ctx.fill(); | |
| ctx.shadowColor = 'transparent'; | |
| }); | |
| } | |
| // Initial draw | |
| draw(); | |
| }); | |
| </script> | |
| <p style="text-align: center; font-size: 12px; color: #888; margin-top: 16px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" target="_blank">DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> | |
| </html> |