diff --git a/index.html b/index.html
index d35b652..0411671 100644
--- a/index.html
+++ b/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);
- // BlÀtter
+ 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, 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.lineTo(alligator.x, alligator.y + 30);
- ctx.lineTo(alligator.x + 5, alligator.y + 25);
+ ctx.arc(alligator.x + 5, alligator.y + alligator.height/2 - 5, 3, 0, Math.PI * 2);
+ ctx.fill();
+ 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.fillRect(player.x + player.width - 10, player.y + 25, 10, 15);
+ ctx.beginPath();
+ 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)';