Spaces:

Amirreza12cv0
/

call-of-duty

Running

File size: 26,994 Bytes

abd7acc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Call of Duty: Web Ops</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 gunRecoil {
            0% { transform: translateY(0) translateX(-50%); }
            50% { transform: translateY(10px) translateX(-50%); }
            100% { transform: translateY(0) translateX(-50%); }
        }
        
        @keyframes muzzleFlash {
            0% { opacity: 0; transform: scale(0.5); }
            50% { opacity: 1; transform: scale(1.2); }
            100% { opacity: 0; transform: scale(0.5); }
        }
        
        @keyframes bloodSplatter {
            0% { opacity: 0; transform: scale(0.5); }
            50% { opacity: 0.8; transform: scale(1); }
            100% { opacity: 0; transform: scale(1.2); }
        }
        
        @keyframes enemyHit {
            0% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            50% { transform: translateX(5px); }
            75% { transform: translateX(-5px); }
            100% { transform: translateX(0); }
        }
        
        .gun {
            transition: transform 0.1s ease;
        }
        
        .recoil {
            animation: gunRecoil 0.1s ease-out;
        }
        
        .muzzle-flash {
            position: absolute;
            width: 60px;
            height: 60px;
            background: radial-gradient(circle, rgba(255,165,0,0.8) 0%, rgba(255,69,0,0) 70%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 10;
            animation: muzzleFlash 0.05s ease-out;
        }
        
        .blood-effect {
            position: absolute;
            width: 100%;
            height: 100%;
            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"><path d="M30,50 Q40,30 50,50 Q60,70 70,50 Q80,30 50,10 Q20,30 30,50 Z" fill="rgba(139,0,0,0.3)"/></svg>');
            background-size: 200px 200px;
            pointer-events: none;
            z-index: 5;
            animation: bloodSplatter 0.5s ease-out;
        }
        
        .hitmarker {
            position: absolute;
            width: 30px;
            height: 30px;
            border: 2px solid white;
            pointer-events: none;
            z-index: 15;
            opacity: 0;
        }
        
        .hitmarker.active {
            animation: hitmarkerFade 0.3s ease-out;
        }
        
        @keyframes hitmarkerFade {
            0% { transform: scale(0.5); opacity: 1; }
            100% { transform: scale(1.5); opacity: 0; }
        }
        
        .enemy-hit {
            animation: enemyHit 0.3s ease-out;
        }
        
        .scope-overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.7) 40.2%);
            pointer-events: none;
            z-index: 5;
        }
        
        .health-bar {
            transition: width 0.3s ease;
        }
        
        .ammo-counter {
            text-shadow: 0 0 5px rgba(255,255,255,0.7);
        }
        
        .kill-feed {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 250px;
            max-height: 200px;
            overflow: hidden;
        }
        
        .kill-entry {
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 5px 10px;
            margin-bottom: 5px;
            border-left: 3px solid #e74c3c;
            transform: translateX(100%);
            animation: slideIn 0.3s forwards, fadeOut 0.3s 3s forwards;
        }
        
        @keyframes slideIn {
            to { transform: translateX(0); }
        }
        
        @keyframes fadeOut {
            to { opacity: 0; max-height: 0; padding: 0; margin: 0; }
        }
    </style>
