Spaces:

dlma
/

subway

Running

App Files Files Community

dlma commited on Jul 2, 2025

Commit

936984b

verified ·

1 Parent(s): af10fac

add max disagn rnd anymation - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +610 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Subway
-emoji: 📚
 colorFrom: blue
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: subway
+emoji: 🐳
 colorFrom: blue
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,610 @@
-<!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>Metro Dash - Subway Surfers Inspired Game</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            touch-action: none;
+            font-family: 'Arial', sans-serif;
+        }
+        #gameContainer {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
+            background-color: #87CEEB;
+            overflow: hidden;
+        }
+        #player {
+            position: absolute;
+            width: 60px;
+            height: 100px;
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 150"><rect x="30" y="50" width="40" height="60" fill="%23FF5733"/><circle cx="50" cy="30" r="20" fill="%23FFC300"/><rect x="20" y="110" width="20" height="30" fill="%23333"/><rect x="60" y="110" width="20" height="30" fill="%23333"/></svg>');
+            background-size: contain;
+            z-index: 10;
+            transition: left 0.2s ease-out;
+            animation: bounce 0.5s infinite alternate;
+        }
+        .obstacle {
+            position: absolute;
+            width: 60px;
+            height: 60px;
+            background-color: #333;
+            border-radius: 5px;
+            animation: pulseObstacle 1.5s ease-in-out infinite;
+        }
+        .coin {
+            position: absolute;
+            width: 30px;
+            height: 30px;
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="%23FFD700" stroke="%23FFA500" stroke-width="5"/></svg>');
+            background-size: contain;
+            z-index: 5;
+            animation: rotateCoin 2s linear infinite;
+        }
+        .lane {
+            position: absolute;
+            width: 100%;
+            height: 33.33%;
+            border-top: 2px dashed white;
+            border-bottom: 2px dashed white;
+        }
+        #scoreContainer {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            z-index: 100;
+            color: white;
+            font-size: 24px;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+        }
+        #gameOverScreen {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+            display: none;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 200;
+            color: white;
+        }
+        #startScreen {
+            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;
+            z-index: 200;
+            color: white;
+        }
+        .train {
+            position: absolute;
+            width: 120px;
+            height: 80px;
+            background-color: #c00;
+            border-radius: 10px;
+        }
+        @keyframes slide {
+            from { background-position: 0 0; }
+            to { background-position: -1000px 0; }
+        }
+        @keyframes bounce {
+            0% { transform: translateY(0); }
+            100% { transform: translateY(-5px); }
+        }
+        @keyframes rotateCoin {
+            0% { transform: rotate(0deg) scale(1); }
+            50% { transform: rotate(180deg) scale(1.1); }
+            100% { transform: rotate(360deg) scale(1); }
+        }
+        @keyframes pulseObstacle {
+            0% { opacity: 0.8; }
+            50% { opacity: 1; }
+            100% { opacity: 0.8; }
+        }
+        @keyframes fadeOut {
+            0% { transform: scale(1); opacity: 0.8; }
+            100% { transform: scale(2); opacity: 0; }
+        }
+        .ground {
+            position: absolute;
+            width: 100%;
+            height: 33.33%;
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="50" height="100" fill="%23555"/><rect x="50" width="50" height="100" fill="%23444"/></svg>');
+            background-size: 100px 100px;
+            animation: slide 1s linear infinite;
+        }
+    </style>
+</head>
+<body class="bg-gray-900">
+    <div id="gameContainer">
+        <div id="scoreContainer" class="flex items-center space-x-4">
+            <div class="flex items-center">
+                <span>🏆</span>
+                <span id="score">0</span>
+            </div>
+            <div class="flex items-center">
+                <span>💰</span>
+                <span id="coins">0</span>
+            </div>
+        </div>
+        <div id="startScreen">
+            <h1 class="text-5xl font-bold mb-6 text-yellow-300">METRO DASH</h1>
+            <p class="text-xl mb-8">Swipe to change lanes and avoid obstacles!</p>
+            <button id="startButton" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-full text-xl transition duration-300 transform hover:scale-105">
+                START RUN
+            </button>
+            <div class="mt-8 flex space-x-4">
+                <div class="text-center">
+                    <div class="w-16 h-16 mx-auto bg-gray-800 rounded-lg flex items-center justify-center mb-2">
+                        <span class="text-3xl">👆</span>
+                    </div>
+                    <p>Swipe Up</p>
+                </div>
+                <div class="text-center">
+                    <div class="w-16 h-16 mx-auto bg-gray-800 rounded-lg flex items-center justify-center mb-2">
+                        <span class="text-3xl">👇</span>
+                    </div>
+                    <p>Swipe Down</p>
+                </div>
+                <div class="text-center">
+                    <div class="w-16 h-16 mx-auto bg-gray-800 rounded-lg flex items-center justify-center mb-2">
+                        <span class="text-3xl">🔄</span>
+                    </div>
+                    <p>Jump/Roll</p>
+                </div>
+            </div>
+        </div>
+        <div id="gameOverScreen">
+            <h1 class="text-5xl font-bold mb-4 text-red-500">GAME OVER</h1>
+            <div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-6 text-center">
+                <p class="text-2xl mb-2">Score: <span id="finalScore">0</span></p>
+                <p class="text-2xl">Coins: <span id="finalCoins">0</span></p>
+            </div>
+            <button id="restartButton" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-8 rounded-full text-xl transition duration-300 transform hover:scale-105">
+                PLAY AGAIN
+            </button>
+        </div>
+        <div class="ground" style="top: 0%;"></div>
+        <div class="ground" style="top: 33.33%;"></div>
+        <div class="ground" style="top: 66.66%;"></div>
+        <div id="player"></div>
+    </div>
+    <script>
+        // Game variables
+        let score = 0;
+        let coins = 0;
+        let gameSpeed = 5;
+        let gameRunning = false;
+        let playerLane = 1; // 0: top, 1: middle, 2: bottom
+        let obstacles = [];
+        let coinsArray = [];
+        let trains = [];
+        let animationId;
+        let obstacleSpawnRate = 100; // frames
+        let coinSpawnRate = 50; // frames
+        let trainSpawnRate = 200; // frames
+        let frameCount = 0;
+        let isJumping = false;
+        let isRolling = false;
+        // DOM elements
+        const gameContainer = document.getElementById('gameContainer');
+        const player = document.getElementById('player');
+        const scoreElement = document.getElementById('score');
+        const coinsElement = document.getElementById('coins');
+        const gameOverScreen = document.getElementById('gameOverScreen');
+        const startScreen = document.getElementById('startScreen');
+        const startButton = document.getElementById('startButton');
+        const restartButton = document.getElementById('restartButton');
+        const finalScoreElement = document.getElementById('finalScore');
+        const finalCoinsElement = document.getElementById('finalCoins');
+        // Game dimensions
+        const gameWidth = gameContainer.offsetWidth;
+        const gameHeight = gameContainer.offsetHeight;
+        const laneHeight = gameHeight / 3;
+        // Initialize player position
+        function initPlayer() {
+            player.style.width = '60px';
+            player.style.height = '100px';
+            player.style.left = '100px';
+            moveToLane(playerLane);
+            isJumping = false;
+            isRolling = false;
+            player.style.transform = 'none';
+        }
+        // Move player to specified lane (0, 1, or 2)
+        function moveToLane(lane) {
+            playerLane = lane;
+            player.style.top = `${lane * laneHeight + (laneHeight - 100) / 2}px`;
+        }
+        // Create a new obstacle
+        function createObstacle() {
+            const obstacle = document.createElement('div');
+            obstacle.className = 'obstacle';
+            // Random lane (0, 1, or 2)
+            const lane = Math.floor(Math.random() * 3);
+            // Position obstacle at the right edge of the screen
+            obstacle.style.left = `${gameWidth}px`;
+            obstacle.style.top = `${lane * laneHeight + (laneHeight - 60) / 2}px`;
+            // Random obstacle type (30% chance of being a train)
+            if (Math.random() < 0.3) {
+                obstacle.classList.add('train');
+                obstacle.style.width = '120px';
+                obstacle.style.height = '80px';
+                obstacle.style.top = `${lane * laneHeight + (laneHeight - 80) / 2}px`;
+            } else {
+                // Random color for regular obstacles
+                const colors = ['#333', '#555', '#777', '#8B4513', '#A0522D'];
+                obstacle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+            }
+            gameContainer.appendChild(obstacle);
+            obstacles.push({
+                element: obstacle,
+                lane: lane,
+                isTrain: obstacle.classList.contains('train')
+            });
+        }
+        // Create a new coin
+        function createCoin() {
+            const coin = document.createElement('div');
+            coin.className = 'coin';
+            // Random lane (0, 1, or 2)
+            const lane = Math.floor(Math.random() * 3);
+            // Position coin at the right edge of the screen
+            coin.style.left = `${gameWidth}px`;
+            coin.style.top = `${lane * laneHeight + (laneHeight - 30) / 2}px`;
+            gameContainer.appendChild(coin);
+            coinsArray.push({
+                element: coin,
+                lane: lane
+            });
+        }
+        // Update obstacle positions
+        function updateObstacles() {
+            for (let i = obstacles.length - 1; i >= 0; i--) {
+                const obstacle = obstacles[i];
+                const currentLeft = parseInt(obstacle.element.style.left);
+                const newLeft = currentLeft - gameSpeed;
+                obstacle.element.style.left = `${newLeft}px`;
+                // Remove obstacle if it's off screen
+                if (newLeft < -100) {
+                    gameContainer.removeChild(obstacle.element);
+                    obstacles.splice(i, 1);
+                }
+                // Check for collision
+                if (checkCollision(player, obstacle.element) && obstacle.lane === playerLane && !isJumping && !isRolling) {
+                    gameOver();
+                    return;
+                }
+            }
+        }
+        // Update coin positions
+        function updateCoins() {
+            for (let i = coinsArray.length - 1; i >= 0; i--) {
+                const coin = coinsArray[i];
+                const currentLeft = parseInt(coin.element.style.left);
+                const newLeft = currentLeft - gameSpeed;
+                coin.element.style.left = `${newLeft}px`;
+                // Remove coin if it's off screen
+                if (newLeft < -50) {
+                    gameContainer.removeChild(coin.element);
+                    coinsArray.splice(i, 1);
+                }
+                // Check for collection
+                if (checkCollision(player, coin.element) && coin.lane === playerLane) {
+                    coins++;
+                    coinsElement.textContent = coins;
+                    // Create sparkle effect
+                    const sparkle = document.createElement('div');
+                    sparkle.style.position = 'absolute';
+                    sparkle.style.left = coin.element.style.left;
+                    sparkle.style.top = coin.element.style.top;
+                    sparkle.style.width = '40px';
+                    sparkle.style.height = '40px';
+                    sparkle.style.backgroundImage = 'radial-gradient(circle, yellow, transparent)';
+                    sparkle.style.zIndex = '15';
+                    sparkle.style.pointerEvents = 'none';
+                    sparkle.style.opacity = '0.8';
+                    sparkle.style.animation = 'fadeOut 0.5s forwards';
+                    gameContainer.appendChild(sparkle);
+                    setTimeout(() => {
+                        gameContainer.removeChild(sparkle);
+                    }, 500);
+                    gameContainer.removeChild(coin.element);
+                    coinsArray.splice(i, 1);
+                    // Play coin sound
+                    playSound('coin');
+                }
+            }
+        }
+        // Check collision between two elements
+        function checkCollision(element1, element2) {
+            const rect1 = element1.getBoundingClientRect();
+            const rect2 = element2.getBoundingClientRect();
+            return !(
+                rect1.right < rect2.left ||
+                rect1.left > rect2.right ||
+                rect1.bottom < rect2.top ||
+                rect1.top > rect2.bottom
+            );
+        }
+        // Game over function
+        function gameOver() {
+            gameRunning = false;
+            cancelAnimationFrame(animationId);
+            // Show game over screen
+            finalScoreElement.textContent = score;
+            finalCoinsElement.textContent = coins;
+            gameOverScreen.style.display = 'flex';
+            // Play crash sound
+            playSound('crash');
+        }
+        // Reset game state
+        function resetGame() {
+            // Clear all obstacles and coins
+            obstacles.forEach(obstacle => {
+                if (obstacle.element.parentNode) {
+                    gameContainer.removeChild(obstacle.element);
+                }
+            });
+            coinsArray.forEach(coin => {
+                if (coin.element.parentNode) {
+                    gameContainer.removeChild(coin.element);
+                }
+            });
+            obstacles = [];
+            coinsArray = [];
+            // Reset player
+            initPlayer();
+            // Reset score and speed
+            score = 0;
+            coins = 0;
+            gameSpeed = 5;
+            frameCount = 0;
+            // Update UI
+            scoreElement.textContent = score;
+            coinsElement.textContent = coins;
+        }
+        // Main game loop
+        function gameLoop() {
+            if (!gameRunning) return;
+            frameCount++;
+            // Spawn new obstacles and coins
+            if (frameCount % obstacleSpawnRate === 0) {
+                createObstacle();
+                // Increase difficulty over time
+                if (obstacleSpawnRate > 40) {
+                    obstacleSpawnRate -= 1;
+                }
+            }
+            if (frameCount % coinSpawnRate === 0) {
+                createCoin();
+            }
+            // Update game elements
+            updateObstacles();
+            updateCoins();
+            // Increase score
+            score++;
+            scoreElement.textContent = Math.floor(score / 10);
+            // Gradually increase game speed
+            if (frameCount % 500 === 0) {
+                gameSpeed += 0.5;
+            }
+            // End jump/roll animation after short time
+            if (isJumping && frameCount % 30 === 0) {
+                isJumping = false;
+                player.style.transform = 'none';
+            }
+            if (isRolling && frameCount % 40 === 0) {
+                isRolling = false;
+                player.style.transform = 'none';
+                player.style.height = '100px';
+            }
+            animationId = requestAnimationFrame(gameLoop);
+        }
+        // Start the game
+        function startGame() {
+            resetGame();
+            gameRunning = true;
+            startScreen.style.display = 'none';
+            gameOverScreen.style.display = 'none';
+            gameLoop();
+        }
+        // Play sound effects
+        function playSound(type) {
+            // In a real game, you would play actual sound files here
+            console.log(`Playing ${type} sound`);
+        }
+        // Handle swipe gestures
+        let touchStartY = 0;
+        let touchEndY = 0;
+        function handleTouchStart(e) {
+            touchStartY = e.changedTouches[0].screenY;
+        }
+        function handleTouchEnd(e) {
+            if (!gameRunning) return;
+            touchEndY = e.changedTouches[0].screenY;
+            const diffY = touchStartY - touchEndY;
+            // Swipe up
+            if (diffY > 50) {
+                if (playerLane > 0) {
+                    moveToLane(playerLane - 1);
+                    playSound('swipe');
+                } else {
+                    // Jump if already in top lane
+                    if (!isJumping && !isRolling) {
+                        isJumping = true;
+                        player.style.transform = 'translateY(-30px)';
+                        playSound('jump');
+                    }
+                }
+            }
+            // Swipe down
+            else if (diffY < -50) {
+                if (playerLane < 2) {
+                    moveToLane(playerLane + 1);
+                    playSound('swipe');
+                } else {
+                    // Roll if already in bottom lane
+                    if (!isJumping && !isRolling) {
+                        isRolling = true;
+                        player.style.height = '50px';
+                        player.style.transform = 'rotate(360deg)';
+                        playSound('roll');
+                    }
+                }
+            }
+        }
+        // Keyboard controls
+        function handleKeyDown(e) {
+            if (!gameRunning) return;
+            switch(e.key) {
+                case 'ArrowUp':
+                    if (playerLane > 0) {
+                        moveToLane(playerLane - 1);
+                        playSound('swipe');
+                    } else {
+                        // Jump if already in top lane
+                        if (!isJumping && !isRolling) {
+                            isJumping = true;
+                            player.style.transform = 'translateY(-30px)';
+                            playSound('jump');
+                        }
+                    }
+                    break;
+                case 'ArrowDown':
+                    if (playerLane < 2) {
+                        moveToLane(playerLane + 1);
+                        playSound('swipe');
+                    } else {
+                        // Roll if already in bottom lane
+                        if (!isJumping && !isRolling) {
+                            isRolling = true;
+                            player.style.height = '50px';
+                            player.style.transform = 'rotate(360deg)';
+                            playSound('roll');
+                        }
+                    }
+                    break;
+                case ' ':
+                    // Jump or roll based on current lane
+                    if (playerLane === 0 && !isJumping && !isRolling) {
+                        isJumping = true;
+                        player.style.transform = 'translateY(-30px)';
+                        playSound('jump');
+                    } else if (playerLane === 2 && !isJumping && !isRolling) {
+                        isRolling = true;
+                        player.style.height = '50px';
+                        player.style.transform = 'rotate(360deg)';
+                        playSound('roll');
+                    }
+                    break;
+            }
+        }
+        // Event listeners
+        startButton.addEventListener('click', startGame);
+        restartButton.addEventListener('click', startGame);
+        // Touch controls for mobile
+        gameContainer.addEventListener('touchstart', handleTouchStart, false);
+        gameContainer.addEventListener('touchend', handleTouchEnd, false);
+        // Keyboard controls for desktop
+        document.addEventListener('keydown', handleKeyDown);
+        // Initialize player position
+        initPlayer();
+    </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=dlma/subway" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>