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