</head>
<body class="bg-gray-900 text-white overflow-hidden h-screen">
    <!-- Blood effect -->
    <div id="bloodEffect" class="blood-effect opacity-0"></div>
    
    <!-- Hitmarker -->
    <div id="hitmarker" class="hitmarker"></div>
    
    <!-- Scope overlay -->
    <div id="scopeOverlay" class="scope-overlay hidden"></div>
    
    <!-- Kill feed -->
    <div id="killFeed" class="kill-feed"></div>
    
    <!-- Game HUD -->
    <div class="absolute bottom-0 left-0 right-0 p-4 z-10">
        <div class="flex justify-between items-end">
            <!-- Health -->
            <div class="bg-gray-800 rounded-lg p-3 w-40">
                <div class="flex items-center mb-1">
                    <i class="fas fa-heartbeat text-red-500 mr-2"></i>
                    <span class="font-bold">HEALTH</span>
                </div>
                <div class="bg-gray-700 h-4 rounded-full overflow-hidden">
                    <div id="healthBar" class="health-bar bg-red-500 h-full rounded-full" style="width: 100%"></div>
                </div>
            </div>
            
            <!-- Ammo -->
            <div class="bg-gray-800 rounded-lg p-3 text-center">
                <div id="ammoCounter" class="ammo-counter text-2xl font-bold">
                    <span id="currentAmmo">30</span> / <span id="totalAmmo">90</span>
                </div>
                <div class="text-xs mt-1">M4A1 | 5.56mm</div>
            </div>
            
            <!-- Score -->
            <div class="bg-gray-800 rounded-lg p-3 w-40 text-right">
                <div class="flex justify-end items-center">
                    <i class="fas fa-skull text-yellow-500 ml-2"></i>
                    <span class="font-bold">KILLS</span>
                </div>
                <div id="killCount" class="text-2xl font-bold">0</div>
            </div>
        </div>
    </div>
    
    <!-- Gun -->
    <div id="gun" class="gun absolute bottom-10 left-1/2 transform -translate-x-1/2 w-64 h-64 z-20">
        <div class="relative w-full h-full">
            <!-- Rifle -->
            <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-48 h-32 bg-gradient-to-r from-gray-700 to-gray-800 rounded-lg">
                <!-- Barrel -->
                <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-40 h-6 bg-gray-800 rounded-t-lg"></div>
                <!-- Stock -->
                <div class="absolute bottom-0 right-0 w-16 h-24 bg-gray-900 rounded-br-lg"></div>
                <!-- Magazine -->
                <div class="absolute bottom-4 left-4 w-8 h-16 bg-gray-600 rounded"></div>
                <!-- Scope -->
                <div class="absolute top-2 left-1/2 transform -translate-x-1/2 w-12 h-6 bg-gray-900 rounded-lg flex justify-center items-center">
                    <div class="w-1 h-1 bg-red-500 rounded-full"></div>
                </div>
                <!-- Trigger -->
                <div class="absolute bottom-8 right-8 w-4 h-2 bg-gray-900 rounded"></div>
            </div>
            
            <!-- Muzzle flash (hidden by default) -->
            <div id="muzzleFlash" class="muzzle-flash hidden top-10 left-1/2 transform -translate-x-1/2"></div>
        </div>
    </div>
    
    <!-- Enemies container -->
    <div id="enemiesContainer" class="absolute top-0 left-0 w-full h-full"></div>
    
    <!-- Game Over Screen -->
    <div id="gameOverScreen" class="absolute inset-0 bg-black bg-opacity-90 flex flex-col items-center justify-center hidden z-30">
        <div class="bg-gray-800 p-8 rounded-xl max-w-md w-full text-center border border-red-500">
            <h2 class="text-3xl font-bold text-red-500 mb-4">MISSION FAILED</h2>
            <div class="mb-6">
                <p class="text-xl">Total Kills: <span id="finalKills" class="font-bold text-white">0</span></p>
                <p class="text-xl mt-2">Accuracy: <span id="finalAccuracy" class="font-bold text-white">0%</span></p>
            </div>
            <button id="restartBtn" class="bg-gradient-to-r from-red-700 to-gray-900 px-6 py-3 rounded-full font-bold hover:opacity-90 transition border border-red-500 w-full">
                <i class="fas fa-redo mr-2"></i> Redeploy
            </button>
        </div>
    </div>
    
    <!-- Start Screen -->
    <div id="startScreen" class="absolute inset-0 bg-black bg-opacity-90 flex flex-col items-center justify-center z-30">
        <div class="bg-gray-800 p-8 rounded-xl max-w-md w-full text-center border border-red-500">
            <h1 class="text-4xl font-bold bg-gradient-to-r from-red-500 to-yellow-500 bg-clip-text text-transparent mb-6">
                CALL OF DUTY: WEB OPS
            </h1>
            <div class="mb-8">
                <div class="w-full h-40 bg-gray-900 rounded-lg relative overflow-hidden mb-4">
                    <div class="absolute inset-0 flex items-center justify-center">
                        <div class="w-24 h-24 bg-red-500 rounded-full animate-pulse"></div>
                    </div>
                </div>
                <p class="text-gray-300 mb-2">Eliminate all hostile targets</p>
                <p class="text-gray-400 text-sm">Watch your ammo and health</p>
            </div>
            <button id="startBtn" class="bg-gradient-to-r from-red-700 to-gray-900 px-6 py-3 rounded-full font-bold hover:opacity-90 transition border border-red-500 w-full">
                <i class="fas fa-play mr-2"></i> Deploy Now
            </button>
            <div class="mt-6 text-sm text-gray-500">
                <p>Click to shoot | WASD to move | Space to jump</p>
                <p class="mt-2">Right click to aim down sights</p>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Game elements
            const gameContainer = document.body;
            const gun = document.getElementById('gun');
            const muzzleFlash = document.getElementById('muzzleFlash');
            const healthBar = document.getElementById('healthBar');
            const currentAmmo = document.getElementById('currentAmmo');
            const totalAmmo = document.getElementById('totalAmmo');
            const killCount = document.getElementById('killCount');
            const bloodEffect = document.getElementById('bloodEffect');
            const hitmarker = document.getElementById('hitmarker');
            const scopeOverlay = document.getElementById('scopeOverlay');
            const killFeed = document.getElementById('killFeed');
            const startScreen = document.getElementById('startScreen');
            const gameOverScreen = document.getElementById('gameOverScreen');
            const finalKills = document.getElementById('finalKills');
            const finalAccuracy = document.getElementById('finalAccuracy');
            const startBtn = document.getElementById('startBtn');
            const restartBtn = document.getElementById('restartBtn');
            const enemiesContainer = document.getElementById('enemiesContainer');
            
            // Game state
            let gameRunning = false;
            let health = 100;
            let ammo = 30;
            let totalAmmoCount = 90;
            let kills = 0;
            let shotsFired = 0;
            let shotsHit = 0;
            let enemies = [];
            let enemySpawnInterval;
            let gameLoopInterval;
            let isAiming = false;
            let playerPosition = { x: 0, y: 0 };
            let mouseX = 0;
            let mouseY = 0;
            
            // Initialize game
            initGame();
            
            // Event listeners
            startBtn.addEventListener('click', startGame);
            restartBtn.addEventListener('click', startGame);
            
            // Mouse controls
            gameContainer.addEventListener('mousedown', (e) => {
                if (!gameRunning) return;
                
                if (e.button === 0) { // Left click
                    shoot();
                } else if (e.button === 2) { // Right click
                    aimDownSights(true);
                }
            });
            
            gameContainer.addEventListener('mouseup', (e) => {
                if (e.button === 2) { // Right click release
                    aimDownSights(false);
                }
            });
            
            gameContainer.addEventListener('mousemove', (e) => {
                mouseX = e.clientX;
                mouseY = e.clientY;
                
                // Slight gun movement based on mouse position
                if (gameRunning) {
                    const moveX = (mouseX - window.innerWidth / 2) / 50;
                    const moveY = (mouseY - window.innerHeight / 2) / 50;
                    gun.style.transform = `translateX(-50%) translateY(${moveY}px) translateX(${moveX}px)`;
                }
            });
            
            gameContainer.addEventListener('contextmenu', (e) => {
                e.preventDefault(); // Prevent context menu on right click
            });
            
            // Keyboard controls
            document.addEventListener('keydown', (e) => {
                if (!gameRunning) return;
                
                switch (e.key.toLowerCase()) {
                    case 'w':
                        playerPosition.y = -5;
                        break;
                    case 'a':
                        playerPosition.x = -5;
                        break;
                    case 's':
                        playerPosition.y = 5;
                        break;
                    case 'd':
                        playerPosition.x = 5;
                        break;
                    case ' ':
                        // Jump action
                        break;
                    case 'r':
                        reload();
                        break;
                }
            });
            
            document.addEventListener('keyup', (e) => {
                switch (e.key.toLowerCase()) {
                    case 'w':
                    case 's':
                        playerPosition.y = 0;
                        break;
                    case 'a':
                    case 'd':
                        playerPosition.x = 0;
                        break;
                }
            });
            
            // Game functions
            function initGame() {
                // Reset game state
                health = 100;
                ammo = 30;
                totalAmmoCount = 90;
                kills = 0;
                shotsFired = 0;
                shotsHit = 0;
                enemies = [];
                
                // Update UI
                healthBar.style.width = '100%';
                currentAmmo.textContent = ammo;
                totalAmmo.textContent = totalAmmoCount;
                killCount.textContent = kills;
                
                // Clear enemies
                enemiesContainer.innerHTML = '';
                
                // Show start screen
                startScreen.classList.remove('hidden');
                gameOverScreen.classList.add('hidden');
            }
            
            function startGame() {
                initGame();
                
                // Hide screens
                startScreen.classList.add('hidden');
                gameOverScreen.classList.add('hidden');
                
                // Start game
                gameRunning = true;
                
                // Start game loop
                gameLoopInterval = setInterval(updateGame, 16); // ~60fps
                
                // Start spawning enemies
                enemySpawnInterval = setInterval(spawnEnemy, 2000);
                
                // Initial enemy spawn
                for (let i = 0; i < 3; i++) {
                    setTimeout(spawnEnemy, i * 500);
                }
            }
            
            function updateGame() {
                // Move player (simple movement for this demo)
                // In a full game, this would update the camera position
                
                // Move enemies
                enemies.forEach(enemy => {
                    // Simple movement - in a real game this would be more sophisticated AI
                    enemy.element.style.left = `${enemy.x}px`;
                    enemy.element.style.top = `${enemy.y}px`;
                    
                    // Random movement
                    if (Math.random() < 0.02) {
                        enemy.vx = (Math.random() - 0.5) * 2;
                    }
                    if (Math.random() < 0.02) {
                        enemy.vy = (Math.random() - 0.5) * 2;
                    }
                    
                    enemy.x += enemy.vx;
                    enemy.y += enemy.vy;
                    
                    // Keep enemies in bounds
                    enemy.x = Math.max(0, Math.min(window.innerWidth - 50, enemy.x));
                    enemy.y = Math.max(0, Math.min(window.innerHeight - 80, enemy.y));
                    
                    // Random shooting at player
                    if (Math.random() < 0.005) {
                        enemyShoot(enemy);
                    }
                });
                
                // Check if player is dead
                if (health <= 0) {
                    endGame();
                }
            }
            
            function spawnEnemy() {
                if (!gameRunning || enemies.length >= 10) return;
                
                const enemy = document.createElement('div');
                enemy.className = 'absolute w-12 h-20 bg-gray-700 rounded-lg flex flex-col items-center';
                
                // Random position at edges of screen
                const side = Math.floor(Math.random() * 4); // 0: top, 1: right, 2: bottom, 3: left
                let x, y;
                
                switch (side) {
                    case 0: // top
                        x = Math.random() * window.innerWidth;
                        y = -50;
                        break;
                    case 1: // right
                        x = window.innerWidth;
                        y = Math.random() * window.innerHeight;
                        break;
                    case 2: // bottom
                        x = Math.random() * window.innerWidth;
                        y = window.innerHeight;
                        break;
                    case 3: // left
                        x = -50;
                        y = Math.random() * window.innerHeight;
                        break;
                }
                
                enemy.style.left = `${x}px`;
                enemy.style.top = `${y}px`;
                
                // Enemy appearance
                enemy.innerHTML = `
                    <div class="w-10 h-6 bg-gray-800 rounded-t-lg mt-1 flex justify-center items-center">
                        <div class="w-2 h-2 bg-red-500 rounded-full"></div>
                    </div>
                    <div class="w-full h-12 bg-gray-600 rounded-b-lg flex justify-center items-center">
                        <i class="fas fa-skull text-gray-400 text-xl"></i>
                    </div>
                `;
                
                enemiesContainer.appendChild(enemy);
                
                enemies.push({
                    element: enemy,
                    x: x,
                    y: y,
                    vx: (Math.random() - 0.5) * 2,
                    vy: (Math.random() - 0.5) * 2,
                    health: 100
                });
            }
            
            function shoot() {
                if (ammo <= 0) {
                    // Play empty click sound
                    return;
                }
                
                // Deduct ammo
                ammo--;
                shotsFired++;
                currentAmmo.textContent = ammo;
                
                // Gun recoil animation
                gun.classList.add('recoil');
                setTimeout(() => {
                    gun.classList.remove('recoil');
                }, 100);
                
                // Muzzle flash
                muzzleFlash.classList.remove('hidden');
                setTimeout(() => {
                    muzzleFlash.classList.add('hidden');
                }, 50);
                
                // Check for hits
                const hitEnemy = checkHit();
                if (hitEnemy) {
                    shotsHit++;
                    hitEnemy.health -= 34; // 3 shots to kill
                    
                    // Hitmarker
                    hitmarker.style.left = `${mouseX - 15}px`;
                    hitmarker.style.top = `${mouseY - 15}px`;
                    hitmarker.classList.add('active');
                    setTimeout(() => {
                        hitmarker.classList.remove('active');
                    }, 300);
                    
                    // Enemy hit reaction
                    hitEnemy.element.classList.add('enemy-hit');
                    setTimeout(() => {
                        hitEnemy.element.classList.remove('enemy-hit');
                    }, 300);
                    
                    // Check if enemy died
                    if (hitEnemy.health <= 0) {
                        killEnemy(hitEnemy);
                    }
                }
                
                // Reload if empty
                if (ammo === 0 && totalAmmoCount > 0) {
                    setTimeout(reload, 500);
                }
            }
            
            function checkHit() {
                // Simple hit detection - in a real game this would use proper raycasting
                const mousePos = { x: mouseX, y: mouseY };
                
                for (let i = 0; i < enemies.length; i++) {
                    const enemy = enemies[i];
                    const enemyRect = enemy.element.getBoundingClientRect();
                    
                    if (
                        mousePos.x >= enemyRect.left &&
                        mousePos.x <= enemyRect.right &&
                        mousePos.y >= enemyRect.top &&
                        mousePos.y <= enemyRect.bottom
                    ) {
                        return enemy;
                    }
                }
                
                return null;
            }
            
            function killEnemy(enemy) {
                // Remove enemy
                enemy.element.remove();
                enemies = enemies.filter(e => e !== enemy);
                
                // Increase kill count
                kills++;
                killCount.textContent = kills;
                
                // Add to kill feed
                addKillFeed();
                
                // Spawn new enemy after delay
                setTimeout(spawnEnemy, 1000);
            }
            
            function addKillFeed() {
                const killEntry = document.createElement('div');
                killEntry.className = 'kill-entry';
                killEntry.textContent = `You killed Enemy`;
                killFeed.appendChild(killEntry);
                
                // Auto-remove after animation
                setTimeout(() => {
                    killEntry.remove();
                }, 3500);
            }
            
            function enemyShoot(enemy) {
                // Simple chance to hit player
                if (Math.random() < 0.3) {
                    const damage = 10 + Math.floor(Math.random() * 15);
                    health -= damage;
                    healthBar.style.width = `${health}%`;
                    
                    // Blood effect
                    bloodEffect.style.opacity = '0.5';
                    bloodEffect.classList.add('blood-effect');
                    setTimeout(() => {
                        bloodEffect.style.opacity = '0';
                    }, 500);
                    
                    // Check if player died
                    if (health <= 0) {
                        endGame();
                    }
                }
            }
            
            function reload() {
                if (totalAmmoCount <= 0) return;
                
                const ammoNeeded = 30 - ammo;
                const ammoToReload = Math.min(ammoNeeded, totalAmmoCount);
                
                totalAmmoCount -= ammoToReload;
                ammo += ammoToReload;
                
                currentAmmo.textContent = ammo;
                totalAmmo.textContent = totalAmmoCount;
                
                // Play reload sound in a real game
            }
            
            function aimDownSights(aiming) {
                isAiming = aiming;
                
                if (aiming) {
                    scopeOverlay.classList.remove('hidden');
                    gun.style.transform = 'translateX(-50%) scale(1.2)';
                } else {
                    scopeOverlay.classList.add('hidden');
                    gun.style.transform = 'translateX(-50%)';
                }
            }
            
            function endGame() {
                gameRunning = false;
                
                // Stop game loops
                clearInterval(gameLoopInterval);
                clearInterval(enemySpawnInterval);
                
                // Calculate accuracy
                const accuracy = shotsFired > 0 ? Math.round((shotsHit / shotsFired) * 100) : 0;
                
                // Update final stats
                finalKills.textContent = kills;
                finalAccuracy.textContent = `${accuracy}%`;
                
                // Show game over screen
                gameOverScreen.classList.remove('hidden');
            }
        });
    </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=Amirreza12cv0/call-of-duty" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>