{"id":15274,"date":"2025-09-03T23:05:49","date_gmt":"2025-09-03T21:05:49","guid":{"rendered":"https:\/\/ejaada.com\/?page_id=15274"},"modified":"2025-09-03T23:10:09","modified_gmt":"2025-09-03T21:10:09","slug":"%d9%84%d8%b9%d8%a8%d8%a9-%d8%a7%d9%84%d8%b1%d9%88%d8%a8%d9%88%d8%aa-%d8%b5%d9%8a%d8%a7%d8%af-%d8%a7%d9%84%d8%ad%d8%b1%d9%88%d9%81","status":"publish","type":"page","link":"https:\/\/ejaada.com\/en\/%d9%84%d8%b9%d8%a8%d8%a9-%d8%a7%d9%84%d8%b1%d9%88%d8%a8%d9%88%d8%aa-%d8%b5%d9%8a%d8%a7%d8%af-%d8%a7%d9%84%d8%ad%d8%b1%d9%88%d9%81\/","title":{"rendered":"Robot letter hunter game"},"content":{"rendered":"
\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 Adventure - Enhanced<\/title>\r\n <style>\r\n \/* Widget container styling - completely isolated *\/\r\n #arabic-adventure-widget {\r\n all: initial;\r\n display: block;\r\n width: 900px;\r\n height: 600px;\r\n position: relative;\r\n overflow: hidden;\r\n border: 4px solid #1e3a8a;\r\n border-radius: 20px;\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\r\n font-family: 'Arial', 'Tahoma', sans-serif;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n user-select: none;\r\n box-sizing: border-box;\r\n isolation: isolate;\r\n z-index: 9999;\r\n margin-right: 250px \r\n }\r\n \r\n #arabic-adventure-widget * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n font-family: inherit;\r\n }\r\n \r\n \/* Animated background *\/\r\n #game-background {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n overflow: hidden;\r\n z-index: 1;\r\n }\r\n \r\n .floating-star {\r\n position: absolute;\r\n color: rgba(255, 255, 255, 0.6);\r\n font-size: 20px;\r\n animation: float 6s ease-in-out infinite;\r\n z-index: 2;\r\n }\r\n \r\n @keyframes float {\r\n 0%, 100% { transform: translateY(0px) rotate(0deg); }\r\n 50% { transform: translateY(-20px) rotate(180deg); }\r\n }\r\n \r\n \/* Game elements *\/\r\n #game-container {\r\n width: 100%;\r\n height: 100%;\r\n position: relative;\r\n z-index: 3;\r\n }\r\n \r\n #game-canvas {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 4;\r\n }\r\n \r\n \/* Enhanced UI *\/\r\n #game-ui {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 10;\r\n pointer-events: none;\r\n }\r\n \r\n .ui-panel {\r\n position: absolute;\r\n background: rgba(255, 255, 255, 0.95);\r\n border-radius: 15px;\r\n padding: 12px 20px;\r\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);\r\n border: 2px solid rgba(255, 215, 0, 0.8);\r\n backdrop-filter: blur(10px);\r\n }\r\n \r\n #score-panel {\r\n top: 20px;\r\n left: 20px;\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n }\r\n \r\n #level-panel {\r\n top: 20px;\r\n right: 20px;\r\n text-align: center;\r\n }\r\n \r\n #progress-panel {\r\n bottom: 20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n min-width: 300px;\r\n text-align: center;\r\n }\r\n \r\n .stat-label {\r\n font-size: 14px;\r\n color: #1e3a8a;\r\n font-weight: bold;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .stat-value {\r\n font-size: 24px;\r\n color: #dc2626;\r\n font-weight: bold;\r\n }\r\n \r\n \/* Progress bar *\/\r\n #progress-bar {\r\n width: 100%;\r\n height: 8px;\r\n background: rgba(255, 255, 255, 0.3);\r\n border-radius: 4px;\r\n overflow: hidden;\r\n margin: 8px 0;\r\n }\r\n \r\n #progress-fill {\r\n height: 100%;\r\n background: linear-gradient(90deg, #ffd700, #ff6b35);\r\n border-radius: 4px;\r\n transition: width 0.3s ease;\r\n width: 0%;\r\n }\r\n \r\n \/* Timer *\/\r\n #timer-display {\r\n font-size: 18px;\r\n color: #dc2626;\r\n font-weight: bold;\r\n margin-top: 5px;\r\n }\r\n \r\n \/* Word display *\/\r\n #current-word {\r\n font-size: 28px;\r\n color: #1e3a8a;\r\n font-weight: bold;\r\n margin-bottom: 8px;\r\n }\r\n \r\n #word-meaning {\r\n font-size: 16px;\r\n color: #059669;\r\n font-style: italic;\r\n }\r\n \r\n \/* Screens *\/\r\n .screen {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(135deg, rgba(30, 58, 138, 0.95), rgba(79, 70, 229, 0.95));\r\n z-index: 20;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n color: white;\r\n text-align: center;\r\n backdrop-filter: blur(5px);\r\n }\r\n \r\n #start-screen {\r\n background: linear-gradient(135deg, rgba(30, 58, 138, 0.98), rgba(79, 70, 229, 0.98));\r\n }\r\n \r\n #level-complete, #game-over {\r\n display: none;\r\n }\r\n \r\n .screen h1 {\r\n font-size: 48px;\r\n margin-bottom: 20px;\r\n text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);\r\n background: linear-gradient(45deg, #ffd700, #ff6b35);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n \r\n .screen h2 {\r\n font-size: 32px;\r\n margin-bottom: 15px;\r\n color: #ffd700;\r\n }\r\n \r\n .screen p {\r\n font-size: 18px;\r\n margin-bottom: 30px;\r\n max-width: 80%;\r\n line-height: 1.6;\r\n }\r\n \r\n .btn {\r\n background: linear-gradient(45deg, #ffd700, #ff6b35);\r\n color: #1e3a8a;\r\n border: none;\r\n padding: 15px 35px;\r\n font-size: 20px;\r\n border-radius: 50px;\r\n cursor: pointer;\r\n font-weight: bold;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4);\r\n pointer-events: auto;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n \r\n .btn:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 12px 25px rgba(255, 215, 0, 0.6);\r\n background: linear-gradient(45deg, #ff6b35, #ffd700);\r\n }\r\n \r\n .btn:active {\r\n transform: translateY(-1px);\r\n }\r\n \r\n \/* Controls hint *\/\r\n #controls-hint {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 30px;\r\n background: rgba(255, 255, 255, 0.9);\r\n padding: 15px;\r\n border-radius: 15px;\r\n font-size: 14px;\r\n color: #1e3a8a;\r\n max-width: 250px;\r\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\r\n z-index: 15;\r\n }\r\n \r\n .control-key {\r\n background: #1e3a8a;\r\n color: white;\r\n padding: 3px 8px;\r\n border-radius: 5px;\r\n font-family: monospace;\r\n font-weight: bold;\r\n }\r\n \r\n \/* Power-ups *\/\r\n .powerup {\r\n position: absolute;\r\n width: 35px;\r\n height: 35px;\r\n border-radius: 50%;\r\n z-index: 5;\r\n animation: pulse 1s ease-in-out infinite alternate;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\r\n }\r\n \r\n @keyframes pulse {\r\n 0% { transform: scale(1); }\r\n 100% { transform: scale(1.1); }\r\n }\r\n \r\n \/* Particles *\/\r\n .particle {\r\n position: absolute;\r\n pointer-events: none;\r\n z-index: 8;\r\n }\r\n \r\n \/* Obstacles *\/\r\n .obstacle {\r\n position: absolute;\r\n background: #dc2626;\r\n border-radius: 10px;\r\n z-index: 3;\r\n box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);\r\n }\r\n \r\n \/* Letter effects *\/\r\n @keyframes letterCollect {\r\n 0% { transform: scale(1); opacity: 1; }\r\n 50% { transform: scale(1.3); opacity: 0.8; }\r\n 100% { transform: scale(0); opacity: 0; }\r\n }\r\n \r\n .letter-collected {\r\n animation: letterCollect 0.3s ease-out forwards;\r\n }\r\n \r\n \/* Combo display *\/\r\n #combo-display {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 15;\r\n font-size: 32px;\r\n font-weight: bold;\r\n color: #ffd700;\r\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);\r\n pointer-events: none;\r\n opacity: 0;\r\n }\r\n \r\n @keyframes comboShow {\r\n 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }\r\n 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }\r\n 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }\r\n }\r\n \r\n .combo-show {\r\n animation: comboShow 1s ease-out;\r\n }\r\n \r\n \/* Mobile controls *\/\r\n #mobile-controls {\r\n position: absolute;\r\n bottom: 20px;\r\n right: 20px;\r\n display: none;\r\n gap: 10px;\r\n z-index: 15;\r\n }\r\n \r\n .mobile-btn {\r\n width: 60px;\r\n height: 60px;\r\n background: rgba(255, 255, 255, 0.8);\r\n border-radius: 50%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 24px;\r\n color: #1e3a8a;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\r\n user-select: none;\r\n cursor: pointer;\r\n }\r\n \r\n \/* Health bar for added challenge *\/\r\n #health-panel {\r\n top: 80px;\r\n right: 20px;\r\n background: rgba(220, 38, 38, 0.9);\r\n color: white;\r\n }\r\n \r\n \/* Responsive adjustments *\/\r\n @media (max-width: 920px) {\r\n #arabic-adventure-widget {\r\n width: 100%;\r\n height: 500px;\r\n }\r\n \r\n .screen h1 {\r\n font-size: 36px;\r\n }\r\n \r\n .screen h2 {\r\n font-size: 28px;\r\n }\r\n \r\n .btn {\r\n padding: 12px 25px;\r\n font-size: 18px;\r\n }\r\n \r\n #controls-hint {\r\n bottom: 100px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n max-width: 80%;\r\n }\r\n \r\n #mobile-controls {\r\n display: grid;\r\n grid-template-areas:\r\n \". up .\"\r\n \"left . right\"\r\n \". down .\";\r\n }\r\n \r\n #up-btn { grid-area: up; }\r\n #left-btn { grid-area: left; }\r\n #right-btn { grid-area: right; }\r\n #down-btn { grid-area: down; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"arabic-adventure-widget\">\r\n <div id=\"game-background\">\r\n <!-- Animated stars will be added here -->\r\n <\/div>\r\n \r\n <div id=\"game-container\">\r\n <canvas id=\"game-canvas\"><\/canvas>\r\n \r\n <div id=\"game-ui\">\r\n <div id=\"score-panel\" class=\"ui-panel\">\r\n <div>\r\n <div class=\"stat-label\">points<\/div>\r\n <div class=\"stat-value\" id=\"score\">0<\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"stat-label\">The group<\/div>\r\n <div class=\"stat-value\" id=\"combo\">\u00d71<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"level-panel\" class=\"ui-panel\">\r\n <div class=\"stat-label\">Level<\/div>\r\n <div class=\"stat-value\" id=\"level\">1<\/div>\r\n <div id=\"timer-display\">\u23f0 <span id=\"timer\">60<\/span>s<\/div>\r\n <\/div>\r\n \r\n <div id=\"health-panel\" class=\"ui-panel\">\r\n <div class=\"stat-label\">life<\/div>\r\n <div class=\"stat-value\" id=\"health\">3<\/div>\r\n <\/div>\r\n \r\n <div id=\"progress-panel\" class=\"ui-panel\">\r\n <div id=\"current-word\">Form the word: door<\/div>\r\n <div id=\"word-meaning\">Door<\/div>\r\n <div id=\"progress-bar\">\r\n <div id=\"progress-fill\"><\/div>\r\n <\/div>\r\n <div>progress: <span id=\"letters-collected\">0<\/span>\/<span id=\"letters-needed\">3<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"controls-hint\">\r\n <strong>Control:<\/strong><br>\r\n <span class=\"control-key\">\u2191\u2193\u2190\u2192<\/span> For movement<br>\r\n <span class=\"control-key\">distance<\/span> to jump<br>\r\n Collect the golden letters! \ud83c\udf1f<br>\r\n Avoid the red obstacles! \u26a0\ufe0f\r\n <\/div>\r\n \r\n <div id=\"mobile-controls\">\r\n <div class=\"mobile-btn\" id=\"up-btn\">\u2191<\/div>\r\n <div class=\"mobile-btn\" id=\"left-btn\">\u2190<\/div>\r\n <div class=\"mobile-btn\" id=\"right-btn\">\u2192<\/div>\r\n <div class=\"mobile-btn\" id=\"down-btn\">\u2193<\/div>\r\n <div class=\"mobile-btn\" id=\"jump-btn\" style=\"grid-area: 1 \/ 3;\">\u219f<\/div>\r\n <\/div>\r\n \r\n <div id=\"combo-display\"><\/div>\r\n \r\n <div id=\"start-screen\" class=\"screen\">\r\n <h1>\ud83c\udf1f Arabian Adventure \ud83c\udf1f<\/h1>\r\n <p>Help the smart robot combine Arabic letters to form words!<br>\r\n With each new level, the challenges and fun will increase.<br>\r\n Collect letters quickly to get extra points!<\/p>\r\n <button class=\"btn\" id=\"start-btn\">\ud83d\ude80 Start the adventure<\/button>\r\n <p style=\"font-size: 14px; margin-top: 20px; opacity: 0.8;\">\r\n Specially designed to learn Arabic in a fun and interactive way.\r\n <\/p>\r\n <\/div>\r\n \r\n <div id=\"level-complete\" class=\"screen\">\r\n <h1>\ud83c\udf89 Well done! \ud83c\udf89<\/h1>\r\n <h2>You have completed the level!<\/h2>\r\n <p>Count the word:<span id=\"completed-word\"><\/span>\"<br>\r\n Meaning: <span id=\"completed-meaning\"><\/span><\/p>\r\n <p>Points earned: <span id=\"level-score\"><\/span><\/p>\r\n <button class=\"btn\" id=\"next-level-btn\">\ud83d\udcc8 Next level<\/button>\r\n <\/div>\r\n \r\n <div id=\"game-over\" class=\"screen\">\r\n <h1>\ud83d\udca5 Game over<\/h1>\r\n <h2 id=\"game-over-reason\">Time is up!<\/h2>\r\n <p>Final result: <span id=\"final-score\"><\/span><br>\r\n Highest level: <span id=\"highest-level\"><\/span><\/p>\r\n <button class=\"btn\" id=\"restart-btn\">\ud83d\udd04 Play again<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n (function() {\r\n \/\/ Game variables\r\n const widget = document.getElementById('arabic-adventure-widget');\r\n const canvas = document.getElementById('game-canvas');\r\n const ctx = canvas.getContext('2d');\r\n const gameBackground = document.getElementById('game-background');\r\n \r\n \/\/ UI elements\r\n const startScreen = document.getElementById('start-screen');\r\n const levelCompleteScreen = document.getElementById('level-complete');\r\n const gameOverScreen = document.getElementById('game-over');\r\n const startBtn = document.getElementById('start-btn');\r\n const nextLevelBtn = document.getElementById('next-level-btn');\r\n const restartBtn = document.getElementById('restart-btn');\r\n \r\n \/\/ Mobile controls\r\n const upBtn = document.getElementById('up-btn');\r\n const leftBtn = document.getElementById('left-btn');\r\n const rightBtn = document.getElementById('right-btn');\r\n const downBtn = document.getElementById('down-btn');\r\n const jumpBtn = document.getElementById('jump-btn');\r\n \r\n \/\/ Set canvas dimensions\r\n canvas.width = widget.offsetWidth;\r\n canvas.height = widget.offsetHeight;\r\n \r\n \/\/ Game state\r\n let gameRunning = false;\r\n let score = 0;\r\n let level = 1;\r\n let combo = 1;\r\n let timeLeft = 60;\r\n let health = 3;\r\n let gameTimer = null;\r\n let currentWord = '';\r\n let currentMeaning = '';\r\n let collectedLetters = [];\r\n let requiredLetters = [];\r\n let obstacles = [];\r\n let powerups = [];\r\n let particles = [];\r\n let keys = {};\r\n let isMobile = \/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini\/i.test(navigator.userAgent);\r\n let wordProgress = []; \/\/ Track which specific letters we need\r\n \r\n \/\/ Enhanced Arabic words with difficulty progression\r\n const levels = [\r\n { word: \"\u0628\u0627\u0628\", letters: [\"\u0628\", \"\u0627\", \"\u0628\"], meaning: \"Door\", time: 60 },\r\n { word: \"\u0642\u0644\u0645\", letters: [\"\u0642\", \"\u0644\", \"\u0645\"], meaning: \"Pen\", time: 55 },\r\n { word: \"\u0643\u062a\u0627\u0628\", letters: [\"\u0643\", \"\u062a\", \"\u0627\", \"\u0628\"], meaning: \"Book\", time: 50 },\r\n { word: \"\u0628\u064a\u062a\", letters: [\"\u0628\", \"\u064a\", \"\u062a\"], meaning: \"House\", time: 45 },\r\n { word: \"\u0645\u062f\u0631\u0633\u0629\", letters: [\"\u0645\", \"\u062f\", \"\u0631\", \"\u0633\", \"\u0629\"], meaning: \"School\", time: 45 },\r\n { word: \"\u0645\u0639\u0644\u0645\", letters: [\"\u0645\", \"\u0639\", \"\u0644\", \"\u0645\"], meaning: \"Teacher\", time: 40 },\r\n { word: \"\u0637\u0627\u0644\u0628\", letters: [\"\u0637\", \"\u0627\", \"\u0644\", \"\u0628\"], meaning: \"Student\", time: 40 },\r\n { word: \"\u0645\u0643\u062a\u0628\u0629\", letters: [\"\u0645\", \"\u0643\", \"\u062a\", \"\u0628\", \"\u0629\"], meaning: \"Library\", time: 35 },\r\n { word: \"\u062d\u062f\u064a\u0642\u0629\", letters: [\"\u062d\", \"\u062f\", \"\u064a\", \"\u0642\", \"\u0629\"], meaning: \"Garden\", time: 35 },\r\n { word: \"\u0645\u0633\u062a\u0634\u0641\u0649\", letters: [\"\u0645\", \"\u0633\", \"\u062a\", \"\u0634\", \"\u0641\", \"\u0649\"], meaning: \"Hospital\", time: 30 }\r\n ];\r\n \r\n \/\/ Enhanced player character\r\n const player = {\r\n x: 100,\r\n y: 300,\r\n width: 50,\r\n height: 50,\r\n speed: 6,\r\n jumpPower: 18,\r\n velocityY: 0,\r\n onGround: false,\r\n invulnerable: 0,\r\n color: '#4F46E5',\r\n trail: [],\r\n canDoubleJump: true,\r\n hasDoubleJumped: false,\r\n \r\n update: function() {\r\n \/\/ Gravity\r\n if (!this.onGround) {\r\n this.velocityY += 0.8;\r\n } else {\r\n this.hasDoubleJumped = false;\r\n this.canDoubleJump = true;\r\n }\r\n \r\n this.y += this.velocityY;\r\n \r\n \/\/ Ground collision\r\n if (this.y > canvas.height - 100 - this.height) {\r\n this.y = canvas.height - 100 - this.height;\r\n this.velocityY = 0;\r\n this.onGround = true;\r\n this.canDoubleJump = true;\r\n this.hasDoubleJumped = false;\r\n }\r\n \r\n \/\/ Boundaries\r\n this.x = Math.max(0, Math.min(canvas.width - this.width, this.x));\r\n \r\n \/\/ Update invulnerability\r\n if (this.invulnerable > 0) this.invulnerable--;\r\n \r\n \/\/ Trail effect\r\n this.trail.push({x: this.x + this.width\/2, y: this.y + this.height\/2, life: 20});\r\n this.trail = this.trail.filter(t => t.life-- > 0);\r\n },\r\n \r\n jump: function() {\r\n if (this.onGround) {\r\n this.velocityY = -this.jumpPower;\r\n this.onGround = false;\r\n } else if (this.canDoubleJump && !this.hasDoubleJumped) {\r\n this.velocityY = -this.jumpPower * 0.8;\r\n this.hasDoubleJumped = true;\r\n this.canDoubleJump = false;\r\n }\r\n },\r\n \r\n draw: function() {\r\n \/\/ Draw trail\r\n this.trail.forEach((t, i) => {\r\n const alpha = t.life \/ 20;\r\n ctx.fillStyle = `rgba(79, 70, 229, ${alpha * 0.3})`;\r\n ctx.beginPath();\r\n ctx.arc(t.x, t.y, 5 * alpha, 0, Math.PI * 2);\r\n ctx.fill();\r\n });\r\n \r\n \/\/ Draw player with glow effect\r\n const glowIntensity = this.invulnerable > 0 ? 0.8 : 0.3;\r\n ctx.shadowColor = this.color;\r\n ctx.shadowBlur = 20 * glowIntensity;\r\n \r\n \/\/ Main body\r\n ctx.fillStyle = this.invulnerable > 0 && Math.floor(Date.now()\/100) % 2 ? \r\n '#FF6B35' : this.color;\r\n ctx.fillRect(this.x, this.y, this.width, this.height);\r\n \r\n \/\/ Reset shadow\r\n ctx.shadowBlur = 0;\r\n \r\n \/\/ Robot details\r\n ctx.fillStyle = '#FFFFFF';\r\n ctx.fillRect(this.x + 10, this.y + 10, 8, 8); \/\/ Left eye\r\n ctx.fillRect(this.x + 32, this.y + 10, 8, 8); \/\/ Right eye\r\n \r\n ctx.fillStyle = '#FFD700';\r\n ctx.fillRect(this.x + 15, this.y + 30, 20, 5); \/\/ Mouth\r\n \r\n \/\/ Antenna\r\n ctx.strokeStyle = '#FFFFFF';\r\n ctx.lineWidth = 3;\r\n ctx.beginPath();\r\n ctx.moveTo(this.x + 25, this.y);\r\n ctx.lineTo(this.x + 25, this.y - 10);\r\n ctx.stroke();\r\n \r\n ctx.fillStyle = '#FF6B35';\r\n ctx.beginPath();\r\n ctx.arc(this.x + 25, this.y - 10, 4, 0, Math.PI * 2);\r\n ctx.fill();\r\n \r\n \/\/ Double jump indicator\r\n if (this.canDoubleJump && !this.onGround) {\r\n ctx.fillStyle = '#10B981';\r\n ctx.beginPath();\r\n ctx.arc(this.x + this.width\/2, this.y - 20, 5, 0, Math.PI * 2);\r\n ctx.fill();\r\n }\r\n }\r\n };\r\n \r\n \/\/ Letters array\r\n let letters = [];\r\n \r\n \/\/ Initialize animated background\r\n function initBackground() {\r\n gameBackground.innerHTML = '';\r\n for (let i = 0; i < 15; i++) {\r\n const star = document.createElement('div');\r\n star.className = 'floating-star';\r\n star.textContent = '\u2728';\r\n star.style.left = Math.random() * 100 + '%';\r\n star.style.top = Math.random() * 100 + '%';\r\n star.style.animationDelay = Math.random() * 6 + 's';\r\n gameBackground.appendChild(star);\r\n }\r\n }\r\n \r\n \/\/ Initialize game\r\n function initGame() {\r\n gameRunning = true;\r\n score = 0;\r\n level = 1;\r\n combo = 1;\r\n health = 3;\r\n \r\n updateUI();\r\n setupLevel();\r\n initBackground();\r\n startTimer();\r\n gameLoop();\r\n }\r\n \r\n \/\/ Set up current level with exact letter matching\r\n function setupLevel() {\r\n const currentLevel = levels[Math.min(level - 1, levels.length - 1)];\r\n currentWord = currentLevel.word;\r\n currentMeaning = currentLevel.meaning;\r\n requiredLetters = [...currentLevel.letters];\r\n collectedLetters = [];\r\n wordProgress = [...requiredLetters]; \/\/ Track exact letters needed\r\n timeLeft = currentLevel.time;\r\n \r\n \/\/ Reset player position\r\n player.x = 100;\r\n player.y = 300;\r\n player.velocityY = 0;\r\n player.onGround = false;\r\n player.canDoubleJump = true;\r\n player.hasDoubleJumped = false;\r\n \r\n \/\/ Clear arrays\r\n letters = [];\r\n obstacles = [];\r\n powerups = [];\r\n \r\n \/\/ Create ONLY the required letters + some decoy letters (non-required)\r\n const numDecoyLetters = Math.min(3 + Math.floor(level \/ 2), 6);\r\n const decoyLetters = ['\u0639', '\u0646', '\u0631', '\u0632', '\u0648', '\u0647', '\u062c', '\u062e', '\u0635', '\u0636', '\u063a', '\u0641'];\r\n \r\n \/\/ Add required letters (exactly what we need)\r\n requiredLetters.forEach((letter, index) => {\r\n const maxHeight = canvas.height - 200;\r\n const minHeight = canvas.height - 400;\r\n \r\n letters.push({\r\n x: 150 + Math.random() * (canvas.width - 300),\r\n y: minHeight + Math.random() * (maxHeight - minHeight),\r\n radius: 30,\r\n letter: letter,\r\n collected: false,\r\n required: true,\r\n requiredIndex: index, \/\/ Track which position this letter fills\r\n bounce: Math.random() * Math.PI * 2,\r\n glowPhase: Math.random() * Math.PI * 2\r\n });\r\n });\r\n \r\n \/\/ Add decoy letters\r\n for (let i = 0; i < numDecoyLetters; i++) {\r\n const decoyLetter = decoyLetters[Math.floor(Math.random() * decoyLetters.length)];\r\n const maxHeight = canvas.height - 200;\r\n const minHeight = canvas.height - 400;\r\n \r\n letters.push({\r\n x: 150 + Math.random() * (canvas.width - 300),\r\n y: minHeight + Math.random() * (maxHeight - minHeight),\r\n radius: 25, \/\/ Slightly smaller for decoys\r\n letter: decoyLetter,\r\n collected: false,\r\n required: false,\r\n bounce: Math.random() * Math.PI * 2,\r\n glowPhase: Math.random() * Math.PI * 2\r\n });\r\n }\r\n \r\n \/\/ Create more challenging obstacles\r\n const numObstacles = Math.min(2 + Math.floor(level \/ 2), 8);\r\n for (let i = 0; i < numObstacles; i++) {\r\n obstacles.push({\r\n x: Math.random() * (canvas.width - 100) + 50,\r\n y: Math.random() * (canvas.height - 300) + 100,\r\n width: 25 + Math.random() * 35,\r\n height: 25 + Math.random() * 35,\r\n velocityX: (Math.random() - 0.5) * (2 + level * 0.5), \/\/ Faster obstacles as level increases\r\n velocityY: (Math.random() - 0.5) * (2 + level * 0.5)\r\n });\r\n }\r\n \r\n \/\/ Create fewer but more strategic power-ups\r\n const numPowerups = Math.max(1, Math.floor(level \/ 4));\r\n for (let i = 0; i < numPowerups; i++) {\r\n powerups.push({\r\n x: Math.random() * (canvas.width - 100) + 50,\r\n y: Math.random() * (canvas.height - 250) + 50,\r\n type: Math.random() > 0.6 ? 'speed' : Math.random() > 0.5 ? 'time' : 'health',\r\n collected: false,\r\n pulse: 0\r\n });\r\n }\r\n \r\n updateUI();\r\n }\r\n \r\n \/\/ Update UI elements\r\n function updateUI() {\r\n document.getElementById('score').textContent = score;\r\n document.getElementById('level').textContent = level;\r\n document.getElementById('combo').textContent = '\u00d7' + combo;\r\n document.getElementById('timer').textContent = timeLeft;\r\n document.getElementById('health').textContent = health;\r\n document.getElementById('current-word').textContent = `\u0643\u0648\u0651\u0646 \u0627\u0644\u0643\u0644\u0645\u0629: ${currentWord}`;\r\n document.getElementById('word-meaning').textContent = currentMeaning;\r\n \r\n const progress = collectedLetters.length \/ requiredLetters.length * 100;\r\n document.getElementById('progress-fill').style.width = progress + '%';\r\n document.getElementById('letters-collected').textContent = collectedLetters.length;\r\n document.getElementById('letters-needed').textContent = requiredLetters.length;\r\n }\r\n \r\n \/\/ Timer management\r\n function startTimer() {\r\n if (gameTimer) clearInterval(gameTimer);\r\n gameTimer = setInterval(() => {\r\n timeLeft--;\r\n updateUI();\r\n \r\n if (timeLeft <= 0) {\r\n endGame('time');\r\n }\r\n }, 1000);\r\n }\r\n \r\n \/\/ Enhanced drawing\r\n function draw() {\r\n \/\/ Clear canvas with gradient\r\n const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);\r\n gradient.addColorStop(0, '#667eea');\r\n gradient.addColorStop(1, '#764ba2');\r\n ctx.fillStyle = gradient;\r\n ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n \r\n \/\/ Draw ground\r\n drawGround();\r\n drawClouds();\r\n drawBuildings();\r\n \r\n \/\/ Draw obstacles\r\n obstacles.forEach(obs => {\r\n ctx.fillStyle = '#DC2626';\r\n ctx.shadowColor = '#DC2626';\r\n ctx.shadowBlur = 10;\r\n ctx.fillRect(obs.x, obs.y, obs.width, obs.height);\r\n ctx.shadowBlur = 0;\r\n \r\n \/\/ Add spikes for visual danger\r\n ctx.fillStyle = '#991B1B';\r\n const spikeHeight = 8;\r\n for (let i = 0; i < obs.width; i += 10) {\r\n ctx.beginPath();\r\n ctx.moveTo(obs.x + i, obs.y);\r\n ctx.lineTo(obs.x + i + 5, obs.y - spikeHeight);\r\n ctx.lineTo(obs.x + i + 10, obs.y);\r\n ctx.fill();\r\n }\r\n });\r\n \r\n \/\/ Draw power-ups\r\n powerups.forEach(p => {\r\n if (!p.collected) {\r\n const size = 30 + Math.sin(p.pulse) * 5;\r\n let color = '#10B981';\r\n if (p.type === 'time') color = '#F59E0B';\r\n if (p.type === 'health') color = '#DC2626';\r\n \r\n ctx.fillStyle = color;\r\n ctx.shadowColor = color;\r\n ctx.shadowBlur = 15;\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, size\/2, 0, Math.PI * 2);\r\n ctx.fill();\r\n ctx.shadowBlur = 0;\r\n \r\n \/\/ Draw icon\r\n ctx.fillStyle = '#FFFFFF';\r\n ctx.font = 'bold 16px Arial';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n const icon = p.type === 'speed' ? '\u26a1' : p.type === 'time' ? '\u23f0' : '\u2764\ufe0f';\r\n ctx.fillText(icon, p.x, p.y);\r\n \r\n p.pulse += 0.1;\r\n }\r\n });\r\n \r\n \/\/ Draw letters with enhanced effects\r\n letters.forEach(l => {\r\n if (!l.collected) {\r\n const bounceY = Math.sin(l.bounce) * 5;\r\n const glowIntensity = (Math.sin(l.glowPhase) + 1) \/ 2;\r\n \r\n \/\/ Glow effect\r\n ctx.shadowColor = l.required ? '#FFD700' : '#FFA500';\r\n ctx.shadowBlur = 15 + glowIntensity * 10;\r\n \r\n \/\/ Letter background\r\n ctx.fillStyle = l.required ? '#FFD700' : '#FFA500';\r\n ctx.beginPath();\r\n ctx.arc(l.x, l.y + bounceY, l.radius, 0, Math.PI * 2);\r\n ctx.fill();\r\n \r\n \/\/ Border\r\n ctx.strokeStyle = '#1E3A8A';\r\n ctx.lineWidth = l.required ? 4 : 2;\r\n ctx.stroke();\r\n ctx.shadowBlur = 0;\r\n \r\n \/\/ Letter text\r\n ctx.fillStyle = '#1E3A8A';\r\n ctx.font = 'bold 24px Arial';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText(l.letter, l.x, l.y + bounceY);\r\n \r\n \/\/ Required indicator\r\n if (l.required) {\r\n ctx.fillStyle = '#10B981';\r\n ctx.beginPath();\r\n ctx.arc(l.x + l.radius - 8, l.y - l.radius + 8 + bounceY, 8, 0, Math.PI * 2);\r\n ctx.fill();\r\n \r\n ctx.fillStyle = '#FFFFFF';\r\n ctx.font = 'bold 12px Arial';\r\n ctx.fillText('!', l.x + l.radius - 8, l.y - l.radius + 8 + bounceY);\r\n } else {\r\n \/\/ Mark decoy letters\r\n ctx.fillStyle = '#EF4444';\r\n ctx.beginPath();\r\n ctx.arc(l.x + l.radius - 6, l.y - l.radius + 6 + bounceY, 6, 0, Math.PI * 2);\r\n ctx.fill();\r\n \r\n ctx.fillStyle = '#FFFFFF';\r\n ctx.font = 'bold 10px Arial';\r\n ctx.fillText('\u00d7', l.x + l.radius - 6, l.y - l.radius + 6 + bounceY);\r\n }\r\n \r\n l.bounce += 0.05;\r\n l.glowPhase += 0.03;\r\n }\r\n });\r\n \r\n \/\/ Draw particles\r\n particles.forEach(p => {\r\n ctx.fillStyle = `rgba(${p.r}, ${p.g}, ${p.b}, ${p.alpha})`;\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);\r\n ctx.fill();\r\n });\r\n \r\n \/\/ Draw player\r\n player.draw();\r\n }\r\n \r\n \/\/ Draw background elements\r\n function drawGround() {\r\n \/\/ Animated ground\r\n ctx.fillStyle = '#10B981';\r\n ctx.fillRect(0, canvas.height - 100, canvas.width, 100);\r\n \r\n \/\/ Grass effect\r\n ctx.strokeStyle = '#059669';\r\n ctx.lineWidth = 2;\r\n for (let i = 0; i < canvas.width; i += 10) {\r\n const height = 5 + Math.sin(Date.now() * 0.001 + i * 0.01) * 3;\r\n ctx.beginPath();\r\n ctx.moveTo(i, canvas.height - 100);\r\n ctx.lineTo(i, canvas.height - 100 - height);\r\n ctx.stroke();\r\n }\r\n }\r\n \r\n function drawClouds() {\r\n const cloudOffset = Date.now() * 0.02;\r\n ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';\r\n \r\n \/\/ Cloud 1\r\n ctx.beginPath();\r\n ctx.arc(150 + Math.sin(cloudOffset * 0.1) * 20, 80, 20, 0, Math.PI * 2);\r\n ctx.arc(170 + Math.sin(cloudOffset * 0.1) * 20, 70, 25, 0, Math.PI * 2);\r\n ctx.arc(190 + Math.sin(cloudOffset * 0.1) * 20, 85, 15, 0, Math.PI * 2);\r\n ctx.fill();\r\n \r\n \/\/ Cloud 2\r\n ctx.beginPath();\r\n ctx.arc(600 + Math.sin(cloudOffset * 0.15) * 15, 60, 20, 0, Math.PI * 2);\r\n ctx.arc(620 + Math.sin(cloudOffset * 0.15) * 15, 50, 25, 0, Math.PI * 2);\r\n ctx.arc(640 + Math.sin(cloudOffset * 0.15) * 15, 65, 15, 0, Math.PI * 2);\r\n ctx.fill();\r\n }\r\n \r\n function drawBuildings() {\r\n const buildings = [\r\n {x: 50, y: canvas.height - 180, w: 40, h: 80, color: '#7C3AED'},\r\n {x: 120, y: canvas.height - 200, w: 50, h: 100, color: '#DC2626'},\r\n {x: 200, y: canvas.height - 160, w: 35, h: 60, color: '#059669'},\r\n {x: 750, y: canvas.height - 190, w: 45, h: 90, color: '#F59E0B'},\r\n {x: 820, y: canvas.height - 140, w: 30, h: 40, color: '#8B5CF6'}\r\n ];\r\n \r\n buildings.forEach(building => {\r\n \/\/ Building body\r\n ctx.fillStyle = building.color;\r\n ctx.fillRect(building.x, building.y, building.w, building.h);\r\n \r\n \/\/ Windows\r\n ctx.fillStyle = '#FEF3C7';\r\n const windowRows = Math.floor(building.h \/ 25);\r\n const windowCols = Math.floor(building.w \/ 15);\r\n \r\n for (let row = 0; row < windowRows; row++) {\r\n for (let col = 0; col < windowCols; col++) {\r\n if (Math.random() > 0.3) {\r\n ctx.fillRect(\r\n building.x + 5 + col * 15,\r\n building.y + 5 + row * 25,\r\n 8, 12\r\n );\r\n }\r\n }\r\n }\r\n });\r\n }\r\n \r\n \/\/ Enhanced game update\r\n function update() {\r\n if (!gameRunning) return;\r\n \r\n player.update();\r\n \r\n \/\/ Update obstacles with more challenging behavior\r\n obstacles.forEach(obs => {\r\n obs.x += obs.velocityX;\r\n obs.y += obs.velocityY;\r\n \r\n \/\/ Bounce off walls\r\n if (obs.x <= 0 || obs.x + obs.width >= canvas.width) {\r\n obs.velocityX *= -1;\r\n }\r\n if (obs.y <= 0 || obs.y + obs.height >= canvas.height - 100) {\r\n obs.velocityY *= -1;\r\n }\r\n \r\n \/\/ Collision with player\r\n if (player.invulnerable === 0 &&\r\n player.x < obs.x + obs.width &&\r\n player.x + player.width > obs.x &&\r\n player.y < obs.y + obs.height &&\r\n player.y + player.height > obs.y) {\r\n \r\n \/\/ Hit obstacle - lose health, combo and time\r\n health--;\r\n combo = 1; \/\/ Reset combo completely\r\n timeLeft = Math.max(0, timeLeft - 3);\r\n player.invulnerable = 120; \/\/ Longer invulnerability\r\n \r\n \/\/ Screen shake effect\r\n canvas.style.transform = 'translate(2px, 2px)';\r\n setTimeout(() => canvas.style.transform = '', 100);\r\n \r\n updateUI();\r\n \r\n \/\/ Check if health is depleted\r\n if (health <= 0) {\r\n endGame('health');\r\n return;\r\n }\r\n }\r\n });\r\n \r\n \/\/ Update power-ups\r\n powerups.forEach(p => {\r\n if (!p.collected &&\r\n player.x < p.x + 15 &&\r\n player.x + player.width > p.x - 15 &&\r\n player.y < p.y + 15 &&\r\n player.y + player.height > p.y - 15) {\r\n \r\n p.collected = true;\r\n \r\n if (p.type === 'speed') {\r\n player.speed = Math.min(10, player.speed + 2);\r\n setTimeout(() => player.speed = 6, 5000);\r\n } else if (p.type === 'time') {\r\n timeLeft += 10;\r\n } else if (p.type === 'health') {\r\n health = Math.min(3, health + 1);\r\n }\r\n \r\n \/\/ Power-up particles\r\n createParticles(p.x, p.y, p.type === 'speed' ? '#10B981' : \r\n p.type === 'time' ? '#F59E0B' : '#DC2626');\r\n updateUI();\r\n }\r\n });\r\n \r\n \/\/ Check letter collection with proper word completion logic\r\n letters.forEach(l => {\r\n if (!l.collected) {\r\n const dx = player.x + player.width\/2 - l.x;\r\n const dy = player.y + player.height\/2 - l.y;\r\n const distance = Math.sqrt(dx * dx + dy * dy);\r\n \r\n if (distance < player.width\/2 + l.radius) {\r\n l.collected = true;\r\n \r\n if (l.required) {\r\n \/\/ Add this required letter to collected letters\r\n collectedLetters.push(l.letter);\r\n \r\n \/\/ Score calculation with combo\r\n const baseScore = 100;\r\n const comboScore = baseScore * combo;\r\n score += comboScore;\r\n \r\n \/\/ Increase combo for required letters\r\n combo = Math.min(5, combo + 1);\r\n showCombo(comboScore);\r\n } else {\r\n \/\/ Penalty for collecting wrong letters\r\n combo = Math.max(1, combo - 1);\r\n timeLeft = Math.max(0, timeLeft - 2);\r\n score = Math.max(0, score - 25);\r\n }\r\n \r\n \/\/ Visual effects\r\n createParticles(l.x, l.y, l.required ? '#FFD700' : '#EF4444');\r\n \r\n updateUI();\r\n checkWordCompletion();\r\n }\r\n }\r\n });\r\n \r\n \/\/ Update particles\r\n particles = particles.filter(p => {\r\n p.x += p.vx;\r\n p.y += p.vy;\r\n p.alpha -= 0.02;\r\n p.size *= 0.98;\r\n return p.alpha > 0;\r\n });\r\n }\r\n \r\n \/\/ Create particle effects\r\n function createParticles(x, y, color) {\r\n const colors = color === '#FFD700' ? \r\n [{r: 255, g: 215, b: 0}, {r: 255, g: 165, b: 0}] :\r\n color === '#10B981' ?\r\n [{r: 16, g: 185, b: 129}, {r: 5, g: 150, b: 105}] :\r\n color === '#F59E0B' ?\r\n [{r: 245, g: 158, b: 11}, {r: 217, g: 119, b: 6}] :\r\n [{r: 239, g: 68, b: 68}, {r: 220, g: 38, b: 38}];\r\n \r\n for (let i = 0; i < 15; i++) {\r\n const colorChoice = colors[Math.floor(Math.random() * colors.length)];\r\n particles.push({\r\n x: x + (Math.random() - 0.5) * 20,\r\n y: y + (Math.random() - 0.5) * 20,\r\n vx: (Math.random() - 0.5) * 8,\r\n vy: (Math.random() - 0.5) * 8,\r\n size: 3 + Math.random() * 4,\r\n alpha: 1,\r\n r: colorChoice.r,\r\n g: colorChoice.g,\r\n b: colorChoice.b\r\n });\r\n }\r\n }\r\n \r\n \/\/ Show combo effect\r\n function showCombo(points) {\r\n const comboDisplay = document.getElementById('combo-display');\r\n comboDisplay.textContent = `+${points} \u0646\u0642\u0637\u0629! \u00d7${combo}`;\r\n comboDisplay.className = 'combo-show';\r\n \r\n setTimeout(() => {\r\n comboDisplay.className = '';\r\n }, 1000);\r\n }\r\n \r\n \/\/ Fixed word completion check\r\n function checkWordCompletion() {\r\n \/\/ Create a map of required letters and their counts\r\n const requiredCounts = {};\r\n requiredLetters.forEach(letter => {\r\n requiredCounts[letter] = (requiredCounts[letter] || 0) + 1;\r\n });\r\n \r\n \/\/ Create a map of collected letters and their counts\r\n const collectedCounts = {};\r\n collectedLetters.forEach(letter => {\r\n collectedCounts[letter] = (collectedCounts[letter] || 0) + 1;\r\n });\r\n \r\n \/\/ Check if we have exactly the right number of each required letter\r\n let wordComplete = true;\r\n for (const [letter, requiredCount] of Object.entries(requiredCounts)) {\r\n if ((collectedCounts[letter] || 0) < requiredCount) {\r\n wordComplete = false;\r\n break;\r\n }\r\n }\r\n \r\n if (wordComplete && collectedLetters.length === requiredLetters.length) {\r\n completeLevel();\r\n }\r\n }\r\n \r\n \/\/ Complete current level\r\n function completeLevel() {\r\n gameRunning = false;\r\n clearInterval(gameTimer);\r\n \r\n \/\/ Bonus points for remaining time and health\r\n const timeBonus = timeLeft * 10;\r\n const healthBonus = health * 50;\r\n score += timeBonus + healthBonus;\r\n \r\n document.getElementById('completed-word').textContent = currentWord;\r\n document.getElementById('completed-meaning').textContent = currentMeaning;\r\n document.getElementById('level-score').textContent = `${score} (\u0632\u0645\u0646: +${timeBonus}, \u0635\u062d\u0629: +${healthBonus})`;\r\n \r\n levelCompleteScreen.style.display = 'flex';\r\n }\r\n \r\n \/\/ End game\r\n function endGame(reason) {\r\n gameRunning = false;\r\n clearInterval(gameTimer);\r\n \r\n const gameOverReason = document.getElementById('game-over-reason');\r\n if (reason === 'time') {\r\n gameOverReason.textContent = '\u0627\u0644\u0648\u0642\u062a \u0627\u0646\u062a\u0647\u0649!';\r\n } else if (reason === 'health') {\r\n gameOverReason.textContent = '\u0641\u0642\u062f\u062a \u0643\u0644 \u0627\u0644\u062d\u064a\u0627\u0629!';\r\n }\r\n \r\n document.getElementById('final-score').textContent = score;\r\n document.getElementById('highest-level').textContent = level;\r\n \r\n gameOverScreen.style.display = 'flex';\r\n }\r\n \r\n \/\/ Game loop\r\n function gameLoop() {\r\n if (gameRunning) {\r\n update();\r\n draw();\r\n requestAnimationFrame(gameLoop);\r\n }\r\n }\r\n \r\n \/\/ Keyboard controls\r\n function handleKeyDown(e) {\r\n e.preventDefault();\r\n keys[e.key] = true;\r\n \r\n if (gameRunning) {\r\n if (keys['ArrowUp'] || keys['w'] || keys['W'] || keys[' ']) {\r\n player.jump();\r\n }\r\n }\r\n }\r\n \r\n function handleKeyUp(e) {\r\n keys[e.key] = false;\r\n }\r\n \r\n \/\/ Continuous movement\r\n function handleMovement() {\r\n if (gameRunning) {\r\n if (keys['ArrowLeft'] || keys['a'] || keys['A']) {\r\n player.x -= player.speed;\r\n }\r\n if (keys['ArrowRight'] || keys['d'] || keys['D']) {\r\n player.x += player.speed;\r\n }\r\n }\r\n }\r\n \r\n \/\/ Mobile controls\r\n function setupMobileControls() {\r\n if (!isMobile) return;\r\n \r\n \/\/ Touch events for mobile buttons\r\n const handleTouch = (direction) => {\r\n return (e) => {\r\n e.preventDefault();\r\n keys[direction] = true;\r\n };\r\n };\r\n \r\n const handleTouchEnd = (direction) => {\r\n return (e) => {\r\n e.preventDefault();\r\n keys[direction] = false;\r\n };\r\n };\r\n \r\n upBtn.addEventListener('touchstart', handleTouch('ArrowUp'));\r\n upBtn.addEventListener('touchend', handleTouchEnd('ArrowUp'));\r\n \r\n leftBtn.addEventListener('touchstart', handleTouch('ArrowLeft'));\r\n leftBtn.addEventListener('touchend', handleTouchEnd('ArrowLeft'));\r\n \r\n rightBtn.addEventListener('touchstart', handleTouch('ArrowRight'));\r\n rightBtn.addEventListener('touchend', handleTouchEnd('ArrowRight'));\r\n \r\n downBtn.addEventListener('touchstart', handleTouch('ArrowDown'));\r\n downBtn.addEventListener('touchend', handleTouchEnd('ArrowDown'));\r\n \r\n jumpBtn.addEventListener('touchstart', () => {\r\n keys[' '] = true;\r\n if (gameRunning) player.jump();\r\n });\r\n \r\n jumpBtn.addEventListener('touchend', () => {\r\n keys[' '] = false;\r\n });\r\n }\r\n \r\n \/\/ Event listeners\r\n function setupEventListeners() {\r\n widget.addEventListener('keydown', handleKeyDown);\r\n widget.addEventListener('keyup', handleKeyUp);\r\n \r\n \/\/ Make widget focusable for keyboard events\r\n widget.tabIndex = 0;\r\n widget.style.outline = 'none';\r\n \r\n \/\/ Auto-focus widget when clicked\r\n widget.addEventListener('click', () => widget.focus());\r\n \r\n \/\/ Start button\r\n startBtn.addEventListener('click', function() {\r\n startScreen.style.display = 'none';\r\n widget.focus();\r\n initGame();\r\n });\r\n \r\n \/\/ Next level button\r\n nextLevelBtn.addEventListener('click', function() {\r\n levelCompleteScreen.style.display = 'none';\r\n \r\n if (level < levels.length) {\r\n level++;\r\n combo = 1; \/\/ Reset combo for new level\r\n setupLevel();\r\n startTimer();\r\n gameRunning = true;\r\n gameLoop();\r\n } else {\r\n \/\/ All levels completed\r\n startScreen.querySelector('h1').innerHTML = '\ud83c\udf89 \u0645\u0628\u0631\u0648\u0643! \u0623\u0646\u062a \u0628\u0637\u0644! \ud83c\udf89';\r\n startScreen.querySelector('p').innerHTML = \r\n `\u0644\u0642\u062f \u0623\u0643\u0645\u0644\u062a \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0633\u062a\u0648\u064a\u0627\u062a \u0628\u0646\u062c\u0627\u062d!<br>\r\n \u0627\u0644\u0646\u062a\u064a\u062c\u0629 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629: ${score}<br>\r\n \u0623\u0646\u062a \u0627\u0644\u0622\u0646 \u062e\u0628\u064a\u0631 \u0641\u064a \u0627\u0644\u062d\u0631\u0648\u0641 \u0627\u0644\u0639\u0631\u0628\u064a\u0629! \ud83c\udf1f`;\r\n startBtn.textContent = '\ud83d\udd04 \u0627\u0644\u0639\u0628 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649';\r\n startScreen.style.display = 'flex';\r\n }\r\n widget.focus();\r\n });\r\n \r\n \/\/ Restart button\r\n restartBtn.addEventListener('click', function() {\r\n gameOverScreen.style.display = 'none';\r\n \r\n \/\/ Reset everything\r\n score = 0;\r\n level = 1;\r\n combo = 1;\r\n health = 3;\r\n \r\n \/\/ Reset start screen\r\n startScreen.querySelector('h1').innerHTML = '\ud83c\udf1f \u0645\u063a\u0627\u0645\u0631\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \ud83c\udf1f';\r\n startScreen.querySelector('p').innerHTML = \r\n `\u0633\u0627\u0639\u062f \u0627\u0644\u0631\u0648\u0628\u0648\u062a \u0627\u0644\u0630\u0643\u064a \u0641\u064a \u062c\u0645\u0639 \u0627\u0644\u062d\u0631\u0648\u0641 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0644\u062a\u0643\u0648\u064a\u0646 \u0627\u0644\u0643\u0644\u0645\u0627\u062a!<br>\r\n \u0645\u0639 \u0643\u0644 \u0645\u0633\u062a\u0648\u0649 \u062c\u062f\u064a\u062f\u060c \u0633\u062a\u0632\u062f\u0627\u062f \u0627\u0644\u062a\u062d\u062f\u064a\u0627\u062a \u0648\u0627\u0644\u0645\u062a\u0639\u0629.<br>\r\n \u0627\u062c\u0645\u0639 \u0627\u0644\u062d\u0631\u0648\u0641 \u0628\u0633\u0631\u0639\u0629 \u0644\u062a\u062d\u0635\u0644 \u0639\u0644\u0649 \u0646\u0642\u0627\u0637 \u0625\u0636\u0627\u0641\u064a\u0629!`;\r\n startBtn.textContent = '\ud83d\ude80 \u0627\u0628\u062f\u0623 \u0627\u0644\u0645\u063a\u0627\u0645\u0631\u0629';\r\n \r\n startScreen.style.display = 'flex';\r\n widget.focus();\r\n });\r\n \r\n \/\/ Setup mobile controls\r\n setupMobileControls();\r\n \r\n \/\/ Handle window resize\r\n window.addEventListener('resize', () => {\r\n canvas.width = widget.offsetWidth;\r\n canvas.height = widget.offsetHeight;\r\n });\r\n }\r\n \r\n \/\/ Initial setup\r\n function init() {\r\n initBackground();\r\n setupEventListeners();\r\n \r\n \/\/ Start movement interval\r\n setInterval(handleMovement, 16);\r\n }\r\n \r\n \/\/ Start everything\r\n init();\r\n })();\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>Arabic Adventure – Enhanced \u0627\u0644\u0646\u0642\u0627\u0637 0 \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u00d71 \u0627\u0644\u0645\u0633\u062a\u0648\u0649 1 \u23f0 60s \u0627\u0644\u062d\u064a\u0627\u0629 3 \u0643\u0648\u0651\u0646 \u0627\u0644\u0643\u0644\u0645\u0629: \u0628\u0627\u0628 Door \u062a\u0642\u062f\u0645: 0\/3 \u0627\u0644\u062a\u062d\u0643\u0645: \u2191\u2193\u2190\u2192 \u0644\u0644\u062d\u0631\u0643\u0629 \u0645\u0633\u0627\u0641\u0629 \u0644\u0644\u0642\u0641\u0632 \u0627\u062c\u0645\u0639 \u0627\u0644\u062d\u0631\u0648\u0641 \u0627\u0644\u0630\u0647\u0628\u064a\u0629! \ud83c\udf1f \u062a\u062c\u0646\u0628 \u0627\u0644\u0639\u0648\u0627\u0626\u0642 \u0627\u0644\u062d\u0645\u0631\u0627\u0621! \u26a0\ufe0f \u2191 \u2190 \u2192 \u2193 \u219f \ud83c\udf1f \u0645\u063a\u0627\u0645\u0631\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \ud83c\udf1f \u0633\u0627\u0639\u062f \u0627\u0644\u0631\u0648\u0628\u0648\u062a \u0627\u0644\u0630\u0643\u064a \u0641\u064a \u062c\u0645\u0639 \u0627\u0644\u062d\u0631\u0648\u0641 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0644\u062a\u0643\u0648\u064a\u0646 \u0627\u0644\u0643\u0644\u0645\u0627\u062a! \u0645\u0639 \u0643\u0644 \u0645\u0633\u062a\u0648\u0649 \u062c\u062f\u064a\u062f\u060c […]<\/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-15274","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15274","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=15274"}],"version-history":[{"count":4,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15274\/revisions"}],"predecessor-version":[{"id":15278,"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/pages\/15274\/revisions\/15278"}],"wp:attachment":[{"href":"https:\/\/ejaada.com\/en\/wp-json\/wp\/v2\/media?parent=15274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}