| <!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> |
