Spaces:

gghjgff
/

https-huggingface-co-spaces-enzostvs-deepsite

Running

https-huggingface-co-spaces-enzostvs-deepsite
File size: 21,610 Bytes
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>لعبة العداء القوية</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>
        @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;900&display=swap');
        
        body {
            font-family: 'Tajawal', sans-serif;
            background-color: #1a1a2e;
            color: white;
            overflow-x: hidden;
        }
        
        .game-container {
            position: relative;
            height: 500px;
            overflow: hidden;
            background: linear-gradient(to bottom, #16213e, #0f3460);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }
        
        .player {
            position: absolute;
            width: 60px;
            height: 80px;
            bottom: 100px;
            left: 50px;
            transition: transform 0.1s;
            z-index: 10;
        }
        
        .obstacle {
            position: absolute;
            width: 50px;
            height: 50px;
            bottom: 100px;
            right: -50px;
            z-index: 5;
        }
        
        .coin {
            position: absolute;
            width: 30px;
            height: 30px;
            z-index: 5;
            animation: spin 2s linear infinite;
        }
        
        .ground {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100px;
            background-color: #533d2b;
            z-index: 1;
        }
        
        .jump {
            animation: jump 0.8s linear;
        }
        
        @keyframes jump {
            0% { transform: translateY(0); }
            50% { transform: translateY(-150px); }
            100% { transform: translateY(0); }
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .moving-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('https://images.unsplash.com/photo-1506318137071-a8e063b4bec0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
            background-size: cover;
            opacity: 0.2;
            z-index: 0;
        }
        
        .power-up {
            position: absolute;
            width: 40px;
            height: 40px;
            right: -40px;
            z-index: 5;
            animation: pulse 1s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
        
        .game-over {
            transform: scale(1.5) rotate(5deg);
            transition: all 0.5s;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-4">
    <div class="w-full max-w-4xl mx-auto">
        <h1 class="text-4xl font-bold text-center mb-6 text-yellow-400">
            <i class="fas fa-running mr-2"></i> لعبة العداء القوية
        </h1>
        
        <div class="flex justify-between items-center mb-4 px-4">
            <div class="flex items-center">
                <span class="text-xl font-bold text-yellow-400 mr-2">
                    <i class="fas fa-coins"></i> <span id="score">0</span>
                </span>
                <span class="text-xl font-bold text-red-500 ml-4">
                    <i class="fas fa-heart"></i> <span id="lives">3</span>
                </span>
            </div>
            
            <div class="flex items-center">
                <span class="text-xl font-bold text-blue-400">
                    <i class="fas fa-bolt"></i> <span id="power">0</span>%
                </span>
            </div>
        </div>
        
        <div class="game-container relative" id="gameContainer">
            <div class="moving-bg"></div>
            <div class="ground"></div>
            
            <div id="player" class="player">
                <img src="https://cdn-icons-png.flaticon.com/512/3899/3899618.png" alt="العداء" class="w-full h-full">
            </div>
            
            <div id="gameOver" class="hidden absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-70 z-20">
                <h2 class="text-4xl font-bold text-red-500 mb-4">انتهت اللعبة!</h2>
                <p class="text-2xl mb-6">النقاط: <span id="finalScore">0</span></p>
                <button id="restartBtn" class="px-6 py-3 bg-yellow-500 text-black font-bold rounded-full hover:bg-yellow-400 transition">
                    <i class="fas fa-redo mr-2"></i> إعادة المحاولة
                </button>
            </div>
        </div>
        
        <div class="mt-6 flex justify-between items-center">
            <div class="flex space-x-4">
                <button id="jumpBtn" class="px-6 py-3 bg-blue-600 text-white font-bold rounded-full hover:bg-blue-500 transition">
                    <i class="fas fa-arrow-up mr-2"></i> قفز
                </button>
                <button id="powerBtn" class="px-6 py-3 bg-purple-600 text-white font-bold rounded-full hover:bg-purple-500 transition disabled:opacity-50" disabled>
                    <i class="fas fa-bolt mr-2"></i> سرعة خارقة
                </button>
            </div>
            
            <div class="flex items-center">
                <span class="text-lg mr-2">المستوى:</span>
                <select id="levelSelect" class="bg-gray-800 text-white px-3 py-2 rounded">
                    <option value="1">سهل</option>
                    <option value="2">متوسط</option>
                    <option value="3">صعب</option>
                </select>
            </div>
        </div>
        
        <div class="mt-8 bg-gray-900 bg-opacity-50 p-4 rounded-lg">
            <h3 class="text-xl font-bold mb-2 text-yellow-400">
                <i class="fas fa-info-circle mr-2"></i> تعليمات اللعبة
            </h3>
            <ul class="list-disc list-inside space-y-1">
                <li>اضغط زر القفز أو مفتاح المسافة للقفز فوق العقبات</li>
                <li>اجمع العملات لزيادة نقاطك</li>
                <li>اجمع وحدات الطاقة لتفعيل السرعة الخارقة</li>
                <li>استخدم السرعة الخارقة لاجتياز العقبات الصعبة</li>
                <li>لديك 3 محاولات فقط!</li>
            </ul>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // عناصر اللعبة
            const gameContainer = document.getElementById('gameContainer');
            const player = document.getElementById('player');
            const scoreElement = document.getElementById('score');
            const livesElement = document.getElementById('lives');
            const powerElement = document.getElementById('power');
            const gameOverScreen = document.getElementById('gameOver');
            const finalScoreElement = document.getElementById('finalScore');
            const restartBtn = document.getElementById('restartBtn');
            const jumpBtn = document.getElementById('jumpBtn');
            const powerBtn = document.getElementById('powerBtn');
            const levelSelect = document.getElementById('levelSelect');
            
            // متغيرات اللعبة
            let score = 0;
            let lives = 3;
            let power = 0;
            let isJumping = false;
            let isGameOver = false;
            let gameSpeed = 5;
            let isPowerActive = false;
            let powerTimeout;
            let gameInterval;
            let obstacleInterval;
            let coinInterval;
            let powerUpInterval;
            
            // مستويات الصعوبة
            const levels = {
                1: { speed: 5, obstacleFreq: 2000, coinFreq: 1500, powerFreq: 10000 },
                2: { speed: 8, obstacleFreq: 1500, coinFreq: 1200, powerFreq: 8000 },
                3: { speed: 12, obstacleFreq: 1000, coinFreq: 1000, powerFreq: 6000 }
            };
            
            // تهيئة اللعبة
            function initGame() {
                score = 0;
                lives = 3;
                power = 0;
                isGameOver = false;
                isPowerActive = false;
                
                scoreElement.textContent = score;
                livesElement.textContent = lives;
                powerElement.textContent = power;
                
                gameOverScreen.classList.add('hidden');
                player.classList.remove('game-over');
                
                // مسح جميع العقبات والعملات
                document.querySelectorAll('.obstacle, .coin, .power-up').forEach(el => el.remove());
                
                // تعيين سرعة اللعبة حسب المستوى
                const level = parseInt(levelSelect.value);
                gameSpeed = levels[level].speed;
                
                // بدء فترات إنشاء العناصر
                startIntervals(level);
                
                // بدء حركة اللعبة
                if (gameInterval) clearInterval(gameInterval);
                gameInterval = setInterval(updateGame, 20);
            }
            
            // بدء فترات إنشاء العناصر
            function startIntervals(level) {
                if (obstacleInterval) clearInterval(obstacleInterval);
                if (coinInterval) clearInterval(coinInterval);
                if (powerUpInterval) clearInterval(powerUpInterval);
                
                obstacleInterval = setInterval(createObstacle, levels[level].obstacleFreq);
                coinInterval = setInterval(createCoin, levels[level].coinFreq);
                powerUpInterval = setInterval(createPowerUp, levels[level].powerFreq);
            }
            
            // تحديث اللعبة
            function updateGame() {
                if (isGameOver) return;
                
                // تحريك العقبات
                document.querySelectorAll('.obstacle').forEach(obstacle => {
                    const obstacleRight = parseInt(window.getComputedStyle(obstacle).getPropertyValue('right'));
                    const newRight = obstacleRight + gameSpeed;
                    obstacle.style.right = `${newRight}px`;
                    
                    // اكتشاف التصادم
                    if (checkCollision(player, obstacle)) {
                        handleCollision();
                        obstacle.remove();
                    }
                    
                    // إزالة العقبات التي تجاوزت الشاشة
                    if (newRight > gameContainer.offsetWidth + 50) {
                        obstacle.remove();
                    }
                });
                
                // تحريك العملات
                document.querySelectorAll('.coin').forEach(coin => {
                    const coinRight = parseInt(window.getComputedStyle(coin).getPropertyValue('right'));
                    const newRight = coinRight + gameSpeed;
                    coin.style.right = `${newRight}px`;
                    
                    // اكتشاف جمع العملة
                    if (checkCollision(player, coin)) {
                        score += 10;
                        scoreElement.textContent = score;
                        coin.remove();
                        playSound('coin');
                    }
                    
                    // إزالة العملات التي تجاوزت الشاشة
                    if (newRight > gameContainer.offsetWidth + 50) {
                        coin.remove();
                    }
                });
                
                // تحريك وحدات الطاقة
                document.querySelectorAll('.power-up').forEach(powerUp => {
                    const powerUpRight = parseInt(window.getComputedStyle(powerUp).getPropertyValue('right'));
                    const newRight = powerUpRight + gameSpeed;
                    powerUp.style.right = `${newRight}px`;
                    
                    // اكتشاف جمع وحدة الطاقة
                    if (checkCollision(player, powerUp)) {
                        power = Math.min(100, power + 25);
                        powerElement.textContent = power;
                        powerUp.remove();
                        playSound('power');
                        updatePowerButton();
                    }
                    
                    // إزالة وحدات الطاقة التي تجاوزت الشاشة
                    if (newRight > gameContainer.offsetWidth + 50) {
                        powerUp.remove();
                    }
                });
            }
            
            // إنشاء عقبة جديدة
            function createObstacle() {
                if (isGameOver) return;
                
                const obstacle = document.createElement('div');
                obstacle.className = 'obstacle';
                
                // أنواع مختلفة من العقبات
                const obstacleTypes = [
                    { img: 'https://cdn-icons-png.flaticon.com/512/2821/2821637.png', height: 50 },
                    { img: 'https://cdn-icons-png.flaticon.com/512/2821/2821772.png', height: 60 },
                    { img: 'https://cdn-icons-png.flaticon.com/512/2821/2821797.png', height: 70 }
                ];
                
                const type = obstacleTypes[Math.floor(Math.random() * obstacleTypes.length)];
                obstacle.style.height = `${type.height}px`;
                
                const img = document.createElement('img');
                img.src = type.img;
                img.className = 'w-full h-full';
                obstacle.appendChild(img);
                
                // وضع عشوائي للعقبة
                const bottom = Math.random() > 0.5 ? 100 : 80;
                obstacle.style.bottom = `${bottom}px`;
                
                gameContainer.appendChild(obstacle);
            }
            
            // إنشاء عملة جديدة
            function createCoin() {
                if (isGameOver) return;
                
                const coin = document.createElement('div');
                coin.className = 'coin';
                
                const img = document.createElement('img');
                img.src = 'https://cdn-icons-png.flaticon.com/512/2821/2821970.png';
                img.className = 'w-full h-full';
                coin.appendChild(img);
                
                // وضع عشوائي للعملة
                const top = 100 + Math.random() * 200;
                coin.style.top = `${top}px`;
                coin.style.right = '0px';
                
                gameContainer.appendChild(coin);
            }
            
            // إنشاء وحدة طاقة جديدة
            function createPowerUp() {
                if (isGameOver) return;
                
                const powerUp = document.createElement('div');
                powerUp.className = 'power-up';
                
                const img = document.createElement('img');
                img.src = 'https://cdn-icons-png.flaticon.com/512/3520/3520766.png';
                img.className = 'w-full h-full';
                powerUp.appendChild(img);
                
                // وضع عشوائي لوحدة الطاقة
                const top = 100 + Math.random() * 200;
                powerUp.style.top = `${top}px`;
                powerUp.style.right = '0px';
                
                gameContainer.appendChild(powerUp);
            }
            
            // التحقق من التصادم
            function checkCollision(player, element) {
                const playerRect = player.getBoundingClientRect();
                const elementRect = element.getBoundingClientRect();
                
                return !(
                    playerRect.right < elementRect.left + 20 ||
                    playerRect.left > elementRect.right - 20 ||
                    playerRect.bottom < elementRect.top + 20 ||
                    playerRect.top > elementRect.bottom - 20
                );
            }
            
            // التعامل مع التصادم
            function handleCollision() {
                if (isPowerActive) return;
                
                lives--;
                livesElement.textContent = lives;
                player.classList.add('game-over');
                playSound('hit');
                
                setTimeout(() => {
                    player.classList.remove('game-over');
                }, 300);
                
                if (lives <= 0) {
                    endGame();
                }
            }
            
            // إنهاء اللعبة
            function endGame() {
                isGameOver = true;
                clearInterval(gameInterval);
                clearInterval(obstacleInterval);
                clearInterval(coinInterval);
                clearInterval(powerUpInterval);
                
                finalScoreElement.textContent = score;
                gameOverScreen.classList.remove('hidden');
                playSound('gameover');
            }
            
            // القفز
            function jump() {
                if (isJumping || isGameOver) return;
                
                isJumping = true;
                player.classList.add('jump');
                playSound('jump');
                
                setTimeout(() => {
                    player.classList.remove('jump');
                    isJumping = false;
                }, 800);
            }
            
            // تفعيل السرعة الخارقة
            function activatePower() {
                if (power < 100 || isPowerActive || isGameOver) return;
                
                isPowerActive = true;
                power = 0;
                powerElement.textContent = power;
                powerBtn.disabled = true;
                player.style.filter = 'drop-shadow(0 0 10px gold)';
                playSound('powerup');
                
                // زيادة السرعة مؤقتًا
                const originalSpeed = gameSpeed;
                gameSpeed *= 1.5;
                
                powerTimeout = setTimeout(() => {
                    isPowerActive = false;
                    gameSpeed = originalSpeed;
                    player.style.filter = 'none';
                    updatePowerButton();
                }, 3000);
            }
            
            // تحديث حالة زر الطاقة
            function updatePowerButton() {
                powerBtn.disabled = power < 100;
            }
            
            // تشغيل الأصوات
            function playSound(type) {
                // يمكن إضافة أصوات حقيقية هنا
                console.log(`Playing sound: ${type}`);
            }
            
            // أحداث لوحة المفاتيح
            document.addEventListener('keydown', (e) => {
                if (e.code === 'Space') {
                    e.preventDefault();
                    jump();
                }
            });
            
            // أحداث الأزرار
            jumpBtn.addEventListener('click', jump);
            powerBtn.addEventListener('click', activatePower);
            restartBtn.addEventListener('click', initGame);
            
            // تغيير مستوى الصعوبة
            levelSelect.addEventListener('change', () => {
                if (!isGameOver) {
                    const level = parseInt(levelSelect.value);
                    gameSpeed = levels[level].speed;
                    startIntervals(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=gghjgff/https-huggingface-co-spaces-enzostvs-deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>