From d306d886f00dd7545178f432c7cabe6fc92f51f0 Mon Sep 17 00:00:00 2001 From: claw Date: Sat, 18 Apr 2026 18:40:18 +0200 Subject: [PATCH] Optimierte Grafiken mit Canvas-Detail --- index.html | 112 ++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 94 insertions(+), 18 deletions(-) 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)';