Spaces:
Running
Running
| <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> |