| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>WordQuest - English Learning RPG</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| -webkit-tap-highlight-color: transparent; |
| background-color: #1a1a2e; |
| color: #ffffff; |
| overflow-x: hidden; |
| touch-action: manipulation; |
| } |
| |
| .game-container { |
| max-width: 100%; |
| height: 100vh; |
| overflow: hidden; |
| position: relative; |
| } |
| |
| .world-map { |
| background-image: url('https://i.imgur.com/JjQZQ9W.png'); |
| background-size: cover; |
| background-position: center; |
| width: 200%; |
| height: 200%; |
| position: absolute; |
| transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); |
| } |
| |
| .hud { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| padding: 12px; |
| display: flex; |
| justify-content: space-between; |
| z-index: 100; |
| background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); |
| } |
| |
| .hud-item { |
| background-color: rgba(0,0,0,0.5); |
| border-radius: 20px; |
| padding: 8px 12px; |
| display: flex; |
| align-items: center; |
| backdrop-filter: blur(5px); |
| border: 1px solid rgba(255,255,255,0.1); |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); |
| transition: all 0.3s ease; |
| } |
| |
| .hud-item:active { |
| transform: scale(0.95); |
| } |
| |
| .xp-bar { |
| height: 6px; |
| border-radius: 3px; |
| background-color: rgba(255,255,255,0.2); |
| overflow: hidden; |
| margin-top: 4px; |
| } |
| |
| .xp-progress { |
| height: 100%; |
| background: linear-gradient(90deg, #4f46e5, #a855f7); |
| border-radius: 3px; |
| transition: width 0.5s ease; |
| animation: pulse 2s infinite; |
| } |
| |
| .streak-fire { |
| color: #f59e0b; |
| animation: flame 1s infinite alternate; |
| } |
| |
| .coin { |
| color: #fbbf24; |
| animation: shine 2s infinite; |
| } |
| |
| .avatar { |
| position: fixed; |
| bottom: 80px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 120px; |
| height: 120px; |
| background-color: #3b82f6; |
| border-radius: 50%; |
| border: 3px solid #ffffff; |
| box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 40px; |
| z-index: 50; |
| transition: all 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); |
| } |
| |
| .avatar:active { |
| transform: translateX(-50%) scale(0.9); |
| } |
| |
| .nav-button { |
| position: fixed; |
| bottom: 20px; |
| width: 60px; |
| height: 60px; |
| border-radius: 50%; |
| background-color: #4f46e5; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 24px; |
| color: white; |
| box-shadow: 0 4px 10px rgba(0,0,0,0.3); |
| z-index: 50; |
| transition: all 0.2s cubic-bezier(0.68, -0.6, 0.32, 1.6); |
| } |
| |
| .nav-button:active { |
| transform: scale(0.85); |
| } |
| |
| .menu-button { |
| left: 20px; |
| background-color: #10b981; |
| } |
| |
| .action-button { |
| right: 20px; |
| background-color: #ef4444; |
| animation: pulse 1.5s infinite; |
| } |
| |
| .mission-marker { |
| position: absolute; |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| background-color: #f59e0b; |
| border: 2px solid white; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| font-size: 16px; |
| transform: translate(-50%, -50%); |
| z-index: 10; |
| cursor: pointer; |
| transition: all 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); |
| box-shadow: 0 4px 8px rgba(0,0,0,0.2); |
| } |
| |
| .mission-marker:active { |
| transform: translate(-50%, -50%) scale(1.1); |
| } |
| |
| .mission-marker.active { |
| animation: bounce 0.8s infinite alternate; |
| box-shadow: 0 0 20px #f59e0b; |
| } |
| |
| .mission-marker.completed { |
| background-color: #10b981; |
| box-shadow: 0 0 20px #10b981; |
| } |
| |
| .dialog-bubble { |
| position: absolute; |
| background-color: white; |
| color: #1f2937; |
| padding: 12px; |
| border-radius: 16px; |
| max-width: 200px; |
| font-size: 14px; |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); |
| z-index: 20; |
| transform-origin: bottom center; |
| animation: popIn 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; |
| opacity: 0; |
| } |
| |
| .dialog-bubble:after { |
| content: ''; |
| position: absolute; |
| bottom: -10px; |
| left: 50%; |
| transform: translateX(-50%); |
| border-width: 10px 10px 0; |
| border-style: solid; |
| border-color: white transparent transparent; |
| } |
| |
| .word-highlight { |
| background-color: rgba(234, 179, 8, 0.3); |
| border-radius: 2px; |
| transition: all 0.2s ease; |
| padding: 0 2px; |
| cursor: pointer; |
| } |
| |
| .word-highlight:active { |
| transform: scale(1.1); |
| } |
| |
| .word-highlight.active { |
| background-color: rgba(234, 179, 8, 0.7); |
| animation: wordGlow 0.5s ease-out; |
| } |
| |
| .word-highlight.learned { |
| background-color: rgba(16, 185, 129, 0.3); |
| } |
| |
| .word-highlight.learned.active { |
| background-color: rgba(16, 185, 129, 0.7); |
| } |
| |
| .battle-ui { |
| position: fixed; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| background-color: rgba(0,0,0,0.9); |
| border-top-left-radius: 20px; |
| border-top-right-radius: 20px; |
| padding: 20px; |
| transform: translateY(100%); |
| transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); |
| z-index: 200; |
| backdrop-filter: blur(10px); |
| box-shadow: 0 -5px 15px rgba(0,0,0,0.3); |
| } |
| |
| .battle-ui.active { |
| transform: translateY(0); |
| } |
| |
| .npc-avatar { |
| width: 80px; |
| height: 80px; |
| border-radius: 50%; |
| background-color: #6b7280; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 30px; |
| margin: 0 auto 10px; |
| border: 3px solid white; |
| box-shadow: 0 4px 8px rgba(0,0,0,0.2); |
| transition: all 0.3s ease; |
| } |
| |
| .health-bar { |
| height: 10px; |
| border-radius: 5px; |
| background-color: rgba(255,255,255,0.2); |
| overflow: hidden; |
| margin-bottom: 15px; |
| } |
| |
| .health-progress { |
| height: 100%; |
| background: linear-gradient(90deg, #ef4444, #f59e0b); |
| border-radius: 5px; |
| transition: width 0.3s ease; |
| } |
| |
| .dialogue-option { |
| background-color: rgba(255,255,255,0.1); |
| border-radius: 10px; |
| padding: 12px; |
| margin-bottom: 10px; |
| border: 1px solid rgba(255,255,255,0.2); |
| transition: all 0.2s cubic-bezier(0.68, -0.6, 0.32, 1.6); |
| } |
| |
| .dialogue-option:active { |
| background-color: rgba(255,255,255,0.3); |
| transform: scale(0.98); |
| } |
| |
| .mic-button { |
| width: 60px; |
| height: 60px; |
| border-radius: 50%; |
| background-color: #ef4444; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin: 0 auto; |
| font-size: 24px; |
| color: white; |
| box-shadow: 0 4px 10px rgba(0,0,0,0.3); |
| transition: all 0.2s cubic-bezier(0.68, -0.6, 0.32, 1.6); |
| } |
| |
| .mic-button.active { |
| animation: pulse 0.5s infinite; |
| background-color: #10b981; |
| } |
| |
| .power-bar { |
| height: 6px; |
| border-radius: 3px; |
| background-color: rgba(255,255,255,0.2); |
| overflow: hidden; |
| margin-top: 10px; |
| } |
| |
| .power-progress { |
| height: 100%; |
| background: linear-gradient(90deg, #3b82f6, #a855f7); |
| border-radius: 3px; |
| transition: width 0.1s ease; |
| } |
| |
| .reward-popup { |
| position: fixed; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%) scale(0); |
| background-color: rgba(0,0,0,0.9); |
| border-radius: 20px; |
| padding: 20px; |
| width: 80%; |
| max-width: 300px; |
| text-align: center; |
| z-index: 300; |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255,255,255,0.1); |
| box-shadow: 0 10px 25px rgba(0,0,0,0.3); |
| animation: popIn 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; |
| } |
| |
| .reward-icon { |
| font-size: 40px; |
| margin-bottom: 10px; |
| animation: bounce 0.8s infinite alternate; |
| } |
| |
| .confetti { |
| position: absolute; |
| width: 10px; |
| height: 10px; |
| background-color: #f00; |
| border-radius: 50%; |
| animation: confetti-fall 2s ease-in-out forwards; |
| z-index: 350; |
| } |
| |
| |
| .mission-ui { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: rgba(0,0,0,0.9); |
| z-index: 400; |
| display: flex; |
| flex-direction: column; |
| transform: translateY(100%); |
| transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); |
| backdrop-filter: blur(10px); |
| } |
| |
| .mission-ui.active { |
| transform: translateY(0); |
| } |
| |
| .mission-header { |
| background-color: #4f46e5; |
| padding: 20px; |
| border-top-left-radius: 20px; |
| border-top-right-radius: 20px; |
| text-align: center; |
| box-shadow: 0 4px 8px rgba(0,0,0,0.2); |
| } |
| |
| .mission-content { |
| flex: 1; |
| padding: 20px; |
| overflow-y: auto; |
| } |
| |
| .mission-text { |
| background-color: rgba(255,255,255,0.1); |
| border-radius: 10px; |
| padding: 15px; |
| margin-bottom: 20px; |
| line-height: 1.6; |
| } |
| |
| .mission-actions { |
| display: flex; |
| gap: 10px; |
| padding: 20px; |
| } |
| |
| .mission-button { |
| flex: 1; |
| padding: 15px; |
| border-radius: 10px; |
| text-align: center; |
| font-weight: bold; |
| transition: all 0.2s cubic-bezier(0.68, -0.6, 0.32, 1.6); |
| } |
| |
| .mission-button:active { |
| transform: scale(0.95); |
| } |
| |
| .mission-button.primary { |
| background-color: #4f46e5; |
| color: white; |
| } |
| |
| .mission-button.secondary { |
| background-color: rgba(255,255,255,0.1); |
| border: 1px solid rgba(255,255,255,0.2); |
| } |
| |
| |
| .menu-ui { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: rgba(0,0,0,0.9); |
| z-index: 500; |
| display: flex; |
| flex-direction: column; |
| transform: translateX(-100%); |
| transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); |
| backdrop-filter: blur(10px); |
| } |
| |
| .menu-ui.active { |
| transform: translateX(0); |
| } |
| |
| .menu-header { |
| background-color: #10b981; |
| padding: 20px; |
| text-align: center; |
| box-shadow: 0 4px 8px rgba(0,0,0,0.2); |
| } |
| |
| .menu-content { |
| flex: 1; |
| padding: 20px; |
| overflow-y: auto; |
| } |
| |
| .menu-section { |
| background-color: rgba(255,255,255,0.1); |
| border-radius: 10px; |
| padding: 15px; |
| margin-bottom: 15px; |
| } |
| |
| .menu-item { |
| padding: 12px; |
| border-radius: 8px; |
| margin-bottom: 8px; |
| display: flex; |
| align-items: center; |
| transition: all 0.2s ease; |
| } |
| |
| .menu-item:active { |
| background-color: rgba(255,255,255,0.2); |
| } |
| |
| .menu-item i { |
| width: 30px; |
| font-size: 18px; |
| text-align: center; |
| margin-right: 10px; |
| } |
| |
| .menu-close { |
| position: absolute; |
| top: 15px; |
| right: 15px; |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| background-color: rgba(255,255,255,0.1); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 20px; |
| transition: all 0.2s ease; |
| } |
| |
| .menu-close:active { |
| transform: scale(0.9); |
| } |
| |
| |
| .tutorial-ui { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: rgba(0,0,0,0.9); |
| z-index: 600; |
| display: flex; |
| flex-direction: column; |
| transform: translateY(100%); |
| transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); |
| backdrop-filter: blur(10px); |
| } |
| |
| .tutorial-ui.active { |
| transform: translateY(0); |
| } |
| |
| .tutorial-header { |
| background-color: #f59e0b; |
| padding: 20px; |
| text-align: center; |
| box-shadow: 0 4px 8px rgba(0,0,0,0.2); |
| } |
| |
| .tutorial-content { |
| flex: 1; |
| padding: 20px; |
| overflow-y: auto; |
| } |
| |
| .tutorial-step { |
| background-color: rgba(255,255,255,0.1); |
| border-radius: 10px; |
| padding: 15px; |
| margin-bottom: 15px; |
| } |
| |
| .tutorial-actions { |
| display: flex; |
| gap: 10px; |
| padding: 20px; |
| } |
| |
| .tutorial-button { |
| flex: 1; |
| padding: 15px; |
| border-radius: 10px; |
| text-align: center; |
| font-weight: bold; |
| transition: all 0.2s ease; |
| } |
| |
| .tutorial-button:active { |
| transform: scale(0.95); |
| } |
| |
| .tutorial-button.primary { |
| background-color: #f59e0b; |
| color: white; |
| } |
| |
| |
| .feedback-correct { |
| position: fixed; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%) scale(0); |
| background-color: rgba(16, 185, 129, 0.9); |
| color: white; |
| padding: 15px 25px; |
| border-radius: 50px; |
| font-weight: bold; |
| z-index: 700; |
| animation: popIn 0.3s ease-out forwards, fadeOut 0.5s ease-out 1s forwards; |
| box-shadow: 0 5px 15px rgba(16, 185, 129, 0.5); |
| } |
| |
| .feedback-incorrect { |
| position: fixed; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%) scale(0); |
| background-color: rgba(239, 68, 68, 0.9); |
| color: white; |
| padding: 15px 25px; |
| border-radius: 50px; |
| font-weight: bold; |
| z-index: 700; |
| animation: popIn 0.3s ease-out forwards, fadeOut 0.5s ease-out 1s forwards; |
| box-shadow: 0 5px 15px rgba(239, 68, 68, 0.5); |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 5px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: rgba(255,255,255,0.1); |
| border-radius: 10px; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: rgba(255,255,255,0.3); |
| border-radius: 10px; |
| } |
| |
| ::-webkit-scrollbar-thumb:hover { |
| background: rgba(255,255,255,0.5); |
| } |
| |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); opacity: 1; } |
| 50% { transform: scale(1.05); opacity: 0.8; } |
| 100% { transform: scale(1); opacity: 1; } |
| } |
| |
| @keyframes flame { |
| 0% { text-shadow: 0 0 5px #f59e0b; } |
| 100% { text-shadow: 0 0 15px #f59e0b, 0 0 5px #ef4444; } |
| } |
| |
| @keyframes shine { |
| 0% { text-shadow: 0 0 5px rgba(251, 191, 36, 0.5); } |
| 50% { text-shadow: 0 0 15px rgba(251, 191, 36, 0.8); } |
| 100% { text-shadow: 0 0 5px rgba(251, 191, 36, 0.5); } |
| } |
| |
| @keyframes bounce { |
| 0% { transform: translateY(0); } |
| 100% { transform: translateY(-10px); } |
| } |
| |
| @keyframes popIn { |
| 0% { transform: scale(0); opacity: 0; } |
| 80% { transform: scale(1.1); opacity: 1; } |
| 100% { transform: scale(1); opacity: 1; } |
| } |
| |
| @keyframes fadeOut { |
| 0% { opacity: 1; } |
| 100% { opacity: 0; } |
| } |
| |
| @keyframes wordGlow { |
| 0% { background-color: rgba(234, 179, 8, 0.3); } |
| 50% { background-color: rgba(234, 179, 8, 0.7); box-shadow: 0 0 10px rgba(234, 179, 8, 0.5); } |
| 100% { background-color: rgba(234, 179, 8, 0.3); } |
| } |
| |
| @keyframes confetti-fall { |
| 0% { transform: translateY(-100px) rotate(0deg); opacity: 1; } |
| 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } |
| } |
| |
| @keyframes slideInRight { |
| 0% { transform: translateX(100%); opacity: 0; } |
| 100% { transform: translateX(0); opacity: 1; } |
| } |
| |
| @keyframes slideOutRight { |
| 0% { transform: translateX(0); opacity: 1; } |
| 100% { transform: translateX(100%); opacity: 0; } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="game-container"> |
| |
| <div class="world-map" id="worldMap"></div> |
| |
| |
| <div class="hud"> |
| <div class="hud-item" onclick="showPlayerStats()"> |
| <div class="mr-2"> |
| <div class="text-xs text-gray-300">Level</div> |
| <div class="font-bold">12</div> |
| </div> |
| <div> |
| <div class="text-xs text-right text-gray-300">XP</div> |
| <div class="xp-bar"> |
| <div class="xp-progress" style="width: 65%"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="hud-item" onclick="showShop()"> |
| <div class="mr-2"> |
| <div class="text-xs text-gray-300">Coins</div> |
| <div class="font-bold flex items-center"> |
| <i class="fas fa-coins coin mr-1"></i> 1,245 |
| </div> |
| </div> |
| </div> |
| |
| <div class="hud-item" onclick="showStreakInfo()"> |
| <div class="mr-2"> |
| <div class="text-xs text-gray-300">Streak</div> |
| <div class="font-bold flex items-center"> |
| <i class="fas fa-fire streak-fire mr-1"></i> 5 |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mission-marker" style="top: 30%; left: 25%;" onclick="startMission(1)"> |
| <i class="fas fa-book"></i> |
| </div> |
| |
| <div class="mission-marker active" style="top: 45%; left: 60%;" onclick="startMission(2)"> |
| <i class="fas fa-comments"></i> |
| </div> |
| |
| <div class="mission-marker completed" style="top: 70%; left: 40%;" onclick="startMission(3)"> |
| <i class="fas fa-scroll"></i> |
| </div> |
| |
| |
| <div class="dialog-bubble" style="top: 15%; left: 25%;" id="npcDialog"> |
| Welcome to WordQuest! Tap on markers to start missions. |
| </div> |
| |
| |
| <div class="avatar" onclick="showPlayerStats()"> |
| <i class="fas fa-user"></i> |
| </div> |
| |
| |
| <div class="nav-button menu-button" onclick="toggleMenu()"> |
| <i class="fas fa-bars"></i> |
| </div> |
| |
| <div class="nav-button action-button" onclick="startBattle()"> |
| <i class="fas fa-microphone"></i> |
| </div> |
| |
| |
| <div class="battle-ui" id="battleUI"> |
| <div class="npc-avatar"> |
| <i class="fas fa-dragon"></i> |
| </div> |
| <div class="text-center mb-3"> |
| <div class="font-bold">Grammar Dragon</div> |
| <div class="text-sm text-gray-300">Speak correctly to defeat me!</div> |
| </div> |
| |
| <div class="health-bar"> |
| <div class="health-progress" style="width: 70%"></div> |
| </div> |
| |
| <div class="mb-4"> |
| <div class="text-center text-sm mb-2">Choose your response:</div> |
| <div class="dialogue-option" onclick="selectDialogue(1)"> |
| "Hello! How are you today?" |
| </div> |
| <div class="dialogue-option" onclick="selectDialogue(2)"> |
| "I'm here to challenge you!" |
| </div> |
| <div class="dialogue-option" onclick="selectDialogue(3)"> |
| "What's your favorite color?" |
| </div> |
| </div> |
| |
| <div class="text-center mb-3"> |
| <div class="mic-button" id="micButton" onclick="toggleRecording()"> |
| <i class="fas fa-microphone"></i> |
| </div> |
| <div class="power-bar mt-2"> |
| <div class="power-progress" id="powerBar" style="width: 0%"></div> |
| </div> |
| <div class="text-xs mt-1">Hold to record your response</div> |
| </div> |
| </div> |
| |
| |
| <div class="reward-popup" id="rewardPopup"> |
| <div class="reward-icon"> |
| <i class="fas fa-trophy text-yellow-400"></i> |
| </div> |
| <h3 class="font-bold text-xl mb-2">Mission Complete!</h3> |
| <p class="text-gray-300 mb-4">You earned 50 XP and 10 coins</p> |
| <div class="flex justify-center gap-4 mb-4"> |
| <div class="text-center"> |
| <div class="text-sm text-gray-300">New Words</div> |
| <div class="font-bold">3</div> |
| </div> |
| <div class="text-center"> |
| <div class="text-sm text-gray-300">Accuracy</div> |
| <div class="font-bold">85%</div> |
| </div> |
| </div> |
| <button class="w-full py-3 bg-purple-600 rounded-lg font-bold" onclick="hideReward()"> |
| Continue Adventure |
| </button> |
| </div> |
| |
| |
| <div class="mission-ui" id="missionUI"> |
| <div class="mission-header"> |
| <h2 class="font-bold text-xl">The Lost Translation</h2> |
| <div class="text-sm">Reading Mission • Level 2</div> |
| </div> |
| |
| <div class="mission-content"> |
| <div class="mission-text" id="missionText"> |
| In the ancient <span class="word-highlight" onclick="highlightWord('library')">library</span> of Wordoria, there lies a <span class="word-highlight" onclick="highlightWord('mysterious')">mysterious</span> <span class="word-highlight" onclick="highlightWord('scroll')">scroll</span> that has been <span class="word-highlight" onclick="highlightWord('untouched')">untouched</span> for centuries. The <span class="word-highlight" onclick="highlightWord('librarian')">librarian</span> told me that it contains the <span class="word-highlight" onclick="highlightWord('secrets')">secrets</span> of the <span class="word-highlight" onclick="highlightWord('language')">language</span> gods. To <span class="word-highlight" onclick="highlightWord('unlock')">unlock</span> its <span class="word-highlight" onclick="highlightWord('power')">power</span>, you must first <span class="word-highlight" onclick="highlightWord('understand')">understand</span> its contents. |
| |
| <div class="mt-4 p-3 bg-gray-800 rounded-lg"> |
| <h4 class="font-bold mb-2">Comprehension Questions:</h4> |
| <div class="mb-3"> |
| <p class="mb-1">1. Where is the mysterious scroll located?</p> |
| <div class="flex gap-2 mt-1"> |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">In the mountains</button> |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, true)">In the library</button> |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">Under the sea</button> |
| </div> |
| </div> |
| <div> |
| <p class="mb-1">2. What does the scroll contain?</p> |
| <div class="flex gap-2 mt-1"> |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">Treasure maps</button> |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, true)">Language secrets</button> |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">Ancient recipes</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mission-actions"> |
| <button class="mission-button secondary" onclick="hideMission()"> |
| <i class="fas fa-times mr-1"></i> Cancel |
| </button> |
| <button class="mission-button primary" onclick="completeMission()"> |
| <i class="fas fa-check mr-1"></i> Complete |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="menu-ui" id="menuUI"> |
| <div class="menu-header"> |
| <h2 class="font-bold text-xl">WordQuest Menu</h2> |
| </div> |
| <div class="menu-close" onclick="toggleMenu()"> |
| <i class="fas fa-times"></i> |
| </div> |
| |
| <div class="menu-content"> |
| <div class="menu-section"> |
| <h3 class="font-bold mb-3">Player</h3> |
| <div class="menu-item" onclick="showPlayerStats()"> |
| <i class="fas fa-user"></i> |
| <span>My Stats</span> |
| </div> |
| <div class="menu-item" onclick="showInventory()"> |
| <i class="fas fa-backpack"></i> |
| <span>Inventory</span> |
| </div> |
| <div class="menu-item" onclick="showAchievements()"> |
| <i class="fas fa-trophy"></i> |
| <span>Achievements</span> |
| </div> |
| </div> |
| |
| <div class="menu-section"> |
| <h3 class="font-bold mb-3">Game</h3> |
| <div class="menu-item" onclick="showQuests()"> |
| <i class="fas fa-scroll"></i> |
| <span>Quests</span> |
| </div> |
| <div class="menu-item" onclick="showShop()"> |
| <i class="fas fa-shopping-bag"></i> |
| <span>Shop</span> |
| </div> |
| <div class="menu-item" onclick="showMap()"> |
| <i class="fas fa-map"></i> |
| <span>World Map</span> |
| </div> |
| </div> |
| |
| <div class="menu-section"> |
| <h3 class="font-bold mb-3">Settings</h3> |
| <div class="menu-item" onclick="showSettings()"> |
| <i class="fas fa-cog"></i> |
| <span>Settings</span> |
| </div> |
| <div class="menu-item" onclick="showTutorial()"> |
| <i class="fas fa-question-circle"></i> |
| <span>Tutorial</span> |
| </div> |
| <div class="menu-item" onclick="showHelp()"> |
| <i class="fas fa-info-circle"></i> |
| <span>Help</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="tutorial-ui" id="tutorialUI"> |
| <div class="tutorial-header"> |
| <h2 class="font-bold text-xl">Game Tutorial</h2> |
| </div> |
| |
| <div class="tutorial-content"> |
| <div class="tutorial-step"> |
| <h3 class="font-bold mb-2">Welcome to WordQuest!</h3> |
| <p class="text-gray-300 mb-3">This is an adventure game where you learn English by completing quests, battling NPCs, and exploring the world.</p> |
| </div> |
| |
| <div class="tutorial-step"> |
| <h3 class="font-bold mb-2">Mission Markers</h3> |
| <p class="text-gray-300 mb-3">Tap on the glowing markers on the map to start missions. Each marker represents a different type of challenge:</p> |
| <div class="flex items-center mb-2"> |
| <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center text-white mr-3"> |
| <i class="fas fa-book"></i> |
| </div> |
| <span>Reading Mission</span> |
| </div> |
| <div class="flex items-center mb-2"> |
| <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center text-white mr-3"> |
| <i class="fas fa-comments"></i> |
| </div> |
| <span>Speaking Mission</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center text-white mr-3"> |
| <i class="fas fa-scroll"></i> |
| </div> |
| <span>Completed Mission</span> |
| </div> |
| </div> |
| |
| <div class="tutorial-step"> |
| <h3 class="font-bold mb-2">Reading Missions</h3> |
| <p class="text-gray-300 mb-3">In reading missions, you'll encounter texts with highlighted words. Tap on these words to learn their meanings.</p> |
| <p class="text-gray-300">Answer comprehension questions correctly to complete the mission and earn rewards.</p> |
| </div> |
| |
| <div class="tutorial-step"> |
| <h3 class="font-bold mb-2">Speaking Missions</h3> |
| <p class="text-gray-300 mb-3">In speaking missions, you'll engage in conversations with NPCs. Choose what to say, then record your response using the microphone button.</p> |
| <p class="text-gray-300">The better your pronunciation and grammar, the more damage you'll do to your opponent!</p> |
| </div> |
| |
| <div class="tutorial-step"> |
| <h3 class="font-bold mb-2">Earning Rewards</h3> |
| <p class="text-gray-300">Complete missions to earn XP, coins, and new words. Use coins to customize your avatar or buy power-ups in the shop.</p> |
| </div> |
| </div> |
| |
| <div class="tutorial-actions"> |
| <button class="tutorial-button primary" onclick="hideTutorial()"> |
| <i class="fas fa-check mr-1"></i> Got it! |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="feedback-correct" id="feedbackCorrect"> |
| <i class="fas fa-check-circle mr-2"></i> Correct! |
| </div> |
| |
| <div class="feedback-incorrect" id="feedbackIncorrect"> |
| <i class="fas fa-times-circle mr-2"></i> Try again! |
| </div> |
| </div> |
|
|
| <script> |
| |
| const gameState = { |
| level: 12, |
| xp: 65, |
| coins: 1245, |
| streak: 5, |
| currentMission: null, |
| inBattle: false, |
| recording: false, |
| powerLevel: 0, |
| powerInterval: null, |
| learnedWords: ['library', 'scroll', 'understand'], |
| dailyQuests: [ |
| { id: 1, title: "Complete 3 missions", progress: 2, target: 3, reward: 50 }, |
| { id: 2, title: "Learn 5 new words", progress: 3, target: 5, reward: 30 }, |
| { id: 3, title: "Maintain 3-day streak", progress: 1, target: 3, reward: 100 } |
| ], |
| inventory: [ |
| { id: 1, name: "Basic Sword", type: "weapon", equipped: true }, |
| { id: 2, name: "Leather Armor", type: "armor", equipped: true }, |
| { id: 3, name: "XP Boost", type: "consumable", quantity: 3 } |
| ], |
| achievements: [ |
| { id: 1, title: "First Mission", description: "Complete your first mission", earned: true }, |
| { id: 2, title: "Word Collector", description: "Learn 10 words", earned: true }, |
| { id: 3, title: "Daily Player", description: "Play for 7 consecutive days", earned: false } |
| ] |
| }; |
| |
| |
| function initGame() { |
| |
| setTimeout(() => { |
| const dialog = document.getElementById('npcDialog'); |
| dialog.style.display = 'block'; |
| setTimeout(() => { |
| dialog.style.opacity = '1'; |
| }, 10); |
| |
| setTimeout(() => { |
| dialog.style.opacity = '0'; |
| setTimeout(() => { |
| dialog.style.display = 'none'; |
| }, 300); |
| }, 3000); |
| }, 1000); |
| |
| |
| const worldMap = document.getElementById('worldMap'); |
| let isDragging = false; |
| let startX, startY, startTranslateX = 0, startTranslateY = 0; |
| |
| worldMap.addEventListener('touchstart', (e) => { |
| if (gameState.currentMission || gameState.inBattle) return; |
| |
| isDragging = true; |
| startX = e.touches[0].clientX; |
| startY = e.touches[0].clientY; |
| const transform = worldMap.style.transform.match(/translate\(([^)]+)\)/); |
| if (transform) { |
| const [x, y] = transform[1].split(',').map(parseFloat); |
| startTranslateX = x || 0; |
| startTranslateY = y || 0; |
| } |
| e.preventDefault(); |
| }); |
| |
| worldMap.addEventListener('touchmove', (e) => { |
| if (!isDragging) return; |
| |
| const x = e.touches[0].clientX; |
| const y = e.touches[0].clientY; |
| const dx = x - startX; |
| const dy = y - startY; |
| |
| worldMap.style.transform = `translate(${startTranslateX + dx}px, ${startTranslateY + dy}px)`; |
| e.preventDefault(); |
| }); |
| |
| worldMap.addEventListener('touchend', () => { |
| isDragging = false; |
| }); |
| |
| |
| if (!localStorage.getItem('wordQuestPlayed')) { |
| setTimeout(() => { |
| showTutorial(); |
| }, 1500); |
| localStorage.setItem('wordQuestPlayed', 'true'); |
| } |
| |
| |
| setTimeout(() => { |
| document.querySelectorAll('.word-highlight').forEach(el => { |
| if (gameState.learnedWords.includes(el.textContent.toLowerCase())) { |
| el.classList.add('learned'); |
| } |
| }); |
| }, 500); |
| } |
| |
| |
| function startMission(missionId) { |
| if (gameState.currentMission || gameState.inBattle) return; |
| |
| gameState.currentMission = missionId; |
| |
| |
| if (missionId === 1) { |
| |
| document.getElementById('missionText').innerHTML = ` |
| In the ancient <span class="word-highlight" onclick="highlightWord('library')">library</span> of Wordoria, there lies a <span class="word-highlight" onclick="highlightWord('mysterious')">mysterious</span> <span class="word-highlight" onclick="highlightWord('scroll')">scroll</span> that has been <span class="word-highlight" onclick="highlightWord('untouched')">untouched</span> for centuries. The <span class="word-highlight" onclick="highlightWord('librarian')">librarian</span> told me that it contains the <span class="word-highlight" onclick="highlightWord('secrets')">secrets</span> of the <span class="word-highlight" onclick="highlightWord('language')">language</span> gods. To <span class="word-highlight" onclick="highlightWord('unlock')">unlock</span> its <span class="word-highlight" onclick="highlightWord('power')">power</span>, you must first <span class="word-highlight" onclick="highlightWord('understand')">understand</span> its contents. |
| |
| <div class="mt-4 p-3 bg-gray-800 rounded-lg"> |
| <h4 class="font-bold mb-2">Comprehension Questions:</h4> |
| <div class="mb-3"> |
| <p class="mb-1">1. Where is the mysterious scroll located?</p> |
| <div class="flex gap-2 mt-1"> |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">In the mountains</button> |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, true)">In the library</button> |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">Under the sea</button> |
| </div> |
| </div> |
| <div> |
| <p class="mb-1">2. What does the scroll contain?</p> |
| <div class="flex gap-2 mt-1"> |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">Treasure maps</button> |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, true)">Language secrets</button> |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">Ancient recipes</button> |
| </div> |
| </div> |
| </div> |
| `; |
| } else if (missionId === 2) { |
| |
| document.getElementById('missionText').innerHTML = ` |
| <div class="flex mb-4"> |
| <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white mr-3"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <div class="bg-gray-700 rounded-lg p-3 flex-1"> |
| <p>Hello traveler! I'm the Guardian of Wordoria. To pass through these gates, you must answer my questions correctly.</p> |
| </div> |
| </div> |
| |
| <div class="flex justify-end mb-4"> |
| <div class="bg-blue-500 rounded-lg p-3 max-w-[80%]"> |
| <p>I'm ready for your questions!</p> |
| </div> |
| </div> |
| |
| <div class="flex mb-4"> |
| <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white mr-3"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <div class="bg-gray-700 rounded-lg p-3 flex-1"> |
| <p class="mb-2">First question: What do you say when you meet someone for the first time?</p> |
| <div class="flex gap-2"> |
| <button class="px-3 py-1 bg-gray-600 rounded-full text-sm" onclick="checkAnswer(this, false)">Goodbye</button> |
| <button class="px-3 py-1 bg-gray-600 rounded-full text-sm" onclick="checkAnswer(this, true)">Hello</button> |
| <button class="px-3 py-1 bg-gray-600 rounded-full text-sm" onclick="checkAnswer(this, false)">Thank you</button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-6"> |
| <button class="px-4 py-2 bg-blue-500 rounded-lg font-bold" onclick="startBattle()"> |
| <i class="fas fa-microphone mr-2"></i> Practice Speaking |
| </button> |
| </div> |
| `; |
| } else { |
| |
| document.getElementById('missionText').innerHTML = ` |
| <div class="bg-gray-800 rounded-lg p-4 mb-4"> |
| <h4 class="font-bold mb-2">Grammar Challenge</h4> |
| <p class="mb-3">Complete the sentences with the correct words:</p> |
| |
| <div class="mb-3"> |
| <p class="mb-1">1. I ___ to the store yesterday.</p> |
| <div class="flex gap-2 mt-1"> |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, true)">went</button> |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">go</button> |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">going</button> |
| </div> |
| </div> |
| |
| <div class="mb-3"> |
| <p class="mb-1">2. She ___ a book right now.</p> |
| <div class="flex gap-2 mt-1"> |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">read</button> |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, true)">is reading</button> |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">reads</button> |
| </div> |
| </div> |
| |
| <div> |
| <p class="mb-1">3. They ___ happy to see you.</p> |
| <div class="flex gap-2 mt-1"> |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, true)">are</button> |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">is</button> |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">am</button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center"> |
| <p class="text-sm text-gray-300">Complete 3 more challenges to unlock the next area!</p> |
| </div> |
| `; |
| } |
| |
| |
| setTimeout(() => { |
| document.querySelectorAll('.word-highlight').forEach(el => { |
| if (gameState.learnedWords.includes(el.textContent.toLowerCase())) { |
| el.classList.add('learned'); |
| } |
| }); |
| }, 10); |
| |
| document.getElementById('missionUI').classList.add('active'); |
| } |
| |
| |
| function hideMission() { |
| document.getElementById('missionUI').classList.remove('active'); |
| gameState.currentMission = null; |
| } |
| |
| |
| function completeMission() { |
| hideMission(); |
| showReward(); |
| |
| |
| if (gameState.currentMission === 2) { |
| document.querySelector('.mission-marker.active').classList.remove('active'); |
| document.querySelector('.mission-marker.active').classList.add('completed'); |
| } |
| |
| |
| gameState.dailyQuests[0].progress += 1; |
| } |
| |
| |
| function highlightWord(word) { |
| const element = event.target; |
| element.classList.add('active'); |
| |
| |
| const tooltip = document.createElement('div'); |
| tooltip.className = 'absolute bg-black text-white text-xs px-2 py-1 rounded whitespace-nowrap'; |
| tooltip.textContent = `Translated: ${word}`; |
| tooltip.style.top = `${element.getBoundingClientRect().top - 30}px`; |
| tooltip.style.left = `${element.getBoundingClientRect().left}px`; |
| tooltip.style.zIndex = '1000'; |
| document.body.appendChild(tooltip); |
| |
| |
| if (!gameState.learnedWords.includes(word.toLowerCase())) { |
| gameState.learnedWords.push(word.toLowerCase()); |
| element.classList.add('learned'); |
| |
| |
| gameState.dailyQuests[1].progress += 1; |
| } |
| |
| setTimeout(() => { |
| element.classList.remove('active'); |
| tooltip.remove(); |
| }, 2000); |
| } |
| |
| |
| function checkAnswer(button, isCorrect) { |
| const allButtons = button.parentElement.querySelectorAll('button'); |
| allButtons.forEach(btn => { |
| btn.disabled = true; |
| btn.classList.remove('bg-green-500', 'bg-red-500', 'text-white'); |
| }); |
| |
| if (isCorrect) { |
| button.classList.add('bg-green-500', 'text-white'); |
| |
| |
| const check = document.createElement('i'); |
| check.className = 'fas fa-check ml-1'; |
| button.appendChild(check); |
| |
| |
| showFeedback(true); |
| } else { |
| button.classList.add('bg-red-500', 'text-white'); |
| |
| |
| const x = document.createElement('i'); |
| x.className = 'fas fa-times ml-1'; |
| button.appendChild(x); |
| |
| |
| allButtons.forEach(btn => { |
| if (btn.getAttribute('onclick').includes('true')) { |
| btn.classList.add('bg-green-500', 'text-white'); |
| } |
| }); |
| |
| |
| showFeedback(false); |
| } |
| } |
| |
| |
| function showFeedback(isCorrect) { |
| const feedback = document.getElementById(isCorrect ? 'feedbackCorrect' : 'feedbackIncorrect'); |
| feedback.style.display = 'block'; |
| setTimeout(() => { |
| feedback.style.transform = 'translate(-50%, -50%) scale(1)'; |
| feedback.style.opacity = '1'; |
| }, 10); |
| |
| setTimeout(() => { |
| feedback.style.opacity = '0'; |
| setTimeout(() => { |
| feedback.style.display = 'none'; |
| feedback.style.transform = 'translate(-50%, -50%) scale(0)'; |
| }, 500); |
| }, 1000); |
| } |
| |
| |
| function startBattle() { |
| gameState.inBattle = true; |
| document.getElementById('battleUI').classList.add('active'); |
| } |
| |
| |
| function endBattle() { |
| gameState.inBattle = false; |
| document.getElementById('battleUI').classList.remove('active'); |
| showReward(); |
| } |
| |
| |
| function selectDialogue(option) { |
| const options = document.querySelectorAll('.dialogue-option'); |
| options.forEach(opt => { |
| opt.classList.remove('bg-blue-500', 'text-white'); |
| }); |
| |
| event.target.classList.add('bg-blue-500', 'text-white'); |
| |
| |
| const npcAvatar = document.querySelector('.npc-avatar'); |
| npcAvatar.innerHTML = '<i class="fas fa-comment-dots"></i>'; |
| |
| setTimeout(() => { |
| npcAvatar.innerHTML = '<i class="fas fa-dragon"></i>'; |
| }, 1000); |
| } |
| |
| |
| function toggleRecording() { |
| const micButton = document.getElementById('micButton'); |
| |
| if (gameState.recording) { |
| |
| gameState.recording = false; |
| micButton.classList.remove('active'); |
| clearInterval(gameState.powerInterval); |
| |
| |
| setTimeout(() => { |
| const powerBar = document.getElementById('powerBar'); |
| const score = Math.min(100, Math.floor(gameState.powerLevel * 1.5)); |
| powerBar.style.width = `${score}%`; |
| |
| |
| let result = ''; |
| const npcAvatar = document.querySelector('.npc-avatar'); |
| if (score > 80) { |
| result = 'Perfect! Critical hit!'; |
| npcAvatar.innerHTML = '<i class="fas fa-heart-broken"></i>'; |
| showFeedback(true); |
| } else if (score > 50) { |
| result = 'Good! The enemy is weakened.'; |
| npcAvatar.innerHTML = '<i class="fas fa-frown"></i>'; |
| showFeedback(true); |
| } else { |
| result = 'Needs improvement. Try again!'; |
| npcAvatar.innerHTML = '<i class="fas fa-grin"></i>'; |
| showFeedback(false); |
| } |
| |
| |
| setTimeout(() => { |
| npcAvatar.innerHTML = '<i class="fas fa-dragon"></i>'; |
| powerBar.style.width = '0%'; |
| gameState.powerLevel = 0; |
| |
| |
| if (score > 50) { |
| setTimeout(endBattle, 1000); |
| } |
| }, 2000); |
| }, 500); |
| } else { |
| |
| gameState.recording = true; |
| micButton.classList.add('active'); |
| gameState.powerLevel = 0; |
| |
| |
| gameState.powerInterval = setInterval(() => { |
| gameState.powerLevel += Math.random() * 5; |
| const powerBar = document.getElementById('powerBar'); |
| powerBar.style.width = `${Math.min(100, gameState.powerLevel)}%`; |
| }, 100); |
| } |
| } |
| |
| |
| function showReward() { |
| |
| for (let i = 0; i < 50; i++) { |
| const confetti = document.createElement('div'); |
| confetti.className = 'confetti'; |
| confetti.style.left = `${Math.random() * 100}%`; |
| confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`; |
| confetti.style.animationDuration = `${2 + Math.random() * 3}s`; |
| document.body.appendChild(confetti); |
| |
| setTimeout(() => { |
| confetti.remove(); |
| }, 5000); |
| } |
| |
| document.getElementById('rewardPopup').style.display = 'block'; |
| setTimeout(() => { |
| document.getElementById('rewardPopup').style.transform = 'translate(-50%, -50%) scale(1)'; |
| document.getElementById('rewardPopup').style.opacity = '1'; |
| }, 10); |
| } |
| |
| |
| function hideReward() { |
| document.getElementById('rewardPopup').style.opacity = '0'; |
| setTimeout(() => { |
| document.getElementById('rewardPopup').style.display = 'none'; |
| document.getElementById('rewardPopup').style.transform = 'translate(-50%, -50%) scale(0)'; |
| }, 300); |
| } |
| |
| |
| function toggleMenu() { |
| const menu = document.getElementById('menuUI'); |
| if (menu.classList.contains('active')) { |
| menu.classList.remove('active'); |
| } else { |
| menu.classList.add('active'); |
| } |
| } |
| |
| |
| function showTutorial() { |
| document.getElementById('tutorialUI').classList.add('active'); |
| } |
| |
| |
| function hideTutorial() { |
| document.getElementById('tutorialUI').classList.remove('active'); |
| } |
| |
| |
| function showPlayerStats() { |
| alert(`Player Stats:\nLevel: ${gameState.level}\nXP: ${gameState.xp}%\nCoins: ${gameState.coins}\nStreak: ${gameState.streak} days\nWords Learned: ${gameState.learnedWords.length}`); |
| } |
| |
| |
| function showShop() { |
| alert("Shop UI would open here with items to purchase using coins"); |
| } |
| |
| |
| function showStreakInfo() { |
| alert(`Daily Login Streak: ${gameState.streak} days\n\nMaintain your streak to earn bonus rewards!`); |
| } |
| |
| |
| function showInventory() { |
| let inventoryText = "Your Inventory:\n"; |
| gameState.inventory.forEach(item => { |
| inventoryText += `- ${item.name} (${item.type})`; |
| if (item.quantity) inventoryText += ` x${item.quantity}`; |
| if (item.equipped) inventoryText += " [EQUIPPED]"; |
| inventoryText += "\n"; |
| }); |
| alert(inventoryText); |
| toggleMenu(); |
| } |
| |
| |
| function showAchievements() { |
| let achievementsText = "Your Achievements:\n"; |
| gameState.achievements.forEach(ach => { |
| achievementsText += `- ${ach.title}: ${ach.description} `; |
| achievementsText += ach.earned ? "✓\n" : "🔒\n"; |
| }); |
| alert(achievementsText); |
| toggleMenu(); |
| } |
| |
| |
| function showQuests() { |
| let questsText = "Daily Quests:\n"; |
| gameState.dailyQuests.forEach(quest => { |
| questsText += `- ${quest.title}: ${quest.progress}/${quest.target} `; |
| questsText += `(Reward: ${quest.reward} coins)\n`; |
| }); |
| alert(questsText); |
| toggleMenu(); |
| } |
| |
| |
| function showSettings() { |
| alert("Settings UI would open here with audio, language, and account options"); |
| toggleMenu(); |
| } |
| |
| |
| function showHelp() { |
| alert("Help UI would open here with FAQs and support contact"); |
| toggleMenu(); |
| } |
| |
| |
| window.addEventListener('DOMContentLoaded', initGame); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ThiagoGM/learn2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
