Frogger-Stil: Spieler springt auf Baumstämme im Wasser

index.html

@@ -120,18 +120,17 @@
         
         // Schildkröte (Spieler)
         const player = {
-            x: canvas.width / 2 - 25,
+            x: canvas.width / 2 - 20,
-            y: canvas.height - 70,
+            y: canvas.height - 60,
-            width: 50,
+            width: 40,
-            height: 50,
+            height: 40,
             speed: 5,
-            dx: 0,
+            onLog: false
-            dy: 0
         };
         
-        // Flusslinien (Bäume)
+        // Flusslinien (Bäume zum draufspringen)
-        const rivers = [];
+        const logs = [];
-        const numRivers = 5;
+        const numLogs = 5;
         
         // Bäume (Hindernisse)
         const trees = [];
@@ -153,24 +152,23 @@
                     items: []
                 });
                 
-                // Bäume pro Fluss
+            for (let i = 0; i < numLogs; i++) {
-                const numTreesInRiver = 2 + Math.floor(Math.random() * 3);
+                logs.push({
-                for (let j = 0; j < numTreesInRiver; j++) {
+                    y: canvas.height - 150 - (i * 60),
-                    rivers[i].items.push({
+                    width: 80 + Math.random() * 60,
-                        x: Math.random() * (canvas.width - 60),
+                    speed: 1 + Math.random() * 1.5,
-                        width: 40 + Math.random() * 30,
+                    direction: i % 2 === 0 ? 1 : -1
-                        type: 'tree'
                 });
             }
-            }
             
+            // Bäume (Hindernisse im Gras)
             trees.length = 0;
             for (let i = 0; i < numTrees; i++) {
                 trees.push({
                     x: Math.random() * (canvas.width - 50),
-                    y: 150 + Math.random() * (canvas.height - 300),
+                    y: canvas.height - 120 - Math.random() * 300,
-                    width: 50,
+                    width: 30,
-                    height: 60
+                    height: 30
                 });
             }
             
@@ -283,6 +281,15 @@
             if (player.y > canvas.height - player.height) player.y = canvas.height - player.height;
         }
         
+        // Bäume bewegen
+        function moveLogs() {
+            logs.forEach(log => {
+                log.x += log.speed * log.direction;
+                if (log.x < -200) log.x = canvas.width;
+                if (log.x > canvas.width) log.x = -200;
+            });
+        }
+        
         // Aligatoren bewegen
         function moveAlligators() {
             alligators.forEach(alligator => {
@@ -295,13 +302,11 @@
         }
         
         // Bäume bewegen
-        function moveRivers() {
+        function moveLogs() {
-            rivers.forEach(river => {
+            logs.forEach(log => {
-                river.items.forEach(item => {
+                log.x += log.speed * log.direction;
-                    item.x += river.speed * river.direction;
+                if (log.x < -200) log.x = canvas.width;
-                    if (item.x < -100) item.x = canvas.width;
+                if (log.x > canvas.width) log.x = -200;
-                    if (item.x > canvas.width) item.x = -100;
-                });
             });
         }
         
@@ -317,24 +322,39 @@
                 }
             });
             
-            // Bäume (Flüsse)
+            // Bäume (Hindernisse im Gras)
-            rivers.forEach(river => {
+            trees.forEach(tree => {
-                if (player.y > 150 && player.y < canvas.height - 150) {
+                if (player.x < tree.x + tree.width &&
-                    river.items.forEach(item => {
+                    player.x + player.width > tree.x &&
-                        if (player.x < item.x + item.width &&
+                    player.y < tree.y + tree.height &&
-                            player.x + player.width > item.x &&
+                    player.y + player.height > tree.y) {
-                            player.y < river.y &&
-                            player.y + player.height > river.y - 40) {
                     loseLife();
                 }
             });
+            
+            // Bäume im Wasser (Logs) - Spieler bewegt sich mit
+            player.onLog = false;
+            logs.forEach(log => {
+                if (player.y > 100 && player.y < 450) {
+                    if (player.x < log.x + log.width &&
+                        player.x + player.width > log.x &&
+                        player.y + player.height > log.y - 20 &&
+                        player.y < log.y) {
+                        player.x += log.speed * log.direction;
+                        player.onLog = true;
+                    }
                 }
             });
             
             // Ziel erreicht?
-            if (player.y < 50) {
+            if (player.y < 60) {
                 levelUp();
             }
+            
+            // Ins Wasser fallen?
+            if (player.y > 100 && player.y < 450 && !player.onLog) {
+                loseLife();
+            }
         }
         
         function loseLife() {
@@ -395,40 +415,30 @@
             
             // Flüsse
             ctx.fillStyle = '#2196F3';
-            rivers.forEach(river => {
+            logs.forEach(log => {
-                ctx.fillRect(0, river.y - 40, canvas.width, 40);
+                ctx.fillRect(0, log.y - 40, canvas.width, 40);
                 // Welleneffekt
                 ctx.fillStyle = '#42A5F5';
                 ctx.beginPath();
-                ctx.moveTo(0, river.y - 20);
+                ctx.moveTo(0, log.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(x, log.y - 20 + Math.sin(x + Date.now()/200 + log.y)*5);
                 }
-                ctx.lineTo(canvas.width, river.y - 10);
+                ctx.lineTo(canvas.width, log.y - 10);
-                ctx.lineTo(0, river.y - 10);
+                ctx.lineTo(0, log.y - 10);
                 ctx.fill();
                 ctx.fillStyle = '#2196F3';
             });
             
-            // Bäume
+            // Logs (Baumstämme im Wasser)
-            rivers.forEach(river => {
+            logs.forEach(log => {
-                river.items.forEach(item => {
                 // Baumstamm
                 ctx.fillStyle = '#795548';
-                    ctx.fillRect(item.x + item.width/2 - 5, river.y - 50, 10, 40);
+                ctx.fillRect(log.x, log.y - 20, log.width, 20);
-                    // Blätter (Kreise)
+                // Details
-                    ctx.fillStyle = '#2E7D32';
+                ctx.fillStyle = '#5D4037';
-                    ctx.beginPath();
+                ctx.fillRect(log.x + 5, log.y - 18, 5, 16);
-                    ctx.arc(item.x + item.width/2, river.y - 70, 25, 0, Math.PI * 2);
+                ctx.fillRect(log.x + log.width - 10, log.y - 18, 5, 16);
-                    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();
-                });
             });
             
             // Aligatoren