Spaces:

victor
/

cyber-pong-explosion

Running

App Files Files Community

victor HF Staff commited on Mar 28

Commit

f3e3455

verified ·

1 Parent(s): 6252b27

Add index.html

Browse files

Files changed (1) hide show

index.html +452 -19

index.html CHANGED Viewed

@@ -1,19 +1,452 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>