Spaces:

andreaschandra
/

cybernetic-pong-x

Running

File size: 23,874 Bytes

7cdee6b

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cybernetic Pong X</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
        
        body {
            font-family: 'Orbitron', sans-serif;
            background-color: #0a0a1a;
            overflow: hidden;
            color: #00fffc;
        }
        
        #gameCanvas {
            background-color: #000022;
            border: 2px solid #00fffc;
            box-shadow: 0 0 20px #00fffc, inset 0 0 20px #00fffc;
        }
        
        .particle {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }
        
        .glow-text {
            text-shadow: 0 0 10px #00fffc, 0 0 20px #00fffc;
        }
        
        .cyber-btn {
            background: linear-gradient(45deg, #00fffc, #0088ff);
            border: none;
            color: #000;
            font-weight: bold;
            transition: all 0.3s;
            box-shadow: 0 0 15px #00fffc;
        }
        
        .cyber-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 0 25px #00fffc;
        }
        
        .grid-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(rgba(0, 255, 252, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 255, 252, 0.1) 1px, transparent 1px);
            background-size: 30px 30px;
            pointer-events: none;
        }
        
        .score-display {
            background: rgba(0, 20, 40, 0.7);
            border: 2px solid #00fffc;
            box-shadow: 0 0 15px #00fffc;
        }
    </style>
