add music, better sync, particles

static/js/particles.js

@@ -0,0 +1,88 @@
+// Globale Partikel-Liste (muss in state.js bekannt sein oder hier exportiert)
+// Wir nutzen die globale Variable 'particles' (fügen wir gleich in state.js hinzu)
+
+class Particle {
+    constructor(x, y, type) {
+        this.x = x;
+        this.y = y;
+        this.life = 1.0; // 1.0 = 100% Leben
+        this.type = type; // 'dust', 'sparkle', 'explosion'
+
+        // Zufällige Geschwindigkeit
+        const angle = Math.random() * Math.PI * 2;
+        let speed = Math.random() * 2;
+
+        if (type === 'dust') {
+            // Staub fliegt eher nach oben/hinten
+            this.vx = -2 + Math.random();
+            this.vy = -1 - Math.random();
+            this.decay = 0.05; // Verschwindet schnell
+            this.color = '#ddd';
+            this.size = Math.random() * 4 + 2;
+        }
+        else if (type === 'sparkle') {
+            // Münzen glitzern in alle Richtungen
+            speed = Math.random() * 4 + 2;
+            this.vx = Math.cos(angle) * speed;
+            this.vy = Math.sin(angle) * speed;
+            this.decay = 0.03;
+            this.color = '#ffcc00';
+            this.size = Math.random() * 3 + 1;
+        }
+        else if (type === 'explosion') {
+            // Tod
+            speed = Math.random() * 6 + 2;
+            this.vx = Math.cos(angle) * speed;
+            this.vy = Math.sin(angle) * speed;
+            this.decay = 0.02;
+            this.color = Math.random() > 0.5 ? '#ff4444' : '#ffaa00';
+            this.size = Math.random() * 6 + 3;
+        }
+    }
+
+    update() {
+        this.x += this.vx;
+        this.y += this.vy;
+
+        // Physik
+        if (this.type !== 'sparkle') this.vy += 0.2; // Schwerkraft für Staub/Explosion
+
+        // Reibung
+        this.vx *= 0.95;
+        this.vy *= 0.95;
+
+        this.life -= this.decay;
+    }
+
+    draw(ctx) {
+        ctx.globalAlpha = this.life;
+        ctx.fillStyle = this.color;
+
+        // Quadratische Partikel (schneller zu zeichnen)
+        ctx.fillRect(this.x, this.y, this.size, this.size);
+
+        ctx.globalAlpha = 1.0;
+    }
+}
+
+// --- API ---
+
+function spawnParticles(x, y, type, count = 5) {
+    for(let i=0; i<count; i++) {
+        particles.push(new Particle(x, y, type));
+    }
+}
+
+function updateParticles() {
+    // Rückwärts loopen zum sicheren Löschen
+    for (let i = particles.length - 1; i >= 0; i--) {
+        particles[i].update();
+        if (particles[i].life <= 0) {
+            particles.splice(i, 1);
+        }
+    }
+}
+
+function drawParticles() {
+    particles.forEach(p => p.draw(ctx));
+}