Arabic alphabet learning adventure<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n \r\n .game-container {\r\n width: 900px;\r\n height: 600px;\r\n border: 4px solid #34495e;\r\n border-radius: 20px;\r\n background: linear-gradient(180deg, #87CEEB 0%, #98FB98 50%, #F0E68C 100%);\r\n position: relative;\r\n overflow: hidden;\r\n margin: 0 auto;\r\n box-shadow: 0 15px 35px rgba(0,0,0,0.2);\r\n }\r\n \r\n .game-header {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 80px;\r\n background: linear-gradient(135deg, #2c3e50, #34495e);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 0 25px;\r\n z-index: 100;\r\n box-shadow: 0 4px 15px rgba(0,0,0,0.3);\r\n }\r\n \r\n .game-stats {\r\n display: flex;\r\n gap: 30px;\r\n color: white;\r\n font-weight: bold;\r\n }\r\n \r\n .stat-item {\r\n background: rgba(255,255,255,0.15);\r\n padding: 8px 15px;\r\n border-radius: 25px;\r\n font-size: 16px;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n }\r\n \r\n .target-word-container {\r\n background: linear-gradient(135deg, #e74c3c, #c0392b);\r\n color: white;\r\n padding: 12px 20px;\r\n border-radius: 25px;\r\n font-size: 24px;\r\n font-weight: bold;\r\n text-align: center;\r\n box-shadow: 0 4px 15px rgba(231,76,60,0.4);\r\n border: 2px solid rgba(255,255,255,0.3);\r\n }\r\n \r\n .target-word {\r\n font-size: 28px;\r\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\r\n margin: 0 10px;\r\n letter-spacing: 3px;\r\n }\r\n \r\n .player {\r\n position: absolute;\r\n width: 50px;\r\n height: 50px;\r\n font-size: 45px;\r\n transition: all 0.1s ease;\r\n z-index: 15;\r\n text-shadow: 0 3px 6px rgba(0,0,0,0.4);\r\n filter: drop-shadow(0 0 8px rgba(255,255,255,0.6));\r\n }\r\n \r\n .enemy {\r\n position: absolute;\r\n width: 45px;\r\n height: 45px;\r\n font-size: 40px;\r\n z-index: 14;\r\n text-shadow: 0 3px 6px rgba(0,0,0,0.6);\r\n filter: drop-shadow(0 0 10px rgba(255,0,0,0.8));\r\n animation: enemyGlow 1.5s infinite alternate;\r\n }\r\n \r\n .letter {\r\n position: absolute;\r\n width: 60px;\r\n height: 60px;\r\n background: linear-gradient(135deg, #f39c12, #f1c40f);\r\n border: 3px solid #e67e22;\r\n border-radius: 15px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 32px;\r\n font-weight: bold;\r\n color: #2c3e50;\r\n text-shadow: 0 2px 4px rgba(255,255,255,0.8);\r\n animation: letterFloat 3s infinite ease-in-out;\r\n cursor: pointer;\r\n box-shadow: 0 6px 15px rgba(243,156,18,0.4);\r\n z-index: 12;\r\n }\r\n \r\n .letter.correct {\r\n background: linear-gradient(135deg, #27ae60, #2ecc71);\r\n border-color: #229954;\r\n animation: correctPulse 0.5s ease;\r\n box-shadow: 0 6px 20px rgba(39,174,96,0.6);\r\n }\r\n \r\n .platform {\r\n position: absolute;\r\n background: linear-gradient(135deg, #8b4513, #a0522d);\r\n border-radius: 8px;\r\n border: 2px solid #654321;\r\n box-shadow: 0 4px 10px rgba(0,0,0,0.3);\r\n z-index: 5;\r\n }\r\n \r\n .platform::after {\r\n content: '';\r\n position: absolute;\r\n top: -2px;\r\n left: 5px;\r\n right: 5px;\r\n height: 4px;\r\n background: linear-gradient(135deg, #d4b896, #c4a484);\r\n border-radius: 4px 4px 0 0;\r\n }\r\n \r\n .instructions {\r\n position: absolute;\r\n bottom: 15px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background: rgba(44, 62, 80, 0.95);\r\n color: white;\r\n padding: 12px 25px;\r\n border-radius: 25px;\r\n font-size: 16px;\r\n text-align: center;\r\n box-shadow: 0 4px 15px rgba(0,0,0,0.3);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n }\r\n \r\n .controls {\r\n position: absolute;\r\n bottom: 70px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n gap: 15px;\r\n z-index: 200;\r\n }\r\n \r\n .control-btn {\r\n width: 60px;\r\n height: 60px;\r\n background: rgba(52, 152, 219, 0.9);\r\n border: none;\r\n border-radius: 50%;\r\n color: white;\r\n font-size: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n cursor: pointer;\r\n box-shadow: 0 4px 10px rgba(0,0,0,0.3);\r\n backdrop-filter: blur(10px);\r\n border: 2px solid rgba(255,255,255,0.3);\r\n }\r\n \r\n .control-btn:active {\r\n transform: scale(0.95);\r\n background: rgba(41, 128, 185, 0.9);\r\n }\r\n \r\n .game-over, .level-complete {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n background: linear-gradient(135deg, #e74c3c, #c0392b);\r\n color: white;\r\n padding: 40px 50px;\r\n border-radius: 25px;\r\n text-align: center;\r\n font-size: 28px;\r\n font-weight: bold;\r\n box-shadow: 0 15px 40px rgba(0,0,0,0.5);\r\n z-index: 300;\r\n display: none;\r\n backdrop-filter: blur(15px);\r\n border: 3px solid rgba(255,255,255,0.3);\r\n }\r\n \r\n .level-complete {\r\n background: linear-gradient(135deg, #27ae60, #2ecc71);\r\n }\r\n \r\n .restart-btn, .continue-btn {\r\n background: linear-gradient(135deg, #3498db, #2980b9);\r\n color: white;\r\n border: none;\r\n padding: 15px 30px;\r\n border-radius: 25px;\r\n font-size: 18px;\r\n font-weight: bold;\r\n cursor: pointer;\r\n margin-top: 20px;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 15px rgba(52,152,219,0.4);\r\n }\r\n \r\n .restart-btn:hover, .continue-btn:hover {\r\n transform: scale(1.05);\r\n box-shadow: 0 6px 20px rgba(52,152,219,0.6);\r\n }\r\n \r\n .progress-container {\r\n position: absolute;\r\n top: 90px;\r\n left: 25px;\r\n right: 25px;\r\n height: 8px;\r\n background: rgba(255,255,255,0.3);\r\n border-radius: 4px;\r\n overflow: hidden;\r\n }\r\n \r\n .progress-bar {\r\n height: 100%;\r\n background: linear-gradient(135deg, #27ae60, #2ecc71);\r\n border-radius: 4px;\r\n width: 0%;\r\n transition: width 0.5s ease;\r\n }\r\n \r\n @keyframes letterFloat {\r\n 0%, 100% { transform: translateY(0px) rotate(0deg); }\r\n 25% { transform: translateY(-8px) rotate(1deg); }\r\n 75% { transform: translateY(8px) rotate(-1deg); }\r\n }\r\n \r\n @keyframes correctPulse {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(1.2); }\r\n 100% { transform: scale(1); }\r\n }\r\n \r\n @keyframes enemyGlow {\r\n 0% { filter: drop-shadow(0 0 10px rgba(255,0,0,0.8)) brightness(1); }\r\n 100% { filter: drop-shadow(0 0 20px rgba(255,0,0,1)) brightness(1.2); }\r\n }\r\n \r\n .hearts {\r\n color: #e74c3c;\r\n font-size: 20px;\r\n }\r\n \r\n .touch-controls {\r\n display: none;\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .game-container {\r\n width: 100%;\r\n height: 500px;\r\n }\r\n \r\n .instructions {\r\n display: none;\r\n }\r\n \r\n .touch-controls {\r\n display: flex;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"game-container\" id=\"gameContainer\">\r\n <div class=\"game-header\">\r\n <div class=\"game-stats\">\r\n <div class=\"stat-item\">Points: <span id=\"score\">0<\/span><\/div>\r\n <div class=\"stat-item\">Level: <span id=\"level\">1<\/span><\/div>\r\n <div class=\"stat-item hearts\">Lives: <span id=\"lives\">\u2764\ufe0f\u2764\ufe0f\u2764\ufe0f<\/span><\/div>\r\n <\/div>\r\n \r\n <div class=\"target-word-container\">\r\n Collect the word: <span class=\"target-word\" id=\"targetWord\">cat<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"progress-container\">\r\n <div class=\"progress-bar\" id=\"progressBar\"><\/div>\r\n <\/div>\r\n \r\n <div class=\"player\" id=\"player\">\ud83d\udc31<\/div>\r\n <div class=\"enemy\" id=\"enemy\">\ud83d\udc79<\/div>\r\n \r\n <div class=\"instructions\">\r\n Use arrows to move and jump \u2022 Combine letters to form words \u2022 Avoid the red monster!\r\n <\/div>\r\n \r\n <div class=\"controls touch-controls\">\r\n <button class=\"control-btn\" id=\"leftBtn\">\u2190<\/button>\r\n <button class=\"control-btn\" id=\"upBtn\">\u2191<\/button>\r\n <button class=\"control-btn\" id=\"rightBtn\">\u2192<\/button>\r\n <\/div>\r\n \r\n <div class=\"game-over\" id=\"gameOver\">\r\n <div>Game over!<\/div>\r\n <div style=\"font-size: 20px; margin: 15px 0;\">Final points: <span id=\"finalScore\">0<\/span><\/div>\r\n <button class=\"restart-btn\" onclick=\"restartGame()\">play again<\/button>\r\n <\/div>\r\n \r\n <div class=\"level-complete\" id=\"levelComplete\">\r\n <div>Well done! \ud83c\udf89<\/div>\r\n <div style=\"font-size: 20px; margin: 15px 0;\">Level completed!<\/div>\r\n <button class=\"continue-btn\" onclick=\"nextLevel()\">Next Level<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const gameContainer = document.getElementById('gameContainer');\r\n const player = document.getElementById('player');\r\n const enemy = document.getElementById('enemy');\r\n const scoreElement = document.getElementById('score');\r\n const levelElement = document.getElementById('level');\r\n const livesElement = document.getElementById('lives');\r\n const targetWordElement = document.getElementById('targetWord');\r\n const gameOverElement = document.getElementById('gameOver');\r\n const levelCompleteElement = document.getElementById('levelComplete');\r\n const finalScoreElement = document.getElementById('finalScore');\r\n const progressBar = document.getElementById('progressBar');\r\n const leftBtn = document.getElementById('leftBtn');\r\n const rightBtn = document.getElementById('rightBtn');\r\n const upBtn = document.getElementById('upBtn');\r\n\r\n let gameState = {\r\n score: 0,\r\n level: 1,\r\n lives: 3,\r\n playerX: 100,\r\n playerY: 450,\r\n velocityX: 0,\r\n velocityY: 0,\r\n isJumping: false,\r\n enemyX: 700,\r\n enemyY: 450,\r\n enemyVelocityX: 0,\r\n enemyVelocityY: 0,\r\n enemyOnGround: false,\r\n letters: [],\r\n platforms: [],\r\n currentWord: '',\r\n targetLetters: [],\r\n collectedLetters: [],\r\n gameRunning: true,\r\n keys: {},\r\n lastEnemyMove: 0\r\n };\r\n\r\n const arabicWords = [\r\n '\u0642\u0637\u0629', '\u0643\u0644\u0628', '\u0628\u064a\u062a', '\u0634\u0645\u0633', '\u0642\u0645\u0631', '\u0648\u0631\u062f', '\u0645\u0627\u0621', '\u0646\u0627\u0631', \r\n '\u0637\u064a\u0631', '\u0633\u0645\u0643', '\u0639\u064a\u0646', '\u064a\u062f', '\u0631\u0623\u0633', '\u0642\u0644\u0628', '\u0628\u0627\u0628', '\u0646\u0648\u0631'\r\n ];\r\n\r\n function initGame() {\r\n createPlatforms();\r\n selectNewWord();\r\n generateLetters();\r\n updateUI();\r\n gameLoop();\r\n \r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u062a\u062d\u0643\u0645 \u0644\u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u062a\u064a \u062a\u0639\u0645\u0644 \u0628\u0627\u0644\u0644\u0645\u0633\r\n if ('ontouchstart' in window) {\r\n document.querySelector('.touch-controls').style.display = 'flex';\r\n \r\n leftBtn.addEventListener('touchstart', () => gameState.keys['ArrowLeft'] = true);\r\n leftBtn.addEventListener('touchend', () => gameState.keys['ArrowLeft'] = false);\r\n \r\n rightBtn.addEventListener('touchstart', () => gameState.keys['ArrowRight'] = true);\r\n rightBtn.addEventListener('touchend', () => gameState.keys['ArrowRight'] = false);\r\n \r\n upBtn.addEventListener('touchstart', () => {\r\n if (!gameState.isJumping) {\r\n gameState.velocityY = -16;\r\n gameState.isJumping = true;\r\n }\r\n });\r\n }\r\n }\r\n\r\n function createPlatforms() {\r\n gameState.platforms = [\r\n { x: 0, y: 570, width: 900, height: 30 }, \/\/ \u0627\u0644\u0623\u0631\u0636\r\n { x: 150, y: 480, width: 130, height: 20 },\r\n { x: 400, y: 420, width: 130, height: 20 },\r\n { x: 650, y: 360, width: 130, height: 20 },\r\n { x: 200, y: 300, width: 120, height: 20 },\r\n { x: 500, y: 240, width: 120, height: 20 },\r\n { x: 50, y: 180, width: 100, height: 20 },\r\n { x: 350, y: 180, width: 100, height: 20 },\r\n { x: 700, y: 180, width: 100, height: 20 }\r\n ];\r\n\r\n gameState.platforms.forEach((platform, index) => {\r\n if (index === 0) return; \/\/ \u062a\u062e\u0637\u064a \u0645\u0646\u0635\u0629 \u0627\u0644\u0623\u0631\u0636\r\n const platformDiv = document.createElement('div');\r\n platformDiv.className = 'platform';\r\n platformDiv.style.left = platform.x + 'px';\r\n platformDiv.style.top = platform.y + 'px';\r\n platformDiv.style.width = platform.width + 'px';\r\n platformDiv.style.height = platform.height + 'px';\r\n gameContainer.appendChild(platformDiv);\r\n });\r\n }\r\n\r\n function selectNewWord() {\r\n gameState.currentWord = arabicWords[Math.floor(Math.random() * arabicWords.length)];\r\n gameState.targetLetters = Array.from(gameState.currentWord);\r\n gameState.collectedLetters = [];\r\n targetWordElement.textContent = gameState.currentWord;\r\n updateProgress();\r\n }\r\n\r\n function generateLetters() {\r\n clearLetters();\r\n \r\n \/\/ \u0625\u0646\u0634\u0627\u0621 \u062d\u0631\u0648\u0641 \u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641\u0629 \u0641\u0642\u0637\r\n gameState.targetLetters.forEach((letter, index) => {\r\n let x, y;\r\n do {\r\n x = Math.random() * 800 + 50;\r\n y = Math.random() * 350 + 120;\r\n } while (isOnPlatform(x, y, 80));\r\n \r\n createLetter(x, y, letter, true);\r\n });\r\n }\r\n\r\n function createLetter(x, y, letter, isTarget) {\r\n const letterDiv = document.createElement('div');\r\n letterDiv.className = 'letter';\r\n letterDiv.style.left = x + 'px';\r\n letterDiv.style.top = y + 'px';\r\n letterDiv.textContent = letter;\r\n letterDiv.isTarget = isTarget;\r\n letterDiv.letter = letter;\r\n letterDiv.style.animationDelay = Math.random() * 2 + 's';\r\n gameContainer.appendChild(letterDiv);\r\n gameState.letters.push({ element: letterDiv, x, y, letter, isTarget });\r\n }\r\n\r\n function clearLetters() {\r\n gameState.letters.forEach(l => l.element.remove());\r\n gameState.letters = [];\r\n }\r\n\r\n function isOnPlatform(x, y, buffer = 50) {\r\n return gameState.platforms.some(platform => \r\n x >= platform.x - buffer && x <= platform.x + platform.width + buffer &&\r\n y >= platform.y - buffer && y <= platform.y + platform.height + buffer\r\n );\r\n }\r\n\r\n function handleKeydown(e) {\r\n gameState.keys[e.code] = true;\r\n e.preventDefault();\r\n }\r\n\r\n function handleKeyup(e) {\r\n gameState.keys[e.code] = false;\r\n e.preventDefault();\r\n }\r\n\r\n function updatePlayer() {\r\n if (!gameState.gameRunning) return;\r\n\r\n \/\/ \u0627\u0644\u062d\u0631\u0643\u0629 \u0627\u0644\u0623\u0641\u0642\u064a\u0629\r\n if (gameState.keys['ArrowLeft']) {\r\n gameState.velocityX = Math.max(gameState.velocityX - 1.2, -7);\r\n } else if (gameState.keys['ArrowRight']) {\r\n gameState.velocityX = Math.min(gameState.velocityX + 1.2, 7);\r\n } else {\r\n gameState.velocityX *= 0.85; \/\/ \u0627\u0644\u0627\u062d\u062a\u0643\u0627\u0643\r\n }\r\n\r\n \/\/ \u0627\u0644\u0642\u0641\u0632\r\n if (gameState.keys['ArrowUp'] && !gameState.isJumping) {\r\n gameState.velocityY = -16;\r\n gameState.isJumping = true;\r\n }\r\n\r\n \/\/ \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629\r\n gameState.velocityY += 0.8;\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0645\u0648\u0636\u0639\r\n gameState.playerX += gameState.velocityX;\r\n gameState.playerY += gameState.velocityY;\r\n\r\n \/\/ \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u062d\u062f\u0648\u062f\r\n if (gameState.playerX < 0) gameState.playerX = 0;\r\n if (gameState.playerX > 850) gameState.playerX = 850;\r\n\r\n \/\/ \u062a\u0635\u0627\u062f\u0645 \u0645\u0639 \u0627\u0644\u0645\u0646\u0635\u0627\u062a\r\n gameState.platforms.forEach(platform => {\r\n if (gameState.playerX >= platform.x - 50 && \r\n gameState.playerX <= platform.x + platform.width &&\r\n gameState.playerY >= platform.y - 50 &&\r\n gameState.playerY <= platform.y + 25 &&\r\n gameState.velocityY >= 0) {\r\n \r\n gameState.playerY = platform.y - 50;\r\n gameState.velocityY = 0;\r\n gameState.isJumping = false;\r\n }\r\n });\r\n\r\n \/\/ \u0627\u0644\u0645\u0648\u062a \u0625\u0630\u0627 \u0633\u0642\u0637 \u062e\u0627\u0631\u062c \u0627\u0644\u0634\u0627\u0634\u0629\r\n if (gameState.playerY > 650) {\r\n loseLife();\r\n return;\r\n }\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0645\u0648\u0636\u0639 \u0627\u0644\u0644\u0627\u0639\u0628\r\n player.style.left = gameState.playerX + 'px';\r\n player.style.top = gameState.playerY + 'px';\r\n }\r\n\r\n function updateEnemy() {\r\n if (!gameState.gameRunning) return;\r\n\r\n const now = Date.now();\r\n if (now - gameState.lastEnemyMove > 100) { \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0648\u062d\u0634 \u0643\u0644 100 \u0645\u0644\u0644\u064a \u062b\u0627\u0646\u064a\u0629\r\n gameState.lastEnemyMove = now;\r\n\r\n \/\/ \u0630\u0643\u0627\u0621 \u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0628\u0633\u064a\u0637: \u0627\u0644\u062a\u062d\u0631\u0643 \u0646\u062d\u0648 \u0627\u0644\u0644\u0627\u0639\u0628\r\n const dx = gameState.playerX - gameState.enemyX;\r\n const speed = 2 + gameState.level * 0.3; \/\/ \u064a\u0635\u0628\u062d \u0627\u0644\u0648\u062d\u0634 \u0623\u0633\u0631\u0639 \u0645\u0639 \u062a\u0642\u062f\u0645 \u0627\u0644\u0645\u0633\u062a\u0648\u064a\u0627\u062a\r\n \r\n if (Math.abs(dx) > 60) { \/\/ \u0644\u0627 \u062a\u0642\u062a\u0631\u0628 \u0643\u062b\u064a\u0631\u064b\u0627\r\n if (dx > 0) {\r\n gameState.enemyVelocityX = Math.min(gameState.enemyVelocityX + 0.8, speed);\r\n } else {\r\n gameState.enemyVelocityX = Math.max(gameState.enemyVelocityX - 0.8, -speed);\r\n }\r\n } else {\r\n gameState.enemyVelocityX *= 0.9; \/\/ \u0627\u0644\u062a\u0628\u0627\u0637\u0624 \u0639\u0646\u062f \u0627\u0644\u0627\u0642\u062a\u0631\u0627\u0628\r\n }\r\n\r\n \/\/ \u0627\u0644\u0642\u0641\u0632 \u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0644\u0627\u0639\u0628 \u0623\u0639\u0644\u0649 \u0648\u0627\u0644\u0648\u062d\u0634 \u0639\u0644\u0649 \u0627\u0644\u0623\u0631\u0636\r\n if (gameState.playerY < gameState.enemyY - 100 && !gameState.enemyOnGround && Math.abs(dx) < 200) {\r\n gameState.enemyVelocityY = -14;\r\n }\r\n }\r\n\r\n \/\/ \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629 \u0639\u0644\u0649 \u0627\u0644\u0648\u062d\u0634\r\n gameState.enemyVelocityY += 0.8;\r\n gameState.enemyOnGround = false;\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0645\u0648\u0636\u0639 \u0627\u0644\u0648\u062d\u0634\r\n gameState.enemyX += gameState.enemyVelocityX;\r\n gameState.enemyY += gameState.enemyVelocityY;\r\n\r\n \/\/ \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u062d\u062f\u0648\u062f\r\n if (gameState.enemyX < 0) gameState.enemyX = 0;\r\n if (gameState.enemyX > 850) gameState.enemyX = 850;\r\n\r\n \/\/ \u062a\u0635\u0627\u062f\u0645 \u0627\u0644\u0648\u062d\u0634 \u0645\u0639 \u0627\u0644\u0645\u0646\u0635\u0627\u062a\r\n gameState.platforms.forEach(platform => {\r\n if (gameState.enemyX >= platform.x - 45 && \r\n gameState.enemyX <= platform.x + platform.width &&\r\n gameState.enemyY >= platform.y - 45 &&\r\n gameState.enemyY <= platform.y + 25 &&\r\n gameState.enemyVelocityY >= 0) {\r\n \r\n gameState.enemyY = platform.y - 45;\r\n gameState.enemyVelocityY = 0;\r\n gameState.enemyOnGround = true;\r\n }\r\n });\r\n\r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646 \u0627\u0644\u0648\u062d\u0634 \u0625\u0630\u0627 \u0633\u0642\u0637 \u062e\u0627\u0631\u062c \u0627\u0644\u0634\u0627\u0634\u0629\r\n if (gameState.enemyY > 650) {\r\n gameState.enemyX = 700;\r\n gameState.enemyY = 450;\r\n gameState.enemyVelocityX = 0;\r\n gameState.enemyVelocityY = 0;\r\n }\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0645\u0648\u0636\u0639 \u0627\u0644\u0648\u062d\u0634\r\n enemy.style.left = gameState.enemyX + 'px';\r\n enemy.style.top = gameState.enemyY + 'px';\r\n }\r\n\r\n function checkCollisions() {\r\n \/\/ \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u062a\u0635\u0627\u062f\u0645\u0627\u062a \u0627\u0644\u062d\u0631\u0648\u0641\r\n gameState.letters.forEach((letter, index) => {\r\n if (Math.abs(gameState.playerX - letter.x) < 45 && \r\n Math.abs(gameState.playerY - letter.y) < 45) {\r\n \r\n if (letter.isTarget && !gameState.collectedLetters.includes(letter.letter)) {\r\n \/\/ \u062c\u0645\u0639 \u0627\u0644\u062d\u0631\u0641 \u0627\u0644\u0635\u062d\u064a\u062d\r\n gameState.score += 20;\r\n gameState.collectedLetters.push(letter.letter);\r\n letter.element.classList.add('correct');\r\n \r\n setTimeout(() => {\r\n letter.element.remove();\r\n gameState.letters.splice(index, 1);\r\n }, 300);\r\n \r\n updateProgress();\r\n \r\n \/\/ \u0627\u0644\u062a\u062d\u0642\u0642 \u0625\u0630\u0627 \u0627\u0643\u062a\u0645\u0644\u062a \u0627\u0644\u0643\u0644\u0645\u0629\r\n if (gameState.collectedLetters.length === gameState.targetLetters.length) {\r\n levelCompleted();\r\n }\r\n }\r\n }\r\n });\r\n\r\n \/\/ \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u062a\u0635\u0627\u062f\u0645 \u0627\u0644\u0648\u062d\u0634\r\n if (Math.abs(gameState.playerX - gameState.enemyX) < 40 && \r\n Math.abs(gameState.playerY - gameState.enemyY) < 40) {\r\n loseLife();\r\n }\r\n }\r\n\r\n function updateProgress() {\r\n const progress = (gameState.collectedLetters.length \/ gameState.targetLetters.length) * 100;\r\n progressBar.style.width = progress + '%';\r\n }\r\n\r\n function levelCompleted() {\r\n gameState.gameRunning = false;\r\n gameState.score += 100 * gameState.level;\r\n updateUI();\r\n levelCompleteElement.style.display = 'block';\r\n }\r\n\r\n function nextLevel() {\r\n gameState.level++;\r\n gameState.gameRunning = true;\r\n levelCompleteElement.style.display = 'none';\r\n \r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646 \u0627\u0644\u0645\u0648\u0627\u0636\u0639\r\n gameState.playerX = 100;\r\n gameState.playerY = 450;\r\n gameState.enemyX = 700;\r\n gameState.enemyY = 450;\r\n gameState.velocityX = 0;\r\n gameState.velocityY = 0;\r\n gameState.enemyVelocityX = 0;\r\n gameState.enemyVelocityY = 0;\r\n \r\n \/\/ \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0635\u0639\u0648\u0628\u0629 \u0645\u0639 \u0643\u0644 \u0645\u0633\u062a\u0648\u0649\r\n if (gameState.level > 3) {\r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0646\u0635\u0627\u062a \u0645\u062a\u062d\u0631\u0643\u0629 \u0623\u0648 \u062a\u063a\u064a\u064a\u0631 \u0641\u064a \u0627\u0644\u0645\u0646\u0635\u0627\u062a\r\n if (gameState.level % 2 === 0 && gameState.platforms.length < 12) {\r\n const newPlatform = {\r\n x: Math.random() * 700 + 50,\r\n y: Math.random() * 300 + 150,\r\n width: 100,\r\n height: 20\r\n };\r\n gameState.platforms.push(newPlatform);\r\n \r\n const platformDiv = document.createElement('div');\r\n platformDiv.className = 'platform';\r\n platformDiv.style.left = newPlatform.x + 'px';\r\n platformDiv.style.top = newPlatform.y + 'px';\r\n platformDiv.style.width = newPlatform.width + 'px';\r\n platformDiv.style.height = newPlatform.height + 'px';\r\n gameContainer.appendChild(platformDiv);\r\n }\r\n }\r\n \r\n selectNewWord();\r\n generateLetters();\r\n updateUI();\r\n }\r\n\r\n function loseLife() {\r\n if (!gameState.gameRunning) return;\r\n \r\n gameState.lives--;\r\n updateUI();\r\n \r\n if (gameState.lives <= 0) {\r\n gameOver();\r\n } else {\r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646 \u0627\u0644\u0645\u0648\u0627\u0636\u0639\r\n gameState.playerX = 100;\r\n gameState.playerY = 450;\r\n gameState.enemyX = 700;\r\n gameState.enemyY = 450;\r\n gameState.velocityX = 0;\r\n gameState.velocityY = 0;\r\n gameState.enemyVelocityX = 0;\r\n gameState.enemyVelocityY = 0;\r\n gameState.isJumping = false;\r\n }\r\n }\r\n\r\n function gameOver() {\r\n gameState.gameRunning = false;\r\n finalScoreElement.textContent = gameState.score;\r\n gameOverElement.style.display = 'block';\r\n }\r\n\r\n function updateUI() {\r\n scoreElement.textContent = gameState.score;\r\n levelElement.textContent = gameState.level;\r\n livesElement.textContent = '\u2764\ufe0f'.repeat(Math.max(0, gameState.lives));\r\n }\r\n\r\n function gameLoop() {\r\n if (gameState.gameRunning) {\r\n updatePlayer();\r\n updateEnemy();\r\n checkCollisions();\r\n }\r\n requestAnimationFrame(gameLoop);\r\n }\r\n\r\n function restartGame() {\r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646 \u062d\u0627\u0644\u0629 \u0627\u0644\u0644\u0639\u0628\u0629\r\n gameState = {\r\n score: 0,\r\n level: 1,\r\n lives: 3,\r\n playerX: 100,\r\n playerY: 450,\r\n velocityX: 0,\r\n velocityY: 0,\r\n isJumping: false,\r\n enemyX: 700,\r\n enemyY: 450,\r\n enemyVelocityX: 0,\r\n enemyVelocityY: 0,\r\n enemyOnGround: false,\r\n letters: [],\r\n platforms: [],\r\n currentWord: '',\r\n targetLetters: [],\r\n collectedLetters: [],\r\n gameRunning: true,\r\n keys: {},\r\n lastEnemyMove: 0\r\n };\r\n\r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646 \u0648\u0627\u062c\u0647\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\r\n gameOverElement.style.display = 'none';\r\n levelCompleteElement.style.display = 'none';\r\n \r\n \/\/ \u0625\u0632\u0627\u0644\u0629 \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0642\u062f\u064a\u0645\u0629\r\n document.querySelectorAll('.platform').forEach(el => el.remove());\r\n \r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0644\u0639\u0628\u0629\r\n createPlatforms();\r\n selectNewWord();\r\n generateLetters();\r\n updateUI();\r\n }\r\n\r\n \/\/ \u0645\u0633\u062a\u0645\u0639\u064a \u0627\u0644\u0623\u062d\u062f\u0627\u062b\r\n document.addEventListener('keydown', handleKeydown);\r\n document.addEventListener('keyup', handleKeyup);\r\n\r\n \/\/ \u0645\u0646\u0639 \u0645\u0641\u0627\u062a\u064a\u062d \u0627\u0644\u0623\u0633\u0647\u0645 \u0645\u0646 \u0627\u0644\u062a\u0645\u0631\u064a\u0631 \u0641\u064a \u0627\u0644\u0635\u0641\u062d\u0629\r\n window.addEventListener('keydown', function(e) {\r\n if(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.code)) {\r\n e.preventDefault();\r\n }\r\n }, false);\r\n\r\n \/\/ \u0628\u062f\u0621 \u0627\u0644\u0644\u0639\u0628\u0629\r\n initGame();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0645\u063a\u0627\u0645\u0631\u0629 \u062a\u0639\u0644\u0645 \u0627\u0644\u062d\u0631\u0648\u0641 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0627\u0644\u0646\u0642\u0627\u0637: 0 \u0627\u0644\u0645\u0633\u062a\u0648\u0649: 1 \u0627\u0644\u062d\u064a\u0648\u0627\u062a: \u2764\ufe0f\u2764\ufe0f\u2764\ufe0f \u0627\u062c\u0645\u0639 \u0643\u0644\u0645\u0629: \u0642\u0637\u0629 \ud83d\udc31 \ud83d\udc79 \u0627\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0623\u0633\u0647\u0645 \u0644\u0644\u062d\u0631\u0643\u0629 \u0648\u0627\u0644\u0642\u0641\u0632 \u2022 \u0627\u062c\u0645\u0639 \u0627\u0644\u062d\u0631\u0648\u0641 \u0644\u062a\u0643\u0648\u064a\u0646 \u0627\u0644\u0643\u0644\u0645\u0629 \u2022 \u062a\u062c\u0646\u0628 \u0627\u0644\u0648\u062d\u0634 \u0627\u0644\u0623\u062d\u0645\u0631! \u2190 \u2191 \u2192 \u0627\u0646\u062a\u0647\u062a \u0627\u0644\u0644\u0639\u0628\u0629! \u0627\u0644\u0646\u0642\u0627\u0637 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629: 0 \u0627\u0644\u0639\u0628 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649 \u0623\u062d\u0633\u0646\u062a! \ud83c\udf89 \u0645\u0633\u062a\u0648\u0649 \u0645\u0643\u062a\u0645\u0644! \u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u062a\u0627\u0644\u064a<\/p>","protected":false},"author":389,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-15282","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/users\/389"}],"replies":[{"embeddable":true,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/comments?post=15282"}],"version-history":[{"count":4,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15282\/revisions"}],"predecessor-version":[{"id":15286,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15282\/revisions\/15286"}],"wp:attachment":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/media?parent=15282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Arabic alphabet learning adventure<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n \r\n .game-container {\r\n width: 900px;\r\n height: 600px;\r\n border: 4px solid #34495e;\r\n border-radius: 20px;\r\n background: linear-gradient(180deg, #87CEEB 0%, #98FB98 50%, #F0E68C 100%);\r\n position: relative;\r\n overflow: hidden;\r\n margin: 0 auto;\r\n box-shadow: 0 15px 35px rgba(0,0,0,0.2);\r\n }\r\n \r\n .game-header {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 80px;\r\n background: linear-gradient(135deg, #2c3e50, #34495e);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 0 25px;\r\n z-index: 100;\r\n box-shadow: 0 4px 15px rgba(0,0,0,0.3);\r\n }\r\n \r\n .game-stats {\r\n display: flex;\r\n gap: 30px;\r\n color: white;\r\n font-weight: bold;\r\n }\r\n \r\n .stat-item {\r\n background: rgba(255,255,255,0.15);\r\n padding: 8px 15px;\r\n border-radius: 25px;\r\n font-size: 16px;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n }\r\n \r\n .target-word-container {\r\n background: linear-gradient(135deg, #e74c3c, #c0392b);\r\n color: white;\r\n padding: 12px 20px;\r\n border-radius: 25px;\r\n font-size: 24px;\r\n font-weight: bold;\r\n text-align: center;\r\n box-shadow: 0 4px 15px rgba(231,76,60,0.4);\r\n border: 2px solid rgba(255,255,255,0.3);\r\n }\r\n \r\n .target-word {\r\n font-size: 28px;\r\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\r\n margin: 0 10px;\r\n letter-spacing: 3px;\r\n }\r\n \r\n .player {\r\n position: absolute;\r\n width: 50px;\r\n height: 50px;\r\n font-size: 45px;\r\n transition: all 0.1s ease;\r\n z-index: 15;\r\n text-shadow: 0 3px 6px rgba(0,0,0,0.4);\r\n filter: drop-shadow(0 0 8px rgba(255,255,255,0.6));\r\n }\r\n \r\n .enemy {\r\n position: absolute;\r\n width: 45px;\r\n height: 45px;\r\n font-size: 40px;\r\n z-index: 14;\r\n text-shadow: 0 3px 6px rgba(0,0,0,0.6);\r\n filter: drop-shadow(0 0 10px rgba(255,0,0,0.8));\r\n animation: enemyGlow 1.5s infinite alternate;\r\n }\r\n \r\n .letter {\r\n position: absolute;\r\n width: 60px;\r\n height: 60px;\r\n background: linear-gradient(135deg, #f39c12, #f1c40f);\r\n border: 3px solid #e67e22;\r\n border-radius: 15px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 32px;\r\n font-weight: bold;\r\n color: #2c3e50;\r\n text-shadow: 0 2px 4px rgba(255,255,255,0.8);\r\n animation: letterFloat 3s infinite ease-in-out;\r\n cursor: pointer;\r\n box-shadow: 0 6px 15px rgba(243,156,18,0.4);\r\n z-index: 12;\r\n }\r\n \r\n .letter.correct {\r\n background: linear-gradient(135deg, #27ae60, #2ecc71);\r\n border-color: #229954;\r\n animation: correctPulse 0.5s ease;\r\n box-shadow: 0 6px 20px rgba(39,174,96,0.6);\r\n }\r\n \r\n .platform {\r\n position: absolute;\r\n background: linear-gradient(135deg, #8b4513, #a0522d);\r\n border-radius: 8px;\r\n border: 2px solid #654321;\r\n box-shadow: 0 4px 10px rgba(0,0,0,0.3);\r\n z-index: 5;\r\n }\r\n \r\n .platform::after {\r\n content: '';\r\n position: absolute;\r\n top: -2px;\r\n left: 5px;\r\n right: 5px;\r\n height: 4px;\r\n background: linear-gradient(135deg, #d4b896, #c4a484);\r\n border-radius: 4px 4px 0 0;\r\n }\r\n \r\n .instructions {\r\n position: absolute;\r\n bottom: 15px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background: rgba(44, 62, 80, 0.95);\r\n color: white;\r\n padding: 12px 25px;\r\n border-radius: 25px;\r\n font-size: 16px;\r\n text-align: center;\r\n box-shadow: 0 4px 15px rgba(0,0,0,0.3);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n }\r\n \r\n .controls {\r\n position: absolute;\r\n bottom: 70px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n gap: 15px;\r\n z-index: 200;\r\n }\r\n \r\n .control-btn {\r\n width: 60px;\r\n height: 60px;\r\n background: rgba(52, 152, 219, 0.9);\r\n border: none;\r\n border-radius: 50%;\r\n color: white;\r\n font-size: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n cursor: pointer;\r\n box-shadow: 0 4px 10px rgba(0,0,0,0.3);\r\n backdrop-filter: blur(10px);\r\n border: 2px solid rgba(255,255,255,0.3);\r\n }\r\n \r\n .control-btn:active {\r\n transform: scale(0.95);\r\n background: rgba(41, 128, 185, 0.9);\r\n }\r\n \r\n .game-over, .level-complete {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n background: linear-gradient(135deg, #e74c3c, #c0392b);\r\n color: white;\r\n padding: 40px 50px;\r\n border-radius: 25px;\r\n text-align: center;\r\n font-size: 28px;\r\n font-weight: bold;\r\n box-shadow: 0 15px 40px rgba(0,0,0,0.5);\r\n z-index: 300;\r\n display: none;\r\n backdrop-filter: blur(15px);\r\n border: 3px solid rgba(255,255,255,0.3);\r\n }\r\n \r\n .level-complete {\r\n background: linear-gradient(135deg, #27ae60, #2ecc71);\r\n }\r\n \r\n .restart-btn, .continue-btn {\r\n background: linear-gradient(135deg, #3498db, #2980b9);\r\n color: white;\r\n border: none;\r\n padding: 15px 30px;\r\n border-radius: 25px;\r\n font-size: 18px;\r\n font-weight: bold;\r\n cursor: pointer;\r\n margin-top: 20px;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 15px rgba(52,152,219,0.4);\r\n }\r\n \r\n .restart-btn:hover, .continue-btn:hover {\r\n transform: scale(1.05);\r\n box-shadow: 0 6px 20px rgba(52,152,219,0.6);\r\n }\r\n \r\n .progress-container {\r\n position: absolute;\r\n top: 90px;\r\n left: 25px;\r\n right: 25px;\r\n height: 8px;\r\n background: rgba(255,255,255,0.3);\r\n border-radius: 4px;\r\n overflow: hidden;\r\n }\r\n \r\n .progress-bar {\r\n height: 100%;\r\n background: linear-gradient(135deg, #27ae60, #2ecc71);\r\n border-radius: 4px;\r\n width: 0%;\r\n transition: width 0.5s ease;\r\n }\r\n \r\n @keyframes letterFloat {\r\n 0%, 100% { transform: translateY(0px) rotate(0deg); }\r\n 25% { transform: translateY(-8px) rotate(1deg); }\r\n 75% { transform: translateY(8px) rotate(-1deg); }\r\n }\r\n \r\n @keyframes correctPulse {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(1.2); }\r\n 100% { transform: scale(1); }\r\n }\r\n \r\n @keyframes enemyGlow {\r\n 0% { filter: drop-shadow(0 0 10px rgba(255,0,0,0.8)) brightness(1); }\r\n 100% { filter: drop-shadow(0 0 20px rgba(255,0,0,1)) brightness(1.2); }\r\n }\r\n \r\n .hearts {\r\n color: #e74c3c;\r\n font-size: 20px;\r\n }\r\n \r\n .touch-controls {\r\n display: none;\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .game-container {\r\n width: 100%;\r\n height: 500px;\r\n }\r\n \r\n .instructions {\r\n display: none;\r\n }\r\n \r\n .touch-controls {\r\n display: flex;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"game-container\" id=\"gameContainer\">\r\n <div class=\"game-header\">\r\n <div class=\"game-stats\">\r\n <div class=\"stat-item\">Points: <span id=\"score\">0<\/span><\/div>\r\n <div class=\"stat-item\">Level: <span id=\"level\">1<\/span><\/div>\r\n <div class=\"stat-item hearts\">Lives: <span id=\"lives\">\u2764\ufe0f\u2764\ufe0f\u2764\ufe0f<\/span><\/div>\r\n <\/div>\r\n \r\n <div class=\"target-word-container\">\r\n Collect the word: <span class=\"target-word\" id=\"targetWord\">cat<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"progress-container\">\r\n <div class=\"progress-bar\" id=\"progressBar\"><\/div>\r\n <\/div>\r\n \r\n <div class=\"player\" id=\"player\">\ud83d\udc31<\/div>\r\n <div class=\"enemy\" id=\"enemy\">\ud83d\udc79<\/div>\r\n \r\n <div class=\"instructions\">\r\n Use arrows to move and jump \u2022 Combine letters to form words \u2022 Avoid the red monster!\r\n <\/div>\r\n \r\n <div class=\"controls touch-controls\">\r\n <button class=\"control-btn\" id=\"leftBtn\">\u2190<\/button>\r\n <button class=\"control-btn\" id=\"upBtn\">\u2191<\/button>\r\n <button class=\"control-btn\" id=\"rightBtn\">\u2192<\/button>\r\n <\/div>\r\n \r\n <div class=\"game-over\" id=\"gameOver\">\r\n <div>Game over!<\/div>\r\n <div style=\"font-size: 20px; margin: 15px 0;\">Final points: <span id=\"finalScore\">0<\/span><\/div>\r\n <button class=\"restart-btn\" onclick=\"restartGame()\">play again<\/button>\r\n <\/div>\r\n \r\n <div class=\"level-complete\" id=\"levelComplete\">\r\n <div>Well done! \ud83c\udf89<\/div>\r\n <div style=\"font-size: 20px; margin: 15px 0;\">Level completed!<\/div>\r\n <button class=\"continue-btn\" onclick=\"nextLevel()\">Next Level<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const gameContainer = document.getElementById('gameContainer');\r\n const player = document.getElementById('player');\r\n const enemy = document.getElementById('enemy');\r\n const scoreElement = document.getElementById('score');\r\n const levelElement = document.getElementById('level');\r\n const livesElement = document.getElementById('lives');\r\n const targetWordElement = document.getElementById('targetWord');\r\n const gameOverElement = document.getElementById('gameOver');\r\n const levelCompleteElement = document.getElementById('levelComplete');\r\n const finalScoreElement = document.getElementById('finalScore');\r\n const progressBar = document.getElementById('progressBar');\r\n const leftBtn = document.getElementById('leftBtn');\r\n const rightBtn = document.getElementById('rightBtn');\r\n const upBtn = document.getElementById('upBtn');\r\n\r\n let gameState = {\r\n score: 0,\r\n level: 1,\r\n lives: 3,\r\n playerX: 100,\r\n playerY: 450,\r\n velocityX: 0,\r\n velocityY: 0,\r\n isJumping: false,\r\n enemyX: 700,\r\n enemyY: 450,\r\n enemyVelocityX: 0,\r\n enemyVelocityY: 0,\r\n enemyOnGround: false,\r\n letters: [],\r\n platforms: [],\r\n currentWord: '',\r\n targetLetters: [],\r\n collectedLetters: [],\r\n gameRunning: true,\r\n keys: {},\r\n lastEnemyMove: 0\r\n };\r\n\r\n const arabicWords = [\r\n '\u0642\u0637\u0629', '\u0643\u0644\u0628', '\u0628\u064a\u062a', '\u0634\u0645\u0633', '\u0642\u0645\u0631', '\u0648\u0631\u062f', '\u0645\u0627\u0621', '\u0646\u0627\u0631', \r\n '\u0637\u064a\u0631', '\u0633\u0645\u0643', '\u0639\u064a\u0646', '\u064a\u062f', '\u0631\u0623\u0633', '\u0642\u0644\u0628', '\u0628\u0627\u0628', '\u0646\u0648\u0631'\r\n ];\r\n\r\n function initGame() {\r\n createPlatforms();\r\n selectNewWord();\r\n generateLetters();\r\n updateUI();\r\n gameLoop();\r\n \r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u062a\u062d\u0643\u0645 \u0644\u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u062a\u064a \u062a\u0639\u0645\u0644 \u0628\u0627\u0644\u0644\u0645\u0633\r\n if ('ontouchstart' in window) {\r\n document.querySelector('.touch-controls').style.display = 'flex';\r\n \r\n leftBtn.addEventListener('touchstart', () => gameState.keys['ArrowLeft'] = true);\r\n leftBtn.addEventListener('touchend', () => gameState.keys['ArrowLeft'] = false);\r\n \r\n rightBtn.addEventListener('touchstart', () => gameState.keys['ArrowRight'] = true);\r\n rightBtn.addEventListener('touchend', () => gameState.keys['ArrowRight'] = false);\r\n \r\n upBtn.addEventListener('touchstart', () => {\r\n if (!gameState.isJumping) {\r\n gameState.velocityY = -16;\r\n gameState.isJumping = true;\r\n }\r\n });\r\n }\r\n }\r\n\r\n function createPlatforms() {\r\n gameState.platforms = [\r\n { x: 0, y: 570, width: 900, height: 30 }, \/\/ \u0627\u0644\u0623\u0631\u0636\r\n { x: 150, y: 480, width: 130, height: 20 },\r\n { x: 400, y: 420, width: 130, height: 20 },\r\n { x: 650, y: 360, width: 130, height: 20 },\r\n { x: 200, y: 300, width: 120, height: 20 },\r\n { x: 500, y: 240, width: 120, height: 20 },\r\n { x: 50, y: 180, width: 100, height: 20 },\r\n { x: 350, y: 180, width: 100, height: 20 },\r\n { x: 700, y: 180, width: 100, height: 20 }\r\n ];\r\n\r\n gameState.platforms.forEach((platform, index) => {\r\n if (index === 0) return; \/\/ \u062a\u062e\u0637\u064a \u0645\u0646\u0635\u0629 \u0627\u0644\u0623\u0631\u0636\r\n const platformDiv = document.createElement('div');\r\n platformDiv.className = 'platform';\r\n platformDiv.style.left = platform.x + 'px';\r\n platformDiv.style.top = platform.y + 'px';\r\n platformDiv.style.width = platform.width + 'px';\r\n platformDiv.style.height = platform.height + 'px';\r\n gameContainer.appendChild(platformDiv);\r\n });\r\n }\r\n\r\n function selectNewWord() {\r\n gameState.currentWord = arabicWords[Math.floor(Math.random() * arabicWords.length)];\r\n gameState.targetLetters = Array.from(gameState.currentWord);\r\n gameState.collectedLetters = [];\r\n targetWordElement.textContent = gameState.currentWord;\r\n updateProgress();\r\n }\r\n\r\n function generateLetters() {\r\n clearLetters();\r\n \r\n \/\/ \u0625\u0646\u0634\u0627\u0621 \u062d\u0631\u0648\u0641 \u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641\u0629 \u0641\u0642\u0637\r\n gameState.targetLetters.forEach((letter, index) => {\r\n let x, y;\r\n do {\r\n x = Math.random() * 800 + 50;\r\n y = Math.random() * 350 + 120;\r\n } while (isOnPlatform(x, y, 80));\r\n \r\n createLetter(x, y, letter, true);\r\n });\r\n }\r\n\r\n function createLetter(x, y, letter, isTarget) {\r\n const letterDiv = document.createElement('div');\r\n letterDiv.className = 'letter';\r\n letterDiv.style.left = x + 'px';\r\n letterDiv.style.top = y + 'px';\r\n letterDiv.textContent = letter;\r\n letterDiv.isTarget = isTarget;\r\n letterDiv.letter = letter;\r\n letterDiv.style.animationDelay = Math.random() * 2 + 's';\r\n gameContainer.appendChild(letterDiv);\r\n gameState.letters.push({ element: letterDiv, x, y, letter, isTarget });\r\n }\r\n\r\n function clearLetters() {\r\n gameState.letters.forEach(l => l.element.remove());\r\n gameState.letters = [];\r\n }\r\n\r\n function isOnPlatform(x, y, buffer = 50) {\r\n return gameState.platforms.some(platform => \r\n x >= platform.x - buffer && x <= platform.x + platform.width + buffer &&\r\n y >= platform.y - buffer && y <= platform.y + platform.height + buffer\r\n );\r\n }\r\n\r\n function handleKeydown(e) {\r\n gameState.keys[e.code] = true;\r\n e.preventDefault();\r\n }\r\n\r\n function handleKeyup(e) {\r\n gameState.keys[e.code] = false;\r\n e.preventDefault();\r\n }\r\n\r\n function updatePlayer() {\r\n if (!gameState.gameRunning) return;\r\n\r\n \/\/ \u0627\u0644\u062d\u0631\u0643\u0629 \u0627\u0644\u0623\u0641\u0642\u064a\u0629\r\n if (gameState.keys['ArrowLeft']) {\r\n gameState.velocityX = Math.max(gameState.velocityX - 1.2, -7);\r\n } else if (gameState.keys['ArrowRight']) {\r\n gameState.velocityX = Math.min(gameState.velocityX + 1.2, 7);\r\n } else {\r\n gameState.velocityX *= 0.85; \/\/ \u0627\u0644\u0627\u062d\u062a\u0643\u0627\u0643\r\n }\r\n\r\n \/\/ \u0627\u0644\u0642\u0641\u0632\r\n if (gameState.keys['ArrowUp'] && !gameState.isJumping) {\r\n gameState.velocityY = -16;\r\n gameState.isJumping = true;\r\n }\r\n\r\n \/\/ \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629\r\n gameState.velocityY += 0.8;\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0645\u0648\u0636\u0639\r\n gameState.playerX += gameState.velocityX;\r\n gameState.playerY += gameState.velocityY;\r\n\r\n \/\/ \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u062d\u062f\u0648\u062f\r\n if (gameState.playerX < 0) gameState.playerX = 0;\r\n if (gameState.playerX > 850) gameState.playerX = 850;\r\n\r\n \/\/ \u062a\u0635\u0627\u062f\u0645 \u0645\u0639 \u0627\u0644\u0645\u0646\u0635\u0627\u062a\r\n gameState.platforms.forEach(platform => {\r\n if (gameState.playerX >= platform.x - 50 && \r\n gameState.playerX <= platform.x + platform.width &&\r\n gameState.playerY >= platform.y - 50 &&\r\n gameState.playerY <= platform.y + 25 &&\r\n gameState.velocityY >= 0) {\r\n \r\n gameState.playerY = platform.y - 50;\r\n gameState.velocityY = 0;\r\n gameState.isJumping = false;\r\n }\r\n });\r\n\r\n \/\/ \u0627\u0644\u0645\u0648\u062a \u0625\u0630\u0627 \u0633\u0642\u0637 \u062e\u0627\u0631\u062c \u0627\u0644\u0634\u0627\u0634\u0629\r\n if (gameState.playerY > 650) {\r\n loseLife();\r\n return;\r\n }\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0645\u0648\u0636\u0639 \u0627\u0644\u0644\u0627\u0639\u0628\r\n player.style.left = gameState.playerX + 'px';\r\n player.style.top = gameState.playerY + 'px';\r\n }\r\n\r\n function updateEnemy() {\r\n if (!gameState.gameRunning) return;\r\n\r\n const now = Date.now();\r\n if (now - gameState.lastEnemyMove > 100) { \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0648\u062d\u0634 \u0643\u0644 100 \u0645\u0644\u0644\u064a \u062b\u0627\u0646\u064a\u0629\r\n gameState.lastEnemyMove = now;\r\n\r\n \/\/ \u0630\u0643\u0627\u0621 \u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0628\u0633\u064a\u0637: \u0627\u0644\u062a\u062d\u0631\u0643 \u0646\u062d\u0648 \u0627\u0644\u0644\u0627\u0639\u0628\r\n const dx = gameState.playerX - gameState.enemyX;\r\n const speed = 2 + gameState.level * 0.3; \/\/ \u064a\u0635\u0628\u062d \u0627\u0644\u0648\u062d\u0634 \u0623\u0633\u0631\u0639 \u0645\u0639 \u062a\u0642\u062f\u0645 \u0627\u0644\u0645\u0633\u062a\u0648\u064a\u0627\u062a\r\n \r\n if (Math.abs(dx) > 60) { \/\/ \u0644\u0627 \u062a\u0642\u062a\u0631\u0628 \u0643\u062b\u064a\u0631\u064b\u0627\r\n if (dx > 0) {\r\n gameState.enemyVelocityX = Math.min(gameState.enemyVelocityX + 0.8, speed);\r\n } else {\r\n gameState.enemyVelocityX = Math.max(gameState.enemyVelocityX - 0.8, -speed);\r\n }\r\n } else {\r\n gameState.enemyVelocityX *= 0.9; \/\/ \u0627\u0644\u062a\u0628\u0627\u0637\u0624 \u0639\u0646\u062f \u0627\u0644\u0627\u0642\u062a\u0631\u0627\u0628\r\n }\r\n\r\n \/\/ \u0627\u0644\u0642\u0641\u0632 \u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0644\u0627\u0639\u0628 \u0623\u0639\u0644\u0649 \u0648\u0627\u0644\u0648\u062d\u0634 \u0639\u0644\u0649 \u0627\u0644\u0623\u0631\u0636\r\n if (gameState.playerY < gameState.enemyY - 100 && !gameState.enemyOnGround && Math.abs(dx) < 200) {\r\n gameState.enemyVelocityY = -14;\r\n }\r\n }\r\n\r\n \/\/ \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629 \u0639\u0644\u0649 \u0627\u0644\u0648\u062d\u0634\r\n gameState.enemyVelocityY += 0.8;\r\n gameState.enemyOnGround = false;\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0645\u0648\u0636\u0639 \u0627\u0644\u0648\u062d\u0634\r\n gameState.enemyX += gameState.enemyVelocityX;\r\n gameState.enemyY += gameState.enemyVelocityY;\r\n\r\n \/\/ \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u062d\u062f\u0648\u062f\r\n if (gameState.enemyX < 0) gameState.enemyX = 0;\r\n if (gameState.enemyX > 850) gameState.enemyX = 850;\r\n\r\n \/\/ \u062a\u0635\u0627\u062f\u0645 \u0627\u0644\u0648\u062d\u0634 \u0645\u0639 \u0627\u0644\u0645\u0646\u0635\u0627\u062a\r\n gameState.platforms.forEach(platform => {\r\n if (gameState.enemyX >= platform.x - 45 && \r\n gameState.enemyX <= platform.x + platform.width &&\r\n gameState.enemyY >= platform.y - 45 &&\r\n gameState.enemyY <= platform.y + 25 &&\r\n gameState.enemyVelocityY >= 0) {\r\n \r\n gameState.enemyY = platform.y - 45;\r\n gameState.enemyVelocityY = 0;\r\n gameState.enemyOnGround = true;\r\n }\r\n });\r\n\r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646 \u0627\u0644\u0648\u062d\u0634 \u0625\u0630\u0627 \u0633\u0642\u0637 \u062e\u0627\u0631\u062c \u0627\u0644\u0634\u0627\u0634\u0629\r\n if (gameState.enemyY > 650) {\r\n gameState.enemyX = 700;\r\n gameState.enemyY = 450;\r\n gameState.enemyVelocityX = 0;\r\n gameState.enemyVelocityY = 0;\r\n }\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0645\u0648\u0636\u0639 \u0627\u0644\u0648\u062d\u0634\r\n enemy.style.left = gameState.enemyX + 'px';\r\n enemy.style.top = gameState.enemyY + 'px';\r\n }\r\n\r\n function checkCollisions() {\r\n \/\/ \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u062a\u0635\u0627\u062f\u0645\u0627\u062a \u0627\u0644\u062d\u0631\u0648\u0641\r\n gameState.letters.forEach((letter, index) => {\r\n if (Math.abs(gameState.playerX - letter.x) < 45 && \r\n Math.abs(gameState.playerY - letter.y) < 45) {\r\n \r\n if (letter.isTarget && !gameState.collectedLetters.includes(letter.letter)) {\r\n \/\/ \u062c\u0645\u0639 \u0627\u0644\u062d\u0631\u0641 \u0627\u0644\u0635\u062d\u064a\u062d\r\n gameState.score += 20;\r\n gameState.collectedLetters.push(letter.letter);\r\n letter.element.classList.add('correct');\r\n \r\n setTimeout(() => {\r\n letter.element.remove();\r\n gameState.letters.splice(index, 1);\r\n }, 300);\r\n \r\n updateProgress();\r\n \r\n \/\/ \u0627\u0644\u062a\u062d\u0642\u0642 \u0625\u0630\u0627 \u0627\u0643\u062a\u0645\u0644\u062a \u0627\u0644\u0643\u0644\u0645\u0629\r\n if (gameState.collectedLetters.length === gameState.targetLetters.length) {\r\n levelCompleted();\r\n }\r\n }\r\n }\r\n });\r\n\r\n \/\/ \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u062a\u0635\u0627\u062f\u0645 \u0627\u0644\u0648\u062d\u0634\r\n if (Math.abs(gameState.playerX - gameState.enemyX) < 40 && \r\n Math.abs(gameState.playerY - gameState.enemyY) < 40) {\r\n loseLife();\r\n }\r\n }\r\n\r\n function updateProgress() {\r\n const progress = (gameState.collectedLetters.length \/ gameState.targetLetters.length) * 100;\r\n progressBar.style.width = progress + '%';\r\n }\r\n\r\n function levelCompleted() {\r\n gameState.gameRunning = false;\r\n gameState.score += 100 * gameState.level;\r\n updateUI();\r\n levelCompleteElement.style.display = 'block';\r\n }\r\n\r\n function nextLevel() {\r\n gameState.level++;\r\n gameState.gameRunning = true;\r\n levelCompleteElement.style.display = 'none';\r\n \r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646 \u0627\u0644\u0645\u0648\u0627\u0636\u0639\r\n gameState.playerX = 100;\r\n gameState.playerY = 450;\r\n gameState.enemyX = 700;\r\n gameState.enemyY = 450;\r\n gameState.velocityX = 0;\r\n gameState.velocityY = 0;\r\n gameState.enemyVelocityX = 0;\r\n gameState.enemyVelocityY = 0;\r\n \r\n \/\/ \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0635\u0639\u0648\u0628\u0629 \u0645\u0639 \u0643\u0644 \u0645\u0633\u062a\u0648\u0649\r\n if (gameState.level > 3) {\r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0646\u0635\u0627\u062a \u0645\u062a\u062d\u0631\u0643\u0629 \u0623\u0648 \u062a\u063a\u064a\u064a\u0631 \u0641\u064a \u0627\u0644\u0645\u0646\u0635\u0627\u062a\r\n if (gameState.level % 2 === 0 && gameState.platforms.length < 12) {\r\n const newPlatform = {\r\n x: Math.random() * 700 + 50,\r\n y: Math.random() * 300 + 150,\r\n width: 100,\r\n height: 20\r\n };\r\n gameState.platforms.push(newPlatform);\r\n \r\n const platformDiv = document.createElement('div');\r\n platformDiv.className = 'platform';\r\n platformDiv.style.left = newPlatform.x + 'px';\r\n platformDiv.style.top = newPlatform.y + 'px';\r\n platformDiv.style.width = newPlatform.width + 'px';\r\n platformDiv.style.height = newPlatform.height + 'px';\r\n gameContainer.appendChild(platformDiv);\r\n }\r\n }\r\n \r\n selectNewWord();\r\n generateLetters();\r\n updateUI();\r\n }\r\n\r\n function loseLife() {\r\n if (!gameState.gameRunning) return;\r\n \r\n gameState.lives--;\r\n updateUI();\r\n \r\n if (gameState.lives <= 0) {\r\n gameOver();\r\n } else {\r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646 \u0627\u0644\u0645\u0648\u0627\u0636\u0639\r\n gameState.playerX = 100;\r\n gameState.playerY = 450;\r\n gameState.enemyX = 700;\r\n gameState.enemyY = 450;\r\n gameState.velocityX = 0;\r\n gameState.velocityY = 0;\r\n gameState.enemyVelocityX = 0;\r\n gameState.enemyVelocityY = 0;\r\n gameState.isJumping = false;\r\n }\r\n }\r\n\r\n function gameOver() {\r\n gameState.gameRunning = false;\r\n finalScoreElement.textContent = gameState.score;\r\n gameOverElement.style.display = 'block';\r\n }\r\n\r\n function updateUI() {\r\n scoreElement.textContent = gameState.score;\r\n levelElement.textContent = gameState.level;\r\n livesElement.textContent = '\u2764\ufe0f'.repeat(Math.max(0, gameState.lives));\r\n }\r\n\r\n function gameLoop() {\r\n if (gameState.gameRunning) {\r\n updatePlayer();\r\n updateEnemy();\r\n checkCollisions();\r\n }\r\n requestAnimationFrame(gameLoop);\r\n }\r\n\r\n function restartGame() {\r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646 \u062d\u0627\u0644\u0629 \u0627\u0644\u0644\u0639\u0628\u0629\r\n gameState = {\r\n score: 0,\r\n level: 1,\r\n lives: 3,\r\n playerX: 100,\r\n playerY: 450,\r\n velocityX: 0,\r\n velocityY: 0,\r\n isJumping: false,\r\n enemyX: 700,\r\n enemyY: 450,\r\n enemyVelocityX: 0,\r\n enemyVelocityY: 0,\r\n enemyOnGround: false,\r\n letters: [],\r\n platforms: [],\r\n currentWord: '',\r\n targetLetters: [],\r\n collectedLetters: [],\r\n gameRunning: true,\r\n keys: {},\r\n lastEnemyMove: 0\r\n };\r\n\r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646 \u0648\u0627\u062c\u0647\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\r\n gameOverElement.style.display = 'none';\r\n levelCompleteElement.style.display = 'none';\r\n \r\n \/\/ \u0625\u0632\u0627\u0644\u0629 \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0642\u062f\u064a\u0645\u0629\r\n document.querySelectorAll('.platform').forEach(el => el.remove());\r\n \r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0644\u0639\u0628\u0629\r\n createPlatforms();\r\n selectNewWord();\r\n generateLetters();\r\n updateUI();\r\n }\r\n\r\n \/\/ \u0645\u0633\u062a\u0645\u0639\u064a \u0627\u0644\u0623\u062d\u062f\u0627\u062b\r\n document.addEventListener('keydown', handleKeydown);\r\n document.addEventListener('keyup', handleKeyup);\r\n\r\n \/\/ \u0645\u0646\u0639 \u0645\u0641\u0627\u062a\u064a\u062d \u0627\u0644\u0623\u0633\u0647\u0645 \u0645\u0646 \u0627\u0644\u062a\u0645\u0631\u064a\u0631 \u0641\u064a \u0627\u0644\u0635\u0641\u062d\u0629\r\n window.addEventListener('keydown', function(e) {\r\n if(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.code)) {\r\n e.preventDefault();\r\n }\r\n }, false);\r\n\r\n \/\/ \u0628\u062f\u0621 \u0627\u0644\u0644\u0639\u0628\u0629\r\n initGame();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0645\u063a\u0627\u0645\u0631\u0629 \u062a\u0639\u0644\u0645 \u0627\u0644\u062d\u0631\u0648\u0641 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0627\u0644\u0646\u0642\u0627\u0637: 0 \u0627\u0644\u0645\u0633\u062a\u0648\u0649: 1 \u0627\u0644\u062d\u064a\u0648\u0627\u062a: \u2764\ufe0f\u2764\ufe0f\u2764\ufe0f \u0627\u062c\u0645\u0639 \u0643\u0644\u0645\u0629: \u0642\u0637\u0629 \ud83d\udc31 \ud83d\udc79 \u0627\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0623\u0633\u0647\u0645 \u0644\u0644\u062d\u0631\u0643\u0629 \u0648\u0627\u0644\u0642\u0641\u0632 \u2022 \u0627\u062c\u0645\u0639 \u0627\u0644\u062d\u0631\u0648\u0641 \u0644\u062a\u0643\u0648\u064a\u0646 \u0627\u0644\u0643\u0644\u0645\u0629 \u2022 \u062a\u062c\u0646\u0628 \u0627\u0644\u0648\u062d\u0634 \u0627\u0644\u0623\u062d\u0645\u0631! \u2190 \u2191 \u2192 \u0627\u0646\u062a\u0647\u062a \u0627\u0644\u0644\u0639\u0628\u0629! \u0627\u0644\u0646\u0642\u0627\u0637 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629: 0 \u0627\u0644\u0639\u0628 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649 \u0623\u062d\u0633\u0646\u062a! \ud83c\udf89 \u0645\u0633\u062a\u0648\u0649 \u0645\u0643\u062a\u0645\u0644! \u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u062a\u0627\u0644\u064a<\/p>","protected":false},"author":389,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-15282","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/users\/389"}],"replies":[{"embeddable":true,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/comments?post=15282"}],"version-history":[{"count":4,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15282\/revisions"}],"predecessor-version":[{"id":15286,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15282\/revisions\/15286"}],"wp:attachment":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/media?parent=15282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}