优化

static/js/main.js

@@ -157,8 +157,8 @@ createApp({
                 this.x = window.innerWidth / 2;
                 this.y = window.innerHeight + 200;
                 this.angle = -Math.PI / 2;
-                this.scale = 1.5; // Smaller, more refined
-                this.state = 'IDLE'; // IDLE, FOLLOW, CHARGING, SLASHING
+                this.scale = 1.5;
+                this.state = 'IDLE'; 
                 
                 // Spirit Particles
                 this.spirits = [];
@@ -183,7 +183,7 @@ createApp({
                 }
 
                 // Position
-                const ease = 0.15;
+                const ease = 0.2; // Slightly faster for better responsiveness
                 this.x += dx * ease;
                 this.y += dy * ease;
 
@@ -343,8 +343,11 @@ createApp({
             loading.value = false;
             if (!canvasElement.value) return;
 
-            canvasElement.value.width = window.innerWidth;
-            canvasElement.value.height = window.innerHeight;
+            // Optimize: Only resize if dimensions changed
+            if (canvasElement.value.width !== window.innerWidth || canvasElement.value.height !== window.innerHeight) {
+                canvasElement.value.width = window.innerWidth;
+                canvasElement.value.height = window.innerHeight;
+            }
 
             // Screen Shake
             let shakeX = 0;
@@ -374,11 +377,14 @@ createApp({
             canvasCtx.globalAlpha = 1.0;
 
             // Hand & Gesture Logic
-            let targetX = sword ? sword.x : window.innerWidth / 2;
-            let targetY = sword ? sword.y : window.innerHeight + 300;
+            const hasHand = results.multiHandLandmarks && results.multiHandLandmarks.length > 0;
+            
+            // Default target (when no hand): Center of screen
+            let targetX = window.innerWidth / 2;
+            let targetY = window.innerHeight / 2;
             let detectedGesture = 'NONE';
 
-            if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
+            if (hasHand) {
                 const lm = results.multiHandLandmarks[0];
                 const isFingerExtended = (tipIdx, pipIdx) => lm[tipIdx].y < lm[pipIdx].y;
                 
@@ -411,56 +417,65 @@ createApp({
                 lastGesture = detectedGesture;
             }
 
-            // Init Sword
-            if (!sword) {
+            // Init Sword Logic: Only create if hand is detected
+            if (hasHand && !sword) {
                 sword = new Sword();
-                for(let i=0; i<80; i++) {
-                    stars.push({
-                        x: Math.random() * window.innerWidth,
-                        y: Math.random() * window.innerHeight,
-                        size: Math.random() * 2,
-                        opacity: Math.random() * 0.5
-                    });
+                // Spawn at the bottom (off-screen) to animate "Sword Coming"
+                sword.x = window.innerWidth / 2;
+                sword.y = window.innerHeight + 200; 
+                
+                // Initialize stars if not already done
+                if (stars.length === 0) {
+                    for(let i=0; i<80; i++) {
+                        stars.push({
+                            x: Math.random() * window.innerWidth,
+                            y: Math.random() * window.innerHeight,
+                            size: Math.random() * 2,
+                            opacity: Math.random() * 0.5
+                        });
+                    }
                 }
             }
 
             // State Machine
             const STABLE = 5;
 
-            if (gestureTimer > STABLE) {
-                if (detectedGesture === 'SWORD_FINGER') {
-                    // Charging State
-                    sword.state = 'CHARGING';
-                    if (chargeLevel < 1.0) {
-                        chargeLevel += 0.02;
-                        if (Math.random() < 0.2) playSound('CHARGE');
-                    }
-                } else if (detectedGesture === 'OPEN_PALM') {
-                    // If Charged, Trigger SPLIT
-                    if (chargeLevel > 0.8) {
-                        if (!riftEffect) {
-                            riftEffect = new RiftEffect();
-                            shockwave = 1.0;
-                            playSound('SLASH');
-                            // Sparks
-                            for(let i=0; i<100; i++) {
-                                particles.push(new Particle(targetX, targetY, 'SPARK'));
+            if (sword) {
+                if (gestureTimer > STABLE) {
+                    if (detectedGesture === 'SWORD_FINGER') {
+                        // Charging State
+                        sword.state = 'CHARGING';
+                        if (chargeLevel < 1.0) {
+                            chargeLevel += 0.02;
+                            if (Math.random() < 0.2) playSound('CHARGE');
+                        }
+                    } else if (detectedGesture === 'OPEN_PALM') {
+                        // If Charged, Trigger SPLIT
+                        if (chargeLevel > 0.8) {
+                            if (!riftEffect) {
+                                riftEffect = new RiftEffect();
+                                shockwave = 1.0;
+                                playSound('SLASH');
+                                // Sparks
+                                for(let i=0; i<100; i++) {
+                                    particles.push(new Particle(targetX, targetY, 'SPARK'));
+                                }
+                                chargeLevel = 0; // Reset
                             }
-                            chargeLevel = 0; // Reset
+                        } else {
+                            // Just Follow
+                            sword.state = 'FOLLOW';
+                            chargeLevel = Math.max(0, chargeLevel - 0.05);
                         }
                     } else {
-                        // Just Follow
-                        sword.state = 'FOLLOW';
+                        sword.state = 'IDLE';
                         chargeLevel = Math.max(0, chargeLevel - 0.05);
                     }
-                } else {
-                    sword.state = 'IDLE';
-                    chargeLevel = Math.max(0, chargeLevel - 0.05);
                 }
-            }
 
-            // Update Sword
-            sword.update(targetX, targetY);
+                // Update Sword
+                sword.update(targetX, targetY);
+            }
 
             // Draw Rift (Behind Sword or Front? Front is better for "Split Sky")
             if (riftEffect) {
@@ -471,13 +486,15 @@ createApp({
 
             // Particles
             particles.forEach((p, i) => {
-                p.update(sword.x, sword.y);
+                p.update(sword ? sword.x : 0, sword ? sword.y : 0);
                 p.draw(canvasCtx);
                 if (p.life <= 0 && p.type !== 'SPIRIT') particles.splice(i, 1);
             });
 
             // Draw Sword
-            sword.draw(canvasCtx);
+            if (sword) {
+                sword.draw(canvasCtx);
+            }
 
             canvasCtx.restore();
         };

templates/index.html

@@ -37,7 +37,7 @@
         
         <!-- UI Layer -->
         <div class="ui-layer flex flex-col justify-between p-4">
-            <div class="text-center mt-4">
+            <div class="text-center mt-10">
                 <h1 class="text-3xl md:text-5xl font-bold text-white tracking-widest title-text opacity-80">剑 来 · 开 天</h1>
                 <p class="text-gray-300 text-xs md:text-sm mt-2 opacity-60">剑指聚气，挥掌开天</p>
             </div>