Spaces:

rifco
/

astrapay

Running

File size: 16,780 Bytes

ed81007

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Astrapay Pong Game</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
        
        body {
            font-family: 'Poppins', sans-serif;
            overflow: hidden;
            background-color: #0f172a;
        }
        
        #gameCanvas {
            background-color: #1e293b;
            position: relative;
            overflow: hidden;
        }
        
        .astrapay-logo {
            position: absolute;
            opacity: 0.1;
            animation: float 15s infinite linear;
        }
        
        @keyframes float {
            0% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(50px, 50px) rotate(5deg); }
            50% { transform: translate(100px, 0) rotate(0deg); }
            75% { transform: translate(50px, -50px) rotate(-5deg); }
            100% { transform: translate(0, 0) rotate(0deg); }
        }
        
        .paddle {
            position: absolute;
            background: linear-gradient(90deg, #4f46e5, #7c3aed);
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(124, 58, 237, 0.7);
        }
        
        .ball {
            position: absolute;
            background: linear-gradient(45deg, #f59e0b, #f97316);
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(245, 158, 11, 0.8);
        }
        
        .score {
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
        }
        
        .start-screen, .game-over-screen {
            background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(5px);
        }
        
        .btn-primary {
            background: linear-gradient(90deg, #4f46e5, #7c3aed);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(124, 58, 237, 0.4);
        }
    </style>
</head>
<body class="flex items-center justify-center min-h-screen text-white">
    <div class="relative w-full max-w-4xl h-96 md:h-[32rem]">
        <canvas id="gameCanvas" class="w-full h-full rounded-xl shadow-2xl"></canvas>
        
        <!-- Start Screen -->
        <div id="startScreen" class="start-screen absolute inset-0 flex flex-col items-center justify-center gap-6 rounded-xl">
            <div class="text-center">
                <h1 class="text-4xl md:text-5xl font-bold mb-2">Astrapay Pong</h1>
                <p class="text-lg text-gray-300">Use arrow keys or W/S to move your paddle</p>
            </div>
            <button id="startBtn" class="btn-primary px-8 py-3 rounded-full font-semibold text-lg">
                Start Game
            </button>
            <div class="absolute bottom-6 text-gray-400 text-sm">
                First to score 5 points wins!
            </div>
        </div>
        
        <!-- Game Over Screen -->
        <div id="gameOverScreen" class="game-over-screen hidden absolute inset-0 flex flex-col items-center justify-center gap-6 rounded-xl">
            <h2 id="winnerText" class="text-4xl font-bold"></h2>
            <div class="flex gap-8 text-center my-4">
                <div>
                    <div class="text-2xl font-semibold" id="player1ScoreFinal">0</div>
                    <div class="text-gray-400">Player</div>
                </div>
                <div>
                    <div class="text-2xl font-semibold" id="player2ScoreFinal">0</div>
                    <div class="text-gray-400">Computer</div>
                </div>
            </div>
            <button id="restartBtn" class="btn-primary px-8 py-3 rounded-full font-semibold text-lg">
                Play Again
            </button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const canvas = document.getElementById('gameCanvas');
            const ctx = canvas.getContext('2d');
            const startScreen = document.getElementById('startScreen');
            const gameOverScreen = document.getElementById('gameOverScreen');
            const startBtn = document.getElementById('startBtn');
            const restartBtn = document.getElementById('restartBtn');
            const winnerText = document.getElementById('winnerText');
            const player1ScoreFinal = document.getElementById('player1ScoreFinal');
            const player2ScoreFinal = document.getElementById('player2ScoreFinal');
            
            // Set canvas size
            function resizeCanvas() {
                const container = canvas.parentElement;
                canvas.width = container.clientWidth;
                canvas.height = container.clientHeight;
            }
            
            resizeCanvas();
            window.addEventListener('resize', resizeCanvas);
            
            // Game variables
            let gameRunning = false;
            let animationId;
            let player1Score = 0;
            let player2Score = 0;
            
            // Paddle variables
            const paddleWidth = 15;
            const paddleHeight = 100;
            const paddleOffset = 30;
            
            const player1 = {
                x: paddleOffset,
                y: canvas.height / 2 - paddleHeight / 2,
                width: paddleWidth,
                height: paddleHeight,
                speed: 8,
                dy: 0
            };
            
            const player2 = {
                x: canvas.width - paddleOffset - paddleWidth,
                y: canvas.height / 2 - paddleHeight / 2,
                width: paddleWidth,
                height: paddleHeight,
                speed: 6, // Slightly slower for computer
                dy: 0
            };
            
            // Ball variables
            const ball = {
                x: canvas.width / 2,
                y: canvas.height / 2,
                radius: 10,
                speed: 5,
                dx: 5,
                dy: 5
            };
            
            // Create floating Astrapay logos
            function createAstrapayLogos() {
                const colors = ['#4f46e5', '#7c3aed', '#f59e0b', '#f97316'];
                
                for (let i = 0; i < 8; i++) {
                    const logo = document.createElement('div');
                    logo.className = 'astrapay-logo';
                    logo.innerHTML = `
                        <svg width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2Z" fill="${colors[i % colors.length]}"/>
                            <path d="M12 6C8.686 6 6 8.686 6 12C6 15.314 8.686 18 12 18C15.314 18 18 15.314 18 12C18 8.686 15.314 6 12 6Z" fill="white"/>
                            <path d="M12 10C10.895 10 10 10.895 10 12C10 13.105 10.895 14 12 14C13.105 14 14 13.105 14 12C14 10.895 13.105 10 12 10Z" fill="${colors[(i + 2) % colors.length]}"/>
                        </svg>
                    `;
                    
                    logo.style.left = `${Math.random() * 80}%`;
                    logo.style.top = `${Math.random() * 80}%`;
                    logo.style.animationDuration = `${15 + Math.random() * 15}s`;
                    
                    canvas.parentElement.appendChild(logo);
                }
            }
            
            // Draw paddles
            function drawPaddle(x, y, width, height) {
                ctx.beginPath();
                ctx.roundRect(x, y, width, height, 10);
                ctx.fillStyle = '#7c3aed';
                ctx.shadowColor = 'rgba(124, 58, 237, 0.7)';
                ctx.shadowBlur = 15;
                ctx.fill();
                ctx.shadowBlur = 0;
            }
            
            // Draw ball
            function drawBall(x, y, radius) {
                ctx.beginPath();
                ctx.arc(x, y, radius, 0, Math.PI * 2);
                ctx.fillStyle = '#f59e0b';
                ctx.shadowColor = 'rgba(245, 158, 11, 0.8)';
                ctx.shadowBlur = 20;
                ctx.fill();
                ctx.shadowBlur = 0;
            }
            
            // Draw score
            function drawScore() {
                ctx.font = 'bold 32px Poppins';
                ctx.fillStyle = 'white';
                ctx.textAlign = 'center';
                
                // Player 1 score
                ctx.fillText(player1Score.toString(), canvas.width / 4, 50);
                
                // Player 2 score
                ctx.fillText(player2Score.toString(), canvas.width * 3/4, 50);
            }
            
            // Draw center line
            function drawCenterLine() {
                ctx.beginPath();
                ctx.setLineDash([10, 10]);
                ctx.moveTo(canvas.width / 2, 0);
                ctx.lineTo(canvas.width / 2, canvas.height);
                ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
                ctx.lineWidth = 2;
                ctx.stroke();
                ctx.setLineDash([]);
            }
            
            // Update paddle position
            function updatePaddlePosition() {
                // Player 1 movement
                player1.y += player1.dy;
                
                // Prevent paddle from going off screen
                if (player1.y < 0) {
                    player1.y = 0;
                } else if (player1.y + player1.height > canvas.height) {
                    player1.y = canvas.height - player1.height;
                }
                
                // Computer AI for player 2 (simple follow ball)
                if (player2.y + player2.height / 2 < ball.y - 10) {
                    player2.dy = player2.speed;
                } else if (player2.y + player2.height / 2 > ball.y + 10) {
                    player2.dy = -player2.speed;
                } else {
                    player2.dy = 0;
                }
                
                player2.y += player2.dy;
                
                // Prevent computer paddle from going off screen
                if (player2.y < 0) {
                    player2.y = 0;
                } else if (player2.y + player2.height > canvas.height) {
                    player2.y = canvas.height - player2.height;
                }
            }
            
            // Update ball position
            function updateBallPosition() {
                ball.x += ball.dx;
                ball.y += ball.dy;
                
                // Wall collision (top/bottom)
                if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) {
                    ball.dy *= -1;
                }
                
                // Paddle collision
                // Player 1 (left paddle)
                if (
                    ball.x - ball.radius < player1.x + player1.width &&
                    ball.y > player1.y &&
                    ball.y < player1.y + player1.height
                ) {
                    const hitPosition = (ball.y - (player1.y + player1.height / 2)) / (player1.height / 2);
                    ball.dx = Math.abs(ball.dx) * 1.05; // Increase speed slightly
                    ball.dy = hitPosition * 5;
                }
                
                // Player 2 (right paddle)
                if (
                    ball.x + ball.radius > player2.x &&
                    ball.y > player2.y &&
                    ball.y < player2.y + player2.height
                ) {
                    const hitPosition = (ball.y - (player2.y + player2.height / 2)) / (player2.height / 2);
                    ball.dx = -Math.abs(ball.dx) * 1.05; // Increase speed slightly
                    ball.dy = hitPosition * 5;
                }
                
                // Point scored
                if (ball.x - ball.radius < 0) {
                    // Player 2 scores
                    player2Score++;
                    resetBall();
                } else if (ball.x + ball.radius > canvas.width) {
                    // Player 1 scores
                    player1Score++;
                    resetBall();
                }
                
                // Check for winner
                if (player1Score >= 5 || player2Score >= 5) {
                    endGame();
                }
            }
            
            // Reset ball to center
            function resetBall() {
                ball.x = canvas.width / 2;
                ball.y = canvas.height / 2;
                ball.dx = player1Score > player2Score ? -5 : 5; // Alternate direction
                ball.dy = (Math.random() * 4 - 2); // Random vertical direction
                ball.speed = 5;
            }
            
            // Game loop
            function gameLoop() {
                // Clear canvas
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // Draw game elements
                drawCenterLine();
                drawPaddle(player1.x, player1.y, player1.width, player1.height);
                drawPaddle(player2.x, player2.y, player2.width, player2.height);
                drawBall(ball.x, ball.y, ball.radius);
                drawScore();
                
                // Update positions
                updatePaddlePosition();
                updateBallPosition();
                
                if (gameRunning) {
                    animationId = requestAnimationFrame(gameLoop);
                }
            }
            
            // Start game
            function startGame() {
                player1Score = 0;
                player2Score = 0;
                startScreen.classList.add('hidden');
                gameOverScreen.classList.add('hidden');
                gameRunning = true;
                resetBall();
                gameLoop();
            }
            
            // End game
            function endGame() {
                gameRunning = false;
                cancelAnimationFrame(animationId);
                
                // Update game over screen
                if (player1Score >= 5) {
                    winnerText.textContent = 'You Win!';
                    winnerText.className = 'text-4xl font-bold text-green-400';
                } else {
                    winnerText.textContent = 'Computer Wins!';
                    winnerText.className = 'text-4xl font-bold text-red-400';
                }
                
                player1ScoreFinal.textContent = player1Score;
                player2ScoreFinal.textContent = player2Score;
                
                gameOverScreen.classList.remove('hidden');
            }
            
            // Event listeners
            startBtn.addEventListener('click', () => {
                createAstrapayLogos();
                startGame();
            });
            
            restartBtn.addEventListener('click', startGame);
            
            // Keyboard controls
            document.addEventListener('keydown', (e) => {
                // Player 1 controls (W/S or Arrow Up/Down)
                if (e.key === 'ArrowUp' || e.key === 'w') {
                    player1.dy = -player1.speed;
                } else if (e.key === 'ArrowDown' || e.key === 's') {
                    player1.dy = player1.speed;
                }
            });
            
            document.addEventListener('keyup', (e) => {
                if (
                    (e.key === 'ArrowUp' || e.key === 'w') && player1.dy < 0 ||
                    (e.key === 'ArrowDown' || e.key === 's') && player1.dy > 0
                ) {
                    player1.dy = 0;
                }
            });
        });
    </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=rifco/astrapay" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>