Optimierte Grafiken mit Canvas-Detail

index.html

@@ -374,17 +374,40 @@
             // Startzone (Gras)
             ctx.fillStyle = '#4CAF50';
             ctx.fillRect(0, canvas.height - 100, canvas.width, 50);
+            // Grasdetails
+            ctx.fillStyle = '#388E3C';
+            for (let i = 0; i < canvas.width; i += 30) {
+                ctx.fillRect(i, canvas.height - 90, 5, 5);
+                ctx.fillRect(i + 15, canvas.height - 95, 5, 5);
+            }
             
             // Zielzone (Gras oben)
             ctx.fillStyle = '#4CAF50';
             ctx.fillRect(0, 0, canvas.width, 50);
             ctx.fillStyle = '#2E7D32';
             ctx.fillText('🏆 ZIEL 🏆', canvas.width/2 - 50, 30);
+            // Grasdetails
+            ctx.fillStyle = '#388E3C';
+            for (let i = 0; i < canvas.width; i += 30) {
+                ctx.fillRect(i, 10, 5, 5);
+                ctx.fillRect(i + 15, 5, 5, 5);
+            }
             
             // Flüsse
             ctx.fillStyle = '#2196F3';
             rivers.forEach(river => {
                 ctx.fillRect(0, river.y - 40, canvas.width, 40);
+                // Welleneffekt
+                ctx.fillStyle = '#42A5F5';
+                ctx.beginPath();
+                ctx.moveTo(0, river.y - 20);
+                for (let x = 0; x < canvas.width; x += 20) {
+                    ctx.lineTo(x, river.y - 20 + Math.sin(x + Date.now()/200 + river.y)*5);
+                }
+                ctx.lineTo(canvas.width, river.y - 10);
+                ctx.lineTo(0, river.y - 10);
+                ctx.fill();
+                ctx.fillStyle = '#2196F3';
             });
             
             // Bäume
@@ -392,11 +415,18 @@
                 river.items.forEach(item => {
                     // Baumstamm
                     ctx.fillStyle = '#795548';
-                    ctx.fillRect(item.x, river.y - 50, item.width, 10);
+                    ctx.fillRect(item.x + item.width/2 - 5, river.y - 50, 10, 40);
-                    // Blätter
+                    // Blätter (Kreise)
                     ctx.fillStyle = '#2E7D32';
                     ctx.beginPath();
-                    ctx.arc(item.x + item.width/2, river.y - 70, 15, 0, Math.PI * 2);
+                    ctx.arc(item.x + item.width/2, river.y - 70, 25, 0, Math.PI * 2);
+                    ctx.fill();
+                    ctx.fillStyle = '#388E3C';
+                    ctx.beginPath();
+                    ctx.arc(item.x + item.width/2 - 10, river.y - 75, 15, 0, Math.PI * 2);
+                    ctx.fill();
+                    ctx.beginPath();
+                    ctx.arc(item.x + item.width/2 + 10, river.y - 75, 15, 0, Math.PI * 2);
                     ctx.fill();
                 });
             });
