Spaces:

Fdgg55
/

shadow-fighter

Running

File size: 21,175 Bytes

5508fda

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sohail: Shadow Fighter</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @keyframes walk {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }
        
        @keyframes attack {
            0% { transform: translateX(0) rotate(0); }
            50% { transform: translateX(20px) rotate(5deg); }
            100% { transform: translateX(0) rotate(0); }
        }
        
        @keyframes jump {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-100px); }
        }
        
        @keyframes enemyHit {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(30px); }
            50% { transform: translateX(-30px); }
            75% { transform: translateX(15px); }
        }
        
        @keyframes enemyDie {
            to { transform: translateY(200px) rotate(360deg); opacity: 0; }
        }
        
        .game-container {
            background: linear-gradient(to bottom, #111827, #1f2937);
            overflow: hidden;
            position: relative;
        }
        
        .player {
            transition: left 0.1s linear;
        }
        
        .player.walking {
            animation: walk 0.5s infinite;
        }
        
        .player.attacking {
            animation: attack 0.3s forwards;
        }
        
        .player.jumping {
            animation: jump 0.8s forwards;
        }
        
        .enemy {
            transition: left 0.2s linear;
        }
        
        .enemy.hit {
            animation: enemyHit 0.5s forwards;
        }
        
        .enemy.dying {
            animation: enemyDie 1s forwards;
        }
        
        .health-bar {
            transition: width 0.3s ease;
        }
        
        .sword-slash {
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        .sword-slash.active {
            opacity: 1;
        }
        
        .shadow {
            filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.7));
        }
    </style>
