diff --git a/index.html b/index.html index 0411671..5fc746e 100644 --- a/index.html +++ b/index.html @@ -120,18 +120,17 @@ // Schildkröte (Spieler) const player = { - x: canvas.width / 2 - 25, - y: canvas.height - 70, - width: 50, - height: 50, + x: canvas.width / 2 - 20, + y: canvas.height - 60, + width: 40, + height: 40, speed: 5, - dx: 0, - dy: 0 + onLog: false }; - // Flusslinien (Bäume) - const rivers = []; - const numRivers = 5; + // Flusslinien (Bäume zum draufspringen) + const logs = []; + const numLogs = 5; // Bäume (Hindernisse) const trees = []; @@ -153,24 +152,23 @@ items: [] }); - // Bäume pro Fluss - const numTreesInRiver = 2 + Math.floor(Math.random() * 3); - for (let j = 0; j < numTreesInRiver; j++) { - rivers[i].items.push({ - x: Math.random() * (canvas.width - 60), - width: 40 + Math.random() * 30, - type: 'tree' - }); - } + for (let i = 0; i < numLogs; i++) { + logs.push({ + y: canvas.height - 150 - (i * 60), + width: 80 + Math.random() * 60, + speed: 1 + Math.random() * 1.5, + direction: i % 2 === 0 ? 1 : -1 + }); } + // 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), - width: 50, - height: 60 + y: canvas.height - 120 - Math.random() * 300, + width: 30, + 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() { - rivers.forEach(river => { - river.items.forEach(item => { - item.x += river.speed * river.direction; - if (item.x < -100) item.x = canvas.width; - if (item.x > canvas.width) item.x = -100; - }); + 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; }); } @@ -317,24 +322,39 @@ } }); - // Bäume (Flüsse) - rivers.forEach(river => { - if (player.y > 150 && player.y < canvas.height - 150) { - river.items.forEach(item => { - if (player.x < item.x + item.width && - player.x + player.width > item.x && - player.y < river.y && - player.y + player.height > river.y - 40) { - loseLife(); - } - }); + // Bäume (Hindernisse im Gras) + trees.forEach(tree => { + if (player.x < tree.x + tree.width && + player.x + player.width > tree.x && + player.y < tree.y + tree.height && + player.y + player.height > tree.y) { + 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 => { - ctx.fillRect(0, river.y - 40, canvas.width, 40); + logs.forEach(log => { + 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(0, river.y - 10); + ctx.lineTo(canvas.width, log.y - 10); + ctx.lineTo(0, log.y - 10); ctx.fill(); ctx.fillStyle = '#2196F3'; }); - // Bäume - rivers.forEach(river => { - river.items.forEach(item => { - // Baumstamm - ctx.fillStyle = '#795548'; - ctx.fillRect(item.x + item.width/2 - 5, river.y - 50, 10, 40); - // Blätter (Kreise) - ctx.fillStyle = '#2E7D32'; - ctx.beginPath(); - 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(); - }); + // Logs (Baumstämme im Wasser) + logs.forEach(log => { + // Baumstamm + ctx.fillStyle = '#795548'; + ctx.fillRect(log.x, log.y - 20, log.width, 20); + // Details + ctx.fillStyle = '#5D4037'; + ctx.fillRect(log.x + 5, log.y - 18, 5, 16); + ctx.fillRect(log.x + log.width - 10, log.y - 18, 5, 16); }); // Aligatoren