Upload 2 files

function.html

@@ -208,6 +208,18 @@
     <!-- Background Canvas -->
     <canvas id="gameCanvas"></canvas>
 
+    <!-- UI HUD -->
+    <div class="fixed top-4 right-4 z-50">
+        <a href="index.html"
+            class="glass-panel rounded-xl px-3 py-2 flex items-center justify-center text-amber-400 hover:bg-slate-800 transition-colors border border-amber-500/30 pointer-events-auto shadow-lg bg-slate-900/80">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+            </svg>
+        </a>
+    </div>
+
     <!-- Main UI Container -->
     <div id="ui-container" class="fixed inset-0 z-10 pointer-events-none">
         <!-- 
@@ -299,14 +311,74 @@
             targetInput: null,
             init: function () {
                 this.element = document.getElementById('virtual-keypad');
+                // Prevent click bubbling from keypad to document (stops accidental closes if logic fails)
+                this.element.addEventListener('click', (e) => e.stopPropagation());
+
                 // Auto-close when clicking outside
                 document.addEventListener('click', (e) => {
                     if (this.element.classList.contains('active') &&
                         !this.element.contains(e.target) &&
-                        e.target !== this.targetInput) {
+                        e.target !== this.targetInput &&
+                        !e.target.classList.contains('keypad-btn')) {
                         this.close();
                     }
                 });
+
+                // --- Drag Logic ---
+                const handle = this.element.querySelector('.keypad-handle');
+                this.isDragging = false;
+                this.startX = 0; this.startY = 0;
+                this.offsetX = 0; this.offsetY = 0;
+
+                const startDrag = (e) => {
+                    // Prevent text selection/scrolling on touch
+                    if (e.type === 'touchstart' && e.cancelable) e.preventDefault();
+
+                    this.isDragging = true;
+                    this.element.classList.add('dragging');
+
+                    const clientX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
+                    const clientY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY;
+
+                    const rect = this.element.getBoundingClientRect();
+                    this.offsetX = clientX - rect.left;
+                    this.offsetY = clientY - rect.top;
+
+                    // Add listeners to document for smooth dragging outside element
+                    document.addEventListener(e.type.includes('mouse') ? 'mousemove' : 'touchmove', doDrag, { passive: false });
+                    document.addEventListener(e.type.includes('mouse') ? 'mouseup' : 'touchend', endDrag);
+                };
+
+                const doDrag = (e) => {
+                    if (!this.isDragging) return;
+                    e.preventDefault(); // Critical for stopping scroll on mobile
+
+                    const clientX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
+                    const clientY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY;
+
+                    // Absolute positioning
+                    this.element.style.transform = 'none';
+                    this.element.style.bottom = 'auto'; // Clear bottom
+                    this.element.style.right = 'auto';  // Clear right
+                    this.element.style.left = (clientX - this.offsetX) + 'px';
+                    this.element.style.top = (clientY - this.offsetY) + 'px';
+                };
+
+                const endDrag = (e) => {
+                    this.isDragging = false;
+                    this.element.classList.remove('dragging');
+                    document.removeEventListener('mousemove', doDrag);
+                    document.removeEventListener('touchmove', doDrag);
+                    document.removeEventListener('mouseup', endDrag);
+                    document.removeEventListener('touchend', endDrag);
+                };
+
+                // Attach start listeners
+                if (handle) {
+                    handle.addEventListener('mousedown', startDrag);
+                    handle.addEventListener('touchstart', startDrag, { passive: false });
+                    handle.style.cursor = 'grab';
+                }
             },
             open: function (inputElement) {
                 this.targetInput = inputElement;
@@ -680,6 +752,7 @@
 
         // --- State Management ---
         function enterPhase(phase) {
+            if (window.keypad) keypad.close(); // Auto-close keypad on any phase change
             currentState = phase;
             updateUI();
         }
@@ -747,8 +820,8 @@
                              <div class="font-tech text-3xl md:text-6xl mb-6">
                                 <span class="text-cyan-400">y</span> = 2<span class="text-amber-400">x</span> + 3
                             </div>
-                            <p class="text-slate-300 text-xl md:text-4xl leading-relaxed font-bold">
-                                每投入 <span class="text-amber-400 font-bold text-4xl md:text-7xl mx-2 border-b-2 border-amber-400/50">x</span> 顆晶石，<br>就會產生 <span class="text-cyan-400 font-bold text-4xl md:text-7xl mx-2 border-b-2 border-cyan-400/50">y</span> 點電力。
+                            <p class="text-slate-300 text-lg md:text-xl leading-relaxed font-bold">
+                                每投入 <span class="text-amber-400 font-bold text-2xl md:text-4xl mx-2 border-b-2 border-amber-400/50">x</span> 顆晶石，<br>就會產生 <span class="text-cyan-400 font-bold text-2xl md:text-4xl mx-2 border-b-2 border-cyan-400/50">y</span> 點電力。
                             </p>
                         </div>
                         <button onclick="startQPhase()" class="w-full py-5 bg-slate-700 hover:bg-slate-600 text-white rounded-xl font-bold text-xl border border-slate-500">
@@ -787,7 +860,7 @@
                                 <div class="text-slate-400 font-bold text-xl border-b border-slate-500/30 pb-2">2. 坐標描點</div>
                                 <div class="bg-slate-800/30 p-4 rounded-xl border border-slate-700/30 flex flex-col items-center justify-center flex-grow">
                                     <div class="text-sm text-slate-500 mb-1">對應座標</div>
-                                    <div class="font-tech text-xl md:text-3xl font-bold text-slate-500">
+                                    <div class="font-tech text-lg md:text-xl font-bold text-slate-500">
                                         (<span class="text-amber-400">${xVal}</span>, <span class="text-cyan-400">y</span>)
                                     </div>
                                 </div>
@@ -922,16 +995,16 @@
                 case STATE.SUCCESS:
                     html = `
                         <div class="text-center">
-                            <h2 class="text-4xl font-bold text-green-400 mb-2 font-tech">SYSTEM STABILIZED</h2>
+                            <h2 class="text-2xl md:text-2xl font-bold text-green-400 mb-2 font-tech">SYSTEM STABILIZED</h2>
                             <p class="text-slate-300 mb-6 text-xl">預測成功！核心運作恢復正常。</p>
                             
                             <!-- Teaching Content -->
                             <div class="bg-slate-800/80 p-4 rounded-xl border border-cyan-500/30 mb-6 text-left">
-                                <h3 class="text-lg md:text-3xl font-bold text-white mb-2 text-center">任務小結：什麼是「函數」？</h3>
-                                <p class="text-slate-200 text-base md:text-2xl leading-relaxed mb-3">
-                                    剛剛我們使用的「能量轉換法則」，在數學上就叫做<span class="text-amber-400 font-bold text-xl md:text-3xl mx-1">「函數」(Function)</span>。
+                                <h3 class="text-lg md:text-2xl font-bold text-white mb-2 text-center">任務小結：什麼是「函數」？</h3>
+                                <p class="text-slate-200 text-base md:text-xl leading-relaxed mb-3">
+                                    剛剛我們使用的「能量轉換法則」，在數學上就叫做<span class="text-amber-400 font-bold text-xl md:text-2xl mx-1">「函數」(Function)</span>。
                                 </p>
-                                <p class="text-slate-300 text-base md:text-2xl leading-relaxed">
+                                <p class="text-slate-300 text-base md:text-xl leading-relaxed">
                                     函數就像一座<span class="text-cyan-400 font-bold">工廠</span>：<br>
                                     它會把原料 <span class="font-bold text-amber-400">x (晶石)</span>，藉由固定的規則，<br>轉換成產品 <span class="font-bold text-cyan-400">y (電力)</span>。
                                 </p>
@@ -1142,10 +1215,10 @@
 
                     html = `
                         <div class="text-center w-full h-full flex flex-col items-center">
-                            <h2 class="text-2xl md:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-green-400 mb-6 drop-shadow-[0_0_15px_rgba(34,211,238,0.6)] tracking-widest">
+                            <h2 class="text-xl md:text-2xl font-black text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-green-400 mb-6 drop-shadow-[0_0_15px_rgba(34,211,238,0.6)] tracking-widest">
                                 任務完成 SYSTEM RESTORED
                             </h2>
-                            <div class="text-amber-400 font-tech text-lg md:text-4xl mb-10 tracking-[0.5em]">MISSION ACCOMPLISHED</div>
+                            <div class="text-amber-400 font-tech text-base md:text-2xl mb-10 tracking-[0.5em]">MISSION ACCOMPLISHED</div>
 
                             <!-- Score Board -->
                             <div class="flex gap-16 mb-10 bg-slate-800/80 px-16 py-8 rounded-3xl border-2 border-slate-600 transform scale-110">
@@ -1232,6 +1305,7 @@
 
         // --- Logic Operations ---
         function startQPhase() {
+            if (window.keypad) keypad.close();
             qStep = 0;
             enterPhase(STATE.PHASE2_Q);
         }
@@ -1436,6 +1510,7 @@
             if (val === 35) {
                 playSound('success');
                 // Auto verification visual
+                if (window.keypad) keypad.close();
                 addPoint(10, 35);
                 updateUI("預測正確！投入 10 顆晶石，電力確實為 35！<br><span class='text-amber-400 text-base'>(確認點連成一線...)</span>");
 
@@ -1471,6 +1546,7 @@
             const b = parseInt(document.getElementById('final-b').value);
 
             if (a === 3 && b === 5) {
+                if (window.keypad) keypad.close();
                 playSound('success');
                 // Instead of alert, go to Phase 6
                 enterPhase(STATE.PHASE6_INTRO);
@@ -1650,9 +1726,10 @@
                 rhythmState.combo++;
                 spawnFloatingText("PERFECT! +10%", '#fbbf24'); // Gold
                 playSound('hit_perfect');
+                playSound('hit_perfect');
             } else {
                 rhythmState.energy = Math.min(100, rhythmState.energy + 5);
-                rhythmState.score += 100;
+                rhythmState.score += 50; // User Request: 50 points for GOOD
                 rhythmState.combo++;
                 spawnFloatingText("GOOD +5%", '#22d3ee'); // Blue
                 playSound('hit_good');

sequence.html

@@ -921,6 +921,9 @@
             targetInput: null,
             init: function () {
                 this.element = document.getElementById('virtual-keypad');
+                // Prevent click bubbling from keypad to document (stops accidental closes if logic fails)
+                this.element.addEventListener('click', (e) => e.stopPropagation());
+
                 // Auto-close when clicking outside
                 document.addEventListener('click', (e) => {
                     if (this.element.classList.contains('active') &&
@@ -930,6 +933,60 @@
                         this.close();
                     }
                 });
+
+                // --- Drag Logic ---
+                const handle = this.element.querySelector('.keypad-handle');
+                this.isDragging = false;
+                this.startX = 0; this.startY = 0;
+                this.offsetX = 0; this.offsetY = 0;
+
+                const startDrag = (e) => {
+                    // Prevent text selection/scrolling on touch
+                    if (e.type === 'touchstart' && e.cancelable) e.preventDefault();
+
+                    this.isDragging = true;
+                    this.element.classList.add('dragging');
+
+                    const clientX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
+                    const clientY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY;
+
+                    const rect = this.element.getBoundingClientRect();
+                    this.offsetX = clientX - rect.left;
+                    this.offsetY = clientY - rect.top;
+
+                    // Add listeners to document
+                    document.addEventListener(e.type.includes('mouse') ? 'mousemove' : 'touchmove', doDrag, { passive: false });
+                    document.addEventListener(e.type.includes('mouse') ? 'mouseup' : 'touchend', endDrag);
+                };
+
+                const doDrag = (e) => {
+                    if (!this.isDragging) return;
+                    e.preventDefault();
+
+                    const clientX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
+                    const clientY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY;
+
+                    this.element.style.transform = 'none';
+                    this.element.style.bottom = 'auto';
+                    this.element.style.right = 'auto';
+                    this.element.style.left = (clientX - this.offsetX) + 'px';
+                    this.element.style.top = (clientY - this.offsetY) + 'px';
+                };
+
+                const endDrag = (e) => {
+                    this.isDragging = false;
+                    this.element.classList.remove('dragging');
+                    document.removeEventListener('mousemove', doDrag);
+                    document.removeEventListener('touchmove', doDrag);
+                    document.removeEventListener('mouseup', endDrag);
+                    document.removeEventListener('touchend', endDrag);
+                };
+
+                if (handle) {
+                    handle.addEventListener('mousedown', startDrag);
+                    handle.addEventListener('touchstart', startDrag, { passive: false });
+                    handle.style.cursor = 'grab';
+                }
             },
             open: function (inputElement) {
                 this.targetInput = inputElement;
@@ -999,24 +1056,49 @@
 
         // --- Tutorial ---
         function startTutorial() {
+            if (window.keypad) keypad.close(); // Auto-close
             gameState = STATE.TUTORIAL;
             document.getElementById('ui-hud').classList.remove('hidden');
             document.getElementById('ui-tutorial').classList.remove('hidden');
             resetWorld();
             const groundY = height * 0.7;
+
+            // Standard Platform: 0 to 1000
             platforms.push({ x: 0, y: groundY, w: 1000, h: 40, type: 'safe', visited: true });
-            player.x = 200; player.y = groundY - 54; player.isGrounded = true; player.prevY = player.y; cameraX = 0; cameraY = 0;
-            checkpoints = [{ x: 600, y: groundY - 60, w: 40, h: 60, active: true, type: 'right' }];
+
+            // Player Start (Fixed 200)
+            player.x = 200;
+            player.y = groundY - 54;
+            player.isGrounded = true; player.prevY = player.y; cameraX = 0; cameraY = 0;
+
+            // Checkpoint Right (Fixed 800) - Guaranteed on platform
+            checkpoints = [{ x: 800, y: groundY - 40, w: 40, h: 40, active: true, type: 'right' }];
+
             tutorial.step = 0;
             updateTutorialUI("基礎移動", "請往右移動，觸碰黃色光柱");
             if (!isLooping) { lastTime = performance.now(); loop(lastTime); }
         }
 
         function advanceTutorialToLeft() {
+            if (window.keypad) keypad.close(); // Auto-close
             playSound('collect');
             tutorial.step = 1; checkpoints = [];
-            const groundY = height * 0.7;
-            checkpoints.push({ x: 200, y: groundY - 60, w: 40, h: 60, active: true, type: 'left' });
+
+            // Fix Floating Issue: Find the actual existing safe platform
+            // Do NOT recalculate from height * 0.7 which might change on resize
+            const platform = platforms.find(p => p.type === 'safe' && p.x === 0);
+            const groundY = platform ? platform.y : height * 0.7;
+
+            // Checkpoint Left (Fixed 200) - Symmetric to Start (800)
+            checkpoints.push({
+                x: 200,
+                y: groundY - 40,
+                w: 40,
+                h: 40,
+                active: true,
+                type: 'left'
+            });
+
             updateTutorialUI("折返跑", "做得好！現在請折返往左移動");
         }
 
@@ -1030,14 +1112,23 @@
             const startX = Math.max(player.x + 400, 600);
             const groundY = height * 0.7;
 
-            // Create a long platform for the training
-            platforms.push({ x: startX - 200, y: groundY, w: 1500, h: 40, type: 'safe' });
+            // Create a MASSIVE platform to prevent falling anywhere
+            platforms.push({ x: -2000, y: groundY, w: 6000, h: 40, type: 'safe' });
+
+            // FORCE Player Stats to prevent falling (Feedback #2)
+            player.y = groundY - player.h - 1;
+            player.vy = 0;
+            player.isGrounded = true;
+            player.isJumping = false;
+
+            // Recalculate startX based on new platform start
+            const safeStartX = player.x + 300;
 
             // Adjusted Heights: Restored to enforce Double/Triple jumps
             // 140 (Single), 290 (Double Only), 430 (Triple Only)
-            tutorialObjects.push({ x: startX, y: groundY - 140, w: 50, h: 50, type: 'target_jump', id: 1, hit: false, color: '#facc15', label: '1' }); // Yellow-400
-            tutorialObjects.push({ x: startX + 300, y: groundY - 290, w: 50, h: 50, type: 'target_jump', id: 2, hit: false, color: '#fbbf24', label: '2' }); // Amber-400
-            tutorialObjects.push({ x: startX + 600, y: groundY - 430, w: 50, h: 50, type: 'target_jump', id: 3, hit: false, color: '#f59e0b', label: '3' }); // Amber-500
+            tutorialObjects.push({ x: safeStartX, y: groundY - 140, w: 50, h: 50, type: 'target_jump', id: 1, hit: false, color: '#facc15', label: '1' }); // Yellow-400
+            tutorialObjects.push({ x: safeStartX + 300, y: groundY - 290, w: 50, h: 50, type: 'target_jump', id: 2, hit: false, color: '#fbbf24', label: '2' }); // Amber-400
+            tutorialObjects.push({ x: safeStartX + 600, y: groundY - 430, w: 50, h: 50, type: 'target_jump', id: 3, hit: false, color: '#f59e0b', label: '3' }); // Amber-500
         }
 
         // --- Quiz ---