</head>
<body class="bg-gray-900 text-white">
    <div class="container mx-auto px-4 py-8">
        <h1 class="text-4xl font-bold text-center mb-6 text-yellow-400">Sohail: Shadow Fighter</h1>
        
        <div class="flex justify-between items-center mb-4">
            <div class="flex items-center">
                <div class="w-32 bg-gray-700 rounded-full h-4 mr-2">
                    <div id="player-health" class="health-bar bg-green-500 h-4 rounded-full" style="width: 100%"></div>
                </div>
                <span class="font-bold">Sohail</span>
            </div>
            
            <div class="text-xl font-bold">
                Score: <span id="score">0</span>
            </div>
            
            <div class="flex items-center">
                <span class="font-bold mr-2">Enemies: <span id="enemies-left">5</span></span>
                <div class="w-32 bg-gray-700 rounded-full h-4">
                    <div id="enemy-health" class="health-bar bg-red-500 h-4 rounded-full" style="width: 100%"></div>
                </div>
            </div>
        </div>
        
        <div class="game-container relative h-96 w-full rounded-lg border-2 border-gray-700 shadow-lg">
            <!-- Ground -->
            <div class="absolute bottom-0 w-full h-16 bg-gray-800"></div>
            
            <!-- Player -->
            <div id="player" class="player absolute bottom-16 left-32 w-24 h-32 flex flex-col items-center">
                <div class="sword-slash absolute -left-10 -top-10 w-32 h-32 opacity-0 transition-opacity">
                    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNDQ4IDBMMzY4LjEgMTI4aDgzLjlMNDQ4IDB6bS0xMjggMTI4TDI1NiAyNTZsOTYuMS05Ni4xTDM2MCAxMjhoLTQwem0tODcuOSAwTDEyOCAyNTZsOTYuMS05Ni4xTDI0MCAxMjhoLTc5Ljl6bS0xMjggMEwwIDQ0OGwxMjgtMTI4aDgzLjlMMjI0IDEyOGgtODcuOXoiLz48L3N2Zz4=" class="w-full h-full rotate-45" />
                </div>
                <div class="relative">
                    <div class="w-16 h-24 bg-blue-600 rounded-t-full shadow"></div>
                    <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-8 h-8 bg-yellow-400 rounded-full"></div>
                    <div class="absolute top-8 left-1/2 transform -translate-x-1/2 w-4 h-4 bg-black rounded-full"></div>
                    <div class="absolute top-12 left-1/2 transform -translate-x-1/2 w-16 h-2 bg-gray-300 rounded-full"></div>
                </div>
                <div class="flex justify-center mt-2">
                    <div class="w-4 h-8 bg-blue-800"></div>
                    <div class="w-16 h-4 bg-blue-600"></div>
                    <div class="w-4 h-8 bg-blue-800"></div>
                </div>
                <div class="w-24 h-4 bg-gray-700 rounded-full mt-1"></div>
                <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 w-20 h-4 bg-gray-900 opacity-50 rounded-full blur"></div>
            </div>
            
            <!-- Enemy -->
            <div id="enemy" class="enemy absolute bottom-16 right-32 w-24 h-32 flex flex-col items-center">
                <div class="relative">
                    <div class="w-16 h-24 bg-red-600 rounded-t-full shadow"></div>
                    <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-8 h-8 bg-gray-400 rounded-full"></div>
                    <div class="absolute top-8 left-1/2 transform -translate-x-1/2 w-4 h-4 bg-black rounded-full"></div>
                    <div class="absolute top-12 left-1/2 transform -translate-x-1/2 w-16 h-2 bg-gray-300 rounded-full"></div>
                </div>
                <div class="flex justify-center mt-2">
                    <div class="w-4 h-8 bg-red-800"></div>
                    <div class="w-16 h-4 bg-red-600"></div>
                    <div class="w-4 h-8 bg-red-800"></div>
                </div>
                <div class="w-24 h-4 bg-gray-700 rounded-full mt-1"></div>
                <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 w-20 h-4 bg-gray-900 opacity-50 rounded-full blur"></div>
            </div>
            
            <!-- Game Over Screen -->
            <div id="game-over" class="absolute inset-0 bg-black bg-opacity-80 flex flex-col items-center justify-center hidden">
                <h2 class="text-5xl font-bold text-red-500 mb-4">GAME OVER</h2>
                <p class="text-2xl mb-8">Final Score: <span id="final-score">0</span></p>
                <button id="restart-btn" class="px-8 py-3 bg-yellow-500 text-black font-bold rounded-lg hover:bg-yellow-400 transition">Play Again</button>
            </div>
            
            <!-- Victory Screen -->
            <div id="victory" class="absolute inset-0 bg-black bg-opacity-80 flex flex-col items-center justify-center hidden">
                <h2 class="text-5xl font-bold text-green-500 mb-4">VICTORY!</h2>
                <p class="text-2xl mb-8">Final Score: <span id="victory-score">0</span></p>
                <button id="next-level-btn" class="px-8 py-3 bg-yellow-500 text-black font-bold rounded-lg hover:bg-yellow-400 transition">Next Level</button>
            </div>
        </div>
        
        <div class="mt-6 flex justify-center space-x-4">
            <button id="left-btn" class="px-6 py-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition">
                <i class="fas fa-arrow-left"></i>
            </button>
            <button id="right-btn" class="px-6 py-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition">
                <i class="fas fa-arrow-right"></i>
            </button>
            <button id="attack-btn" class="px-6 py-3 bg-red-600 rounded-lg hover:bg-red-500 transition">
                <i class="fas fa-bolt"></i> Attack
            </button>
            <button id="jump-btn" class="px-6 py-3 bg-blue-600 rounded-lg hover:bg-blue-500 transition">
                <i class="fas fa-arrow-up"></i> Jump
            </button>
        </div>
        
        <div class="mt-8 bg-gray-800 p-4 rounded-lg">
            <h3 class="text-xl font-bold mb-2 text-yellow-400">Controls:</h3>
            <ul class="list-disc pl-5">
                <li>Arrow buttons to move left and right</li>
                <li>Attack button to strike enemies</li>
                <li>Jump button to avoid attacks</li>
                <li>Defeat all enemies to win!</li>
            </ul>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Game elements
            const player = document.getElementById('player');
            const enemy = document.getElementById('enemy');
            const playerHealth = document.getElementById('player-health');
            const enemyHealth = document.getElementById('enemy-health');
            const scoreElement = document.getElementById('score');
            const enemiesLeftElement = document.getElementById('enemies-left');
            const gameOverScreen = document.getElementById('game-over');
            const victoryScreen = document.getElementById('victory');
            const finalScoreElement = document.getElementById('final-score');
            const victoryScoreElement = document.getElementById('victory-score');
            const swordSlash = player.querySelector('.sword-slash');
            
            // Buttons
            const leftBtn = document.getElementById('left-btn');
            const rightBtn = document.getElementById('right-btn');
            const attackBtn = document.getElementById('attack-btn');
            const jumpBtn = document.getElementById('jump-btn');
            const restartBtn = document.getElementById('restart-btn');
            const nextLevelBtn = document.getElementById('next-level-btn');
            
            // Game state
            let playerX = 128;
            let enemyX = 500;
            let playerHP = 100;
            let currentEnemyHP = 100;
            let score = 0;
            let enemiesDefeated = 0;
            const totalEnemies = 5;
            let isAttacking = false;
            let isJumping = false;
            let gameActive = true;
            let enemyMovingInterval;
            let enemyAttackingInterval;
            
            // Initialize game
            initGame();
            
            function initGame() {
                playerX = 128;
                enemyX = 500;
                playerHP = 100;
                currentEnemyHP = 100;
                enemiesDefeated = 0;
                gameActive = true;
                
                updatePositions();
                updateHealthBars();
                updateScore();
                updateEnemiesLeft();
                
                gameOverScreen.classList.add('hidden');
                victoryScreen.classList.add('hidden');
                
                startEnemyAI();
            }
            
            function updatePositions() {
                player.style.left = `${playerX}px`;
                enemy.style.left = `${enemyX}px`;
            }
            
            function updateHealthBars() {
                playerHealth.style.width = `${playerHP}%`;
                enemyHealth.style.width = `${currentEnemyHP}%`;
            }
            
            function updateScore() {
                scoreElement.textContent = score;
            }
            
            function updateEnemiesLeft() {
                enemiesLeftElement.textContent = totalEnemies - enemiesDefeated;
            }
            
            // Movement controls
            leftBtn.addEventListener('mousedown', () => {
                if (!gameActive) return;
                player.classList.add('walking');
                moveLeft();
            });
            
            leftBtn.addEventListener('mouseup', () => {
                player.classList.remove('walking');
            });
            
            leftBtn.addEventListener('mouseleave', () => {
                player.classList.remove('walking');
            });
            
            rightBtn.addEventListener('mousedown', () => {
                if (!gameActive) return;
                player.classList.add('walking');
                moveRight();
            });
            
            rightBtn.addEventListener('mouseup', () => {
                player.classList.remove('walking');
            });
            
            rightBtn.addEventListener('mouseleave', () => {
                player.classList.remove('walking');
            });
            
            function moveLeft() {
                if (playerX > 0) {
                    playerX -= 10;
                    updatePositions();
                    checkPlayerPosition();
                }
            }
            
            function moveRight() {
                if (playerX < 800) {
                    playerX += 10;
                    updatePositions();
                    checkPlayerPosition();
                }
            }
            
            // Keyboard controls
            document.addEventListener('keydown', (e) => {
                if (!gameActive) return;
                
                if (e.key === 'ArrowLeft') {
                    player.classList.add('walking');
                    moveLeft();
                } else if (e.key === 'ArrowRight') {
                    player.classList.add('walking');
                    moveRight();
                } else if (e.key === ' ' || e.key === 'x') {
                    attack();
                } else if (e.key === 'ArrowUp' || e.key === 'z') {
                    jump();
                }
            });
            
            document.addEventListener('keyup', (e) => {
                if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
                    player.classList.remove('walking');
                }
            });
            
            // Attack
            attackBtn.addEventListener('click', attack);
            
            function attack() {
                if (!gameActive || isAttacking || isJumping) return;
                
                isAttacking = true;
                player.classList.add('attacking');
                swordSlash.classList.add('active');
                
                // Check if enemy is in range
                const distance = Math.abs(playerX - enemyX);
                if (distance < 150) {
                    hitEnemy();
                }
                
                setTimeout(() => {
                    player.classList.remove('attacking');
                    swordSlash.classList.remove('active');
                    isAttacking = false;
                }, 300);
            }
            
            function hitEnemy() {
                const damage = Math.floor(Math.random() * 20) + 10;
                currentEnemyHP = Math.max(0, currentEnemyHP - damage);
                updateHealthBars();
                
                enemy.classList.add('hit');
                setTimeout(() => {
                    enemy.classList.remove('hit');
                }, 500);
                
                if (currentEnemyHP <= 0) {
                    defeatEnemy();
                }
            }
            
            function defeatEnemy() {
                clearInterval(enemyMovingInterval);
                clearInterval(enemyAttackingInterval);
                
                enemy.classList.add('dying');
                score += 100;
                enemiesDefeated++;
                updateScore();
                updateEnemiesLeft();
                
                setTimeout(() => {
                    if (enemiesDefeated >= totalEnemies) {
                        victory();
                    } else {
                        spawnNewEnemy();
                    }
                }, 1000);
            }
            
            function spawnNewEnemy() {
                enemyX = 600 + Math.random() * 100;
                currentEnemyHP = 100;
                enemyHealth.style.width = '100%';
                enemy.classList.remove('dying');
                updatePositions();
                startEnemyAI();
            }
            
            // Jump
            jumpBtn.addEventListener('click', jump);
            
            function jump() {
                if (!gameActive || isJumping) return;
                
                isJumping = true;
                player.classList.add('jumping');
                
                setTimeout(() => {
                    player.classList.remove('jumping');
                    isJumping = false;
                }, 800);
            }
            
            // Enemy AI
            function startEnemyAI() {
                // Enemy movement
                enemyMovingInterval = setInterval(() => {
                    if (!gameActive) return;
                    
                    const distance = playerX - enemyX;
                    
                    if (Math.abs(distance) > 150) {
                        // Move toward player
                        enemyX += distance > 0 ? 5 : -5;
                        updatePositions();
                    }
                }, 100);
                
                // Enemy attacks
                enemyAttackingInterval = setInterval(() => {
                    if (!gameActive || isJumping) return;
                    
                    const distance = Math.abs(playerX - enemyX);
                    if (distance < 120) {
                        enemyAttack();
                    }
                }, 1500 + Math.random() * 2000);
            }
            
            function enemyAttack() {
                if (!gameActive) return;
                
                // Simple attack - just damage player if close
                const distance = Math.abs(playerX - enemyX);
                if (distance < 120 && !isJumping) {
                    const damage = Math.floor(Math.random() * 15) + 5;
                    playerHP = Math.max(0, playerHP - damage);
                    updateHealthBars();
                    
                    if (playerHP <= 0) {
                        gameOver();
                    }
                }
            }
            
            function checkPlayerPosition() {
                const distance = Math.abs(playerX - enemyX);
                if (distance < 80 && !isJumping) {
                    // Player too close - push back
                    playerX = playerX < enemyX ? enemyX - 80 : enemyX + 80;
                    updatePositions();
                    
                    // Also take damage
                    const damage = Math.floor(Math.random() * 10) + 5;
                    playerHP = Math.max(0, playerHP - damage);
                    updateHealthBars();
                    
                    if (playerHP <= 0) {
                        gameOver();
                    }
                }
            }
            
            // Game over
            function gameOver() {
                gameActive = false;
                clearInterval(enemyMovingInterval);
                clearInterval(enemyAttackingInterval);
                
                finalScoreElement.textContent = score;
                gameOverScreen.classList.remove('hidden');
            }
            
            // Victory
            function victory() {
                gameActive = false;
                clearInterval(enemyMovingInterval);
                clearInterval(enemyAttackingInterval);
                
                victoryScoreElement.textContent = score;
                victoryScreen.classList.remove('hidden');
            }
            
            // Restart game
            restartBtn.addEventListener('click', initGame);
            
            // Next level (just restart for now)
            nextLevelBtn.addEventListener('click', () => {
                score += 500; // Bonus for completing level
                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=Fdgg55/shadow-fighter" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>