@@ -404,38 +434,84 @@
             // Aligatoren
             alligators.forEach(alligator => {
                 // Körper
-                ctx.fillStyle = '#388E3C';
-                ctx.fillRect(alligator.x, alligator.y, alligator.width, alligator.height);
-                // Kopf
                 ctx.fillStyle = '#1B5E20';
-                ctx.fillRect(alligator.x - 10, alligator.y + 5, 20, 20);
+                ctx.beginPath();
+                ctx.ellipse(alligator.x + alligator.width/2, alligator.y + alligator.height/2, alligator.width/2, alligator.height/2, 0, 0, Math.PI * 2);
+                ctx.fill();
+                // Kopf
+                ctx.beginPath();
+                ctx.arc(alligator.x, alligator.y + alligator.height/2, 12, 0, Math.PI * 2);
+                ctx.fill();
                 // Augen
                 ctx.fillStyle = 'white';
-                ctx.fillRect(alligator.x - 5, alligator.y + 8, 5, 5);
-                ctx.fillRect(alligator.x + 5, alligator.y + 8, 5, 5);
-                // Zähne
-                ctx.fillStyle = 'white';
                 ctx.beginPath();
-                ctx.moveTo(alligator.x - 5, alligator.y + 25);
+                ctx.arc(alligator.x + 5, alligator.y + alligator.height/2 - 5, 3, 0, Math.PI * 2);
-                ctx.lineTo(alligator.x, alligator.y + 30);
+                ctx.fill();
-                ctx.lineTo(alligator.x + 5, alligator.y + 25);
+                ctx.fillStyle = 'black';
+                ctx.beginPath();
+                ctx.arc(alligator.x + 5, alligator.y + alligator.height/2 - 5, 1, 0, Math.PI * 2);
+                ctx.fill();
+                // Schuppen
+                ctx.fillStyle = '#2E7D32';
+                ctx.beginPath();
+                ctx.arc(alligator.x + alligator.width/2 - 10, alligator.y + alligator.height/2 + 5, 5, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.beginPath();
+                ctx.arc(alligator.x + alligator.width/2 + 10, alligator.y + alligator.height/2 + 5, 5, 0, Math.PI * 2);
                 ctx.fill();
             });
             
             // Schildkröte
-            ctx.fillStyle = '#333'; // Panzer
+            // Panzer
+            ctx.fillStyle = '#333';
             ctx.beginPath();
             ctx.ellipse(player.x + player.width/2, player.y + player.height/2, player.width/2, player.height/2, 0, 0, Math.PI * 2);
             ctx.fill();
+            // Muster auf Panzer
+            ctx.strokeStyle = '#555';
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            ctx.moveTo(player.x + player.width/2 - 10, player.y + player.height/2 - 10);
+            ctx.lineTo(player.x + player.width/2 + 10, player.y + player.height/2 + 10);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(player.x + player.width/2 + 10, player.y + player.height/2 - 10);
+            ctx.lineTo(player.x + player.width/2 - 10, player.y + player.height/2 + 10);
+            ctx.stroke();
             // Kopf
             ctx.fillStyle = '#689F38';
             ctx.beginPath();
-            ctx.arc(player.x + player.width/2, player.y + player.height - 10, 12, 0, Math.PI * 2);
+            ctx.arc(player.x + player.width/2, player.y + player.height - 8, 10, 0, Math.PI * 2);
+            ctx.fill();
+            // Augen
+            ctx.fillStyle = 'white';
+            ctx.beginPath();
+            ctx.arc(player.x + player.width/2 - 4, player.y + player.height - 10, 3, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.beginPath();
+            ctx.arc(player.x + player.width/2 + 4, player.y + player.height - 10, 3, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.fillStyle = 'black';
+            ctx.beginPath();
+            ctx.arc(player.x + player.width/2 - 4, player.y + player.height - 10, 1, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.beginPath();
+            ctx.arc(player.x + player.width/2 + 4, player.y + player.height - 10, 1, 0, Math.PI * 2);
             ctx.fill();
             // Beine
             ctx.fillStyle = '#689F38';
-            ctx.fillRect(player.x, player.y + 25, 10, 15);
+            ctx.beginPath();
-            ctx.fillRect(player.x + player.width - 10, player.y + 25, 10, 15);
+            ctx.arc(player.x + 8, player.y + 28, 8, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.beginPath();
+            ctx.arc(player.x + player.width - 8, player.y + 28, 8, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.beginPath();
+            ctx.arc(player.x + 8, player.y + player.height - 12, 8, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.beginPath();
+            ctx.arc(player.x + player.width - 8, player.y + player.height - 12, 8, 0, Math.PI * 2);
+            ctx.fill();
             
             // Wolkeneffekt (Hintergrund)
             ctx.fillStyle = 'rgba(255,255,255,0.6)';