Spaces:

Dhdb
/

ball-demo

Running

File size: 14,070 Bytes

28917a7

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mario-like Platform Game</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Custom styles for the game */
        #game-container {
            position: relative;
            width: 800px;
            height: 500px;
            background: linear-gradient(to bottom, #87CEEB 50%, #228B22 50%);
            overflow: hidden;
            border: 4px solid #333;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        }

        #player {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #FF0000;
            border-radius: 50%;
            border: 2px solid #000;
            z-index: 10;
            transition: transform 0.1s;
        }

        .platform {
            position: absolute;
            background-color: #8B4513;
            border: 2px solid #5D2906;
            border-radius: 5px;
            z-index: 5;
        }

        .coin {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #FFD700;
            border-radius: 50%;
            border: 2px solid #DAA520;
            z-index: 8;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotateY(0deg); }
            100% { transform: rotateY(360deg); }
        }

        .cloud {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            opacity: 0.8;
        }

        #score-display {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: rgba(255, 255, 255, 0.7);
            padding: 5px 10px;
            border-radius: 5px;
            font-weight: bold;
            z-index: 20;
        }

        #game-over {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 24px;
            z-index: 30;
            display: none;
        }
    </style>
</head>
<body class="bg-gray-100 flex flex-col items-center justify-center min-h-screen">
    <h1 class="text-4xl font-bold mb-4 text-red-600">Super Adventure Game</h1>
    
    <div id="game-container" class="relative">
        <div id="score-display">Score: <span id="score">0</span></div>
        
        <div id="player"></div>
        
        <div id="game-over">
            <h2 class="text-3xl font-bold mb-4">Game Over!</h2>
            <p class="mb-6">Final Score: <span id="final-score">0</span></p>
            <button id="restart-btn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">
                Play Again
            </button>
        </div>
    </div>
    
    <div class="mt-6 flex space-x-4">
        <button id="left-btn" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
            ← Left
        </button>
        <button id="right-btn" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
            Right →
        </button>
        <button id="jump-btn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">
            Jump ↑
        </button>
    </div>
    
    <p class="mt-4 text-gray-600">Use buttons or arrow keys to move and jump</p>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Game elements
            const gameContainer = document.getElementById('game-container');
            const player = document.getElementById('player');
            const scoreDisplay = document.getElementById('score');
            const finalScoreDisplay = document.getElementById('final-score');
            const gameOverScreen = document.getElementById('game-over');
            const restartBtn = document.getElementById('restart-btn');
            
            // Control buttons
            const leftBtn = document.getElementById('left-btn');
            const rightBtn = document.getElementById('right-btn');
            const jumpBtn = document.getElementById('jump-btn');
            
            // Game state
            let score = 0;
            let isJumping = false;
            let isGameOver = false;
            let playerX = 100;
            let playerY = 400;
            let velocityY = 0;
            let gravity = 0.5;
            let moveSpeed = 5;
            let jumpForce = -12;
            let platforms = [];
            let coins = [];
            let clouds = [];
            
            // Initialize game
            initGame();
            
            function initGame() {
                // Reset game state
                score = 0;
                isJumping = false;
                isGameOver = false;
                playerX = 100;
                playerY = 400;
                velocityY = 0;
                scoreDisplay.textContent = score;
                gameOverScreen.style.display = 'none';
                
                // Clear existing elements
                document.querySelectorAll('.platform').forEach(el => el.remove());
                document.querySelectorAll('.coin').forEach(el => el.remove());
                document.querySelectorAll('.cloud').forEach(el => el.remove());
                
                platforms = [];
                coins = [];
                clouds = [];
                
                // Create ground platform
                createPlatform(0, 450, 800, 50);
                
                // Create some platforms
                createPlatform(100, 350, 150, 20);
                createPlatform(300, 300, 150, 20);
                createPlatform(500, 250, 150, 20);
                createPlatform(200, 200, 150, 20);
                createPlatform(400, 150, 150, 20);
                createPlatform(600, 100, 150, 20);
                
                // Create some coins
                createCoin(150, 320);
                createCoin(350, 270);
                createCoin(550, 220);
                createCoin(250, 170);
                createCoin(450, 120);
                createCoin(650, 70);
                
                // Create some clouds
                createCloud(100, 50, 60, 30);
                createCloud(300, 30, 80, 40);
                createCloud(500, 60, 70, 35);
                createCloud(700, 40, 90, 45);
                
                // Position player
                updatePlayerPosition();
                
                // Start game loop
                requestAnimationFrame(gameLoop);
            }
            
            function createPlatform(x, y, width, height) {
                const platform = document.createElement('div');
                platform.className = 'platform';
                platform.style.left = `${x}px`;
                platform.style.top = `${y}px`;
                platform.style.width = `${width}px`;
                platform.style.height = `${height}px`;
                gameContainer.appendChild(platform);
                
                platforms.push({
                    x, y, width, height, element: platform
                });
            }
            
            function createCoin(x, y) {
                const coin = document.createElement('div');
                coin.className = 'coin';
                coin.style.left = `${x}px`;
                coin.style.top = `${y}px`;
                gameContainer.appendChild(coin);
                
                coins.push({
                    x, y, collected: false, element: coin
                });
            }
            
            function createCloud(x, y, width, height) {
                const cloud = document.createElement('div');
                cloud.className = 'cloud';
                cloud.style.left = `${x}px`;
                cloud.style.top = `${y}px`;
                cloud.style.width = `${width}px`;
                cloud.style.height = `${height}px`;
                gameContainer.appendChild(cloud);
                
                clouds.push({
                    x, y, width, height, element: cloud
                });
            }
            
            function updatePlayerPosition() {
                player.style.left = `${playerX}px`;
                player.style.top = `${playerY}px`;
            }
            
            function checkCollision() {
                // Check if player is on a platform
                let onPlatform = false;
                
                for (const platform of platforms) {
                    if (
                        playerX + 50 > platform.x &&
                        playerX < platform.x + platform.width &&
                        playerY + 50 >= platform.y &&
                        playerY + 50 <= platform.y + 20 && // Only check top part of platform
                        velocityY >= 0
                    ) {
                        onPlatform = true;
                        playerY = platform.y - 50;
                        velocityY = 0;
                        isJumping = false;
                    }
                }
                
                // Apply gravity if not on platform
                if (!onPlatform) {
                    velocityY += gravity;
                    isJumping = true;
                }
                
                // Check coin collection
                for (const coin of coins) {
                    if (!coin.collected && 
                        playerX + 50 > coin.x &&
                        playerX < coin.x + 20 &&
                        playerY + 50 > coin.y &&
                        playerY < coin.y + 20) {
                        coin.collected = true;
                        coin.element.style.display = 'none';
                        score += 10;
                        scoreDisplay.textContent = score;
                    }
                }
                
                // Check if player fell off the screen
                if (playerY > gameContainer.clientHeight) {
                    gameOver();
                }
            }
            
            function gameLoop() {
                if (isGameOver) return;
                
                // Apply velocity
                playerY += velocityY;
                
                // Update player position
                updatePlayerPosition();
                
                // Check collisions
                checkCollision();
                
                // Move clouds for parallax effect
                for (const cloud of clouds) {
                    cloud.x -= 0.2;
                    if (cloud.x + cloud.width < 0) {
                        cloud.x = gameContainer.clientWidth;
                    }
                    cloud.element.style.left = `${cloud.x}px`;
                }
                
                requestAnimationFrame(gameLoop);
            }
            
            function gameOver() {
                isGameOver = true;
                finalScoreDisplay.textContent = score;
                gameOverScreen.style.display = 'flex';
            }
            
            // Event listeners for buttons
            leftBtn.addEventListener('mousedown', () => {
                if (!isGameOver) playerX -= moveSpeed;
                if (playerX < 0) playerX = 0;
                updatePlayerPosition();
            });
            
            rightBtn.addEventListener('mousedown', () => {
                if (!isGameOver) playerX += moveSpeed;
                if (playerX > gameContainer.clientWidth - 50) playerX = gameContainer.clientWidth - 50;
                updatePlayerPosition();
            });
            
            jumpBtn.addEventListener('click', () => {
                if (!isJumping && !isGameOver) {
                    velocityY = jumpForce;
                    isJumping = true;
                }
            });
            
            // Keyboard controls
            document.addEventListener('keydown', (e) => {
                if (isGameOver) return;
                
                switch (e.key) {
                    case 'ArrowLeft':
                        playerX -= moveSpeed;
                        if (playerX < 0) playerX = 0;
                        break;
                    case 'ArrowRight':
                        playerX += moveSpeed;
                        if (playerX > gameContainer.clientWidth - 50) playerX = gameContainer.clientWidth - 50;
                        break;
                    case 'ArrowUp':
                    case ' ':
                        if (!isJumping) {
                            velocityY = jumpForce;
                            isJumping = true;
                        }
                        break;
                }
                
                updatePlayerPosition();
            });
            
            // Restart game
            restartBtn.addEventListener('click', initGame);
        });
    </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=Dhdb/ball-demo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>