</head>
<body class="flex flex-col items-center justify-center min-h-screen">
    <div class="grid-overlay"></div>
    
    <h1 class="text-5xl font-bold mb-6 glow-text">CYBERNETIC PONG X</h1>
    
    <div class="relative">
        <canvas id="gameCanvas" width="800" height="500" class="mb-4"></canvas>
        
        <div id="playerScore" class="score-display absolute top-4 left-4 px-4 py-2 rounded-lg text-2xl font-bold">0</div>
        <div id="aiScore" class="score-display absolute top-4 right-4 px-4 py-2 rounded-lg text-2xl font-bold">0</div>
        
        <div id="startScreen" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-80">
            <h2 class="text-4xl font-bold mb-8 glow-text">READY FOR CYBER COMBAT?</h2>
            <button id="startBtn" class="cyber-btn px-8 py-3 rounded-full text-xl mb-4">
                <i class="fas fa-play mr-2"></i> INITIATE
            </button>
            <div class="flex space-x-4">
                <button id="easyBtn" class="cyber-btn px-4 py-2 rounded-full">EASY MODE</button>
                <button id="mediumBtn" class="cyber-btn px-4 py-2 rounded-full">NORMAL MODE</button>
                <button id="hardBtn" class="cyber-btn px-4 py-2 rounded-full">HACKER MODE</button>
            </div>
        </div>
        
        <div id="gameOverScreen" class="absolute inset-0 hidden flex-col items-center justify-center bg-black bg-opacity-80">
            <h2 id="gameOverText" class="text-4xl font-bold mb-8 glow-text"></h2>
            <button id="restartBtn" class="cyber-btn px-8 py-3 rounded-full text-xl">
                <i class="fas fa-redo mr-2"></i> REBOOT
            </button>
        </div>
    </div>
    
    <div class="flex space-x-8 mt-6">
        <div class="flex items-center">
            <i class="fas fa-keyboard text-2xl mr-2 glow-text"></i>
            <span class="text-xl">W/S: Move Paddle</span>
        </div>
        <div class="flex items-center">
            <i class="fas fa-bolt text-2xl mr-2 glow-text"></i>
            <span class="text-xl">SPACE: Power Shot</span>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const canvas = document.getElementById('gameCanvas');
            const ctx = canvas.getContext('2d');
            const playerScoreDisplay = document.getElementById('playerScore');
            const aiScoreDisplay = document.getElementById('aiScore');
            const startScreen = document.getElementById('startScreen');
            const gameOverScreen = document.getElementById('gameOverScreen');
            const gameOverText = document.getElementById('gameOverText');
            const startBtn = document.getElementById('startBtn');
            const restartBtn = document.getElementById('restartBtn');
            const easyBtn = document.getElementById('easyBtn');
            const mediumBtn = document.getElementById('mediumBtn');
            const hardBtn = document.getElementById('hardBtn');
            
            // Game variables
            let gameRunning = false;
            let difficulty = 5; // Default medium difficulty
            let playerScore = 0;
            let aiScore = 0;
            let powerCharge = 0;
            let powerActive = false;
            
            // Paddle and ball properties
            const paddleWidth = 15;
            const paddleHeight = 100;
            const ballSize = 15;
            
            let playerPaddle = {
                x: 30,
                y: canvas.height / 2 - paddleHeight / 2,
                width: paddleWidth,
                height: paddleHeight,
                speed: 8,
                dy: 0
            };
            
            let aiPaddle = {
                x: canvas.width - 30 - paddleWidth,
                y: canvas.height / 2 - paddleHeight / 2,
                width: paddleWidth,
                height: paddleHeight,
                speed: difficulty,
                dy: 0
            };
            
            let ball = {
                x: canvas.width / 2,
                y: canvas.height / 2,
                width: ballSize,
                height: ballSize,
                dx: 5,
                dy: 5,
                speed: 5,
                trail: []
            };
            
            // Particles for explosions
            let particles = [];
            
            // Event listeners
            startBtn.addEventListener('click', startGame);
            restartBtn.addEventListener('click', restartGame);
            easyBtn.addEventListener('click', () => setDifficulty(3));
            mediumBtn.addEventListener('click', () => setDifficulty(5));
            hardBtn.addEventListener('click', () => setDifficulty(8));
            
            document.addEventListener('keydown', keyDownHandler);
            document.addEventListener('keyup', keyUpHandler);
            
            function setDifficulty(level) {
                difficulty = level;
                aiPaddle.speed = level;
                
                // Update active button style
                [easyBtn, mediumBtn, hardBtn].forEach(btn => btn.classList.remove('bg-purple-600'));
                if (level === 3) easyBtn.classList.add('bg-purple-600');
                if (level === 5) mediumBtn.classList.add('bg-purple-600');
                if (level === 8) hardBtn.classList.add('bg-purple-600');
            }
            
            function keyDownHandler(e) {
                if (!gameRunning) return;
                
                if (e.key === 'w' || e.key === 'W') {
                    playerPaddle.dy = -playerPaddle.speed;
                } else if (e.key === 's' || e.key === 'S') {
                    playerPaddle.dy = playerPaddle.speed;
                } else if (e.key === ' ' && powerCharge >= 100) {
                    activatePowerShot();
                }
            }
            
            function keyUpHandler(e) {
                if (e.key === 'w' || e.key === 'W' || e.key === 's' || e.key === 'S') {
                    playerPaddle.dy = 0;
                }
            }
            
            function activatePowerShot() {
                powerActive = true;
                powerCharge = 0;
                
                // Create particles for power activation
                for (let i = 0; i < 30; i++) {
                    createParticle(
                        playerPaddle.x + playerPaddle.width,
                        playerPaddle.y + playerPaddle.height / 2,
                        '#00fffc',
                        true
                    );
                }
                
                // Ball gets super speed temporarily
                ball.dx = 15 * Math.sign(ball.dx);
                ball.dy = 15 * Math.sign(ball.dy);
                
                setTimeout(() => {
                    powerActive = false;
                    ball.dx = 5 * Math.sign(ball.dx);
                    ball.dy = 5 * Math.sign(ball.dy);
                }, 1000);
            }
            
            function startGame() {
                gameRunning = true;
                startScreen.classList.add('hidden');
                resetGame();
                requestAnimationFrame(gameLoop);
            }
            
            function restartGame() {
                gameOverScreen.classList.add('hidden');
                playerScore = 0;
                aiScore = 0;
                updateScore();
                resetGame();
                requestAnimationFrame(gameLoop);
            }
            
            function resetGame() {
                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);
                ball.trail = [];
                
                playerPaddle.y = canvas.height / 2 - paddleHeight / 2;
                aiPaddle.y = canvas.height / 2 - paddleHeight / 2;
                
                powerCharge = 0;
                powerActive = false;
            }
            
            function gameLoop() {
                if (!gameRunning) return;
                
                clearCanvas();
                update();
                draw();
                
                requestAnimationFrame(gameLoop);
            }
            
            function clearCanvas() {
                ctx.fillStyle = '#000022';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // Draw grid lines
                ctx.strokeStyle = 'rgba(0, 255, 252, 0.1)';
                ctx.lineWidth = 1;
                
                // Vertical lines
                for (let x = 0; x < canvas.width; x += 30) {
                    ctx.beginPath();
                    ctx.moveTo(x, 0);
                    ctx.lineTo(x, canvas.height);
                    ctx.stroke();
                }
                
                // Horizontal lines
                for (let y = 0; y < canvas.height; y += 30) {
                    ctx.beginPath();
                    ctx.moveTo(0, y);
                    ctx.lineTo(canvas.width, y);
                    ctx.stroke();
                }
                
                // Center line
                ctx.strokeStyle = 'rgba(0, 255, 252, 0.3)';
                ctx.setLineDash([10, 10]);
                ctx.beginPath();
                ctx.moveTo(canvas.width / 2, 0);
                ctx.lineTo(canvas.width / 2, canvas.height);
                ctx.stroke();
                ctx.setLineDash([]);
            }
            
            function update() {
                // Update player paddle position
                playerPaddle.y += playerPaddle.dy;
                
                // Keep player paddle in bounds
                if (playerPaddle.y < 0) {
                    playerPaddle.y = 0;
                } else if (playerPaddle.y + playerPaddle.height > canvas.height) {
                    playerPaddle.y = canvas.height - playerPaddle.height;
                }
                
                // AI paddle follows ball with some imperfection
                const aiPaddleCenter = aiPaddle.y + aiPaddle.height / 2;
                const ballCenter = ball.y + ball.height / 2;
                
                // Add some randomness to AI difficulty
                const aiError = Math.random() * (difficulty * 5);
                
                if (aiPaddleCenter < ballCenter - aiError) {
                    aiPaddle.dy = aiPaddle.speed;
                } else if (aiPaddleCenter > ballCenter + aiError) {
                    aiPaddle.dy = -aiPaddle.speed;
                } else {
                    aiPaddle.dy = 0;
                }
                
                aiPaddle.y += aiPaddle.dy;
                
                // Keep AI paddle in bounds
                if (aiPaddle.y < 0) {
                    aiPaddle.y = 0;
                } else if (aiPaddle.y + aiPaddle.height > canvas.height) {
                    aiPaddle.y = canvas.height - aiPaddle.height;
                }
                
                // Update ball position
                ball.x += ball.dx;
                ball.y += ball.dy;
                
                // Add current position to trail (for cool 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 < 0 || ball.y + ball.height > canvas.height) {
                    ball.dy = -ball.dy;
                    createImpactParticles(ball.x, ball.y);
                }
                
                // Ball collision with paddles
                if (
                    ball.x < playerPaddle.x + playerPaddle.width &&
                    ball.x + ball.width > playerPaddle.x &&
                    ball.y < playerPaddle.y + playerPaddle.height &&
                    ball.y + ball.height > playerPaddle.y
                ) {
                    // Calculate angle based on where ball hits paddle
                    const hitPosition = (ball.y - playerPaddle.y) / playerPaddle.height;
                    const angle = (hitPosition - 0.5) * Math.PI / 2;
                    
                    ball.dx = Math.abs(ball.dx) + 0.2; // Increase speed slightly
                    ball.dy = Math.sin(angle) * ball.speed;
                    
                    // Charge power on hit
                    powerCharge = Math.min(100, powerCharge + 20);
                    
                    createImpactParticles(playerPaddle.x + playerPaddle.width, ball.y);
                }
                
                if (
                    ball.x < aiPaddle.x + aiPaddle.width &&
                    ball.x + ball.width > aiPaddle.x &&
                    ball.y < aiPaddle.y + aiPaddle.height &&
                    ball.y + ball.height > aiPaddle.y
                ) {
                    // Calculate angle based on where ball hits paddle
                    const hitPosition = (ball.y - aiPaddle.y) / aiPaddle.height;
                    const angle = (hitPosition - 0.5) * Math.PI / 2;
                    
                    ball.dx = -Math.abs(ball.dx) - 0.2; // Increase speed slightly
                    ball.dy = Math.sin(angle) * ball.speed;
                    
                    createImpactParticles(aiPaddle.x, ball.y);
                }
                
                // Ball out of bounds (score)
                if (ball.x < 0) {
                    aiScore++;
                    updateScore();
                    createExplosion(ball.x, ball.y);
                    resetBall();
                } else if (ball.x + ball.width > canvas.width) {
                    playerScore++;
                    updateScore();
                    createExplosion(ball.x, ball.y);
                    resetBall();
                }
                
                // Update particles
                updateParticles();
                
                // Check for game over
                if (playerScore >= 5 || aiScore >= 5) {
                    endGame();
                }
            }
            
            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);
                ball.trail = [];
                
                // Small delay before next round
                gameRunning = false;
                setTimeout(() => {
                    gameRunning = true;
                }, 1000);
            }
            
            function updateScore() {
                playerScoreDisplay.textContent = playerScore;
                aiScoreDisplay.textContent = aiScore;
            }
            
            function endGame() {
                gameRunning = false;
                gameOverScreen.classList.remove('hidden');
                
                if (playerScore > aiScore) {
                    gameOverText.textContent = "SYSTEM DOMINATION COMPLETE";
                    gameOverText.style.color = "#00ff00";
                } else {
                    gameOverText.textContent = "SYSTEM FAILURE DETECTED";
                    gameOverText.style.color = "#ff0033";
                }
            }
            
            function draw() {
                // Draw ball trail
                for (let i = 0; i < ball.trail.length; i++) {
                    const alpha = i / ball.trail.length;
                    ctx.fillStyle = `rgba(0, 255, 252, ${alpha * 0.5})`;
                    ctx.beginPath();
                    ctx.arc(ball.trail[i].x + ball.width / 2, ball.trail[i].y + ball.height / 2, ball.width / 2 * alpha, 0, Math.PI * 2);
                    ctx.fill();
                }
                
                // Draw ball
                const gradient = ctx.createRadialGradient(
                    ball.x + ball.width / 2, ball.y + ball.height / 2, 0,
                    ball.x + ball.width / 2, ball.y + ball.height / 2, ball.width / 2
                );
                gradient.addColorStop(0, powerActive ? '#ff00ff' : '#00fffc');
                gradient.addColorStop(1, powerActive ? '#ff0000' : '#0088ff');
                
                ctx.fillStyle = gradient;
                ctx.beginPath();
                ctx.arc(ball.x + ball.width / 2, ball.y + ball.height / 2, ball.width / 2, 0, Math.PI * 2);
                ctx.fill();
                
                // Draw player paddle
                const paddleGradient = ctx.createLinearGradient(
                    playerPaddle.x, playerPaddle.y,
                    playerPaddle.x + playerPaddle.width, playerPaddle.y + playerPaddle.height
                );
                paddleGradient.addColorStop(0, '#00fffc');
                paddleGradient.addColorStop(1, '#0088ff');
                
                ctx.fillStyle = paddleGradient;
                ctx.fillRect(playerPaddle.x, playerPaddle.y, playerPaddle.width, playerPaddle.height);
                
                // Draw AI paddle
                const aiPaddleGradient = ctx.createLinearGradient(
                    aiPaddle.x, aiPaddle.y,
                    aiPaddle.x + aiPaddle.width, aiPaddle.y + aiPaddle.height
                );
                aiPaddleGradient.addColorStop(0, '#ff00ff');
                aiPaddleGradient.addColorStop(1, '#ff0033');
                
                ctx.fillStyle = aiPaddleGradient;
                ctx.fillRect(aiPaddle.x, aiPaddle.y, aiPaddle.width, aiPaddle.height);
                
                // Draw power meter
                ctx.fillStyle = 'rgba(0, 20, 40, 0.7)';
                ctx.fillRect(20, canvas.height - 30, 200, 20);
                
                ctx.fillStyle = powerCharge >= 100 ? '#ff00ff' : '#00fffc';
                ctx.fillRect(20, canvas.height - 30, 200 * (powerCharge / 100), 20);
                
                ctx.strokeStyle = '#00fffc';
                ctx.strokeRect(20, canvas.height - 30, 200, 20);
                
                ctx.fillStyle = '#00fffc';
                ctx.font = '14px Orbitron';
                ctx.fillText('POWER SHOT', 25, canvas.height - 35);
                
                if (powerCharge >= 100) {
                    ctx.fillStyle = '#ff00ff';
                    ctx.font = 'bold 14px Orbitron';
                    ctx.fillText('READY!', 150, canvas.height - 35);
                }
                
                // Draw particles
                drawParticles();
            }
            
            function createImpactParticles(x, y) {
                for (let i = 0; i < 10; i++) {
                    createParticle(x, y, '#00fffc');
                }
            }
            
            function createExplosion(x, y) {
                for (let i = 0; i < 50; i++) {
                    createParticle(x, y, i % 2 === 0 ? '#ff00ff' : '#00fffc', true);
                }
            }
            
            function createParticle(x, y, color, isExplosion = false) {
                const size = Math.random() * 4 + 2;
                const angle = Math.random() * Math.PI * 2;
                const speed = isExplosion ? Math.random() * 5 + 2 : Math.random() * 3 + 1;
                
                particles.push({
                    x: x,
                    y: y,
                    size: size,
                    color: color,
                    dx: Math.cos(angle) * speed,
                    dy: Math.sin(angle) * speed,
                    life: isExplosion ? 60 : 30,
                    maxLife: isExplosion ? 60 : 30
                });
            }
            
            function updateParticles() {
                for (let i = particles.length - 1; i >= 0; i--) {
                    const p = particles[i];
                    
                    p.x += p.dx;
                    p.y += p.dy;
                    p.life--;
                    
                    // Apply gravity to explosion particles
                    if (p.life < p.maxLife / 2) {
                        p.dy += 0.1;
                    }
                    
                    if (p.life <= 0) {
                        particles.splice(i, 1);
                    }
                }
            }
            
            function drawParticles() {
                for (const p of particles) {
                    const alpha = p.life / p.maxLife;
                    ctx.fillStyle = `${p.color.replace(')', `, ${alpha})`).replace('rgb', 'rgba')}`;
                    ctx.beginPath();
                    ctx.arc(p.x, p.y, p.size * alpha, 0, Math.PI * 2);
                    ctx.fill();
                }
            }
            
            // Set default difficulty
            setDifficulty(5);
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=andreaschandra/cybernetic-pong-x" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>