claw/turtle-river-crossing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optimierte Grafiken mit Canvas-Detail

Browse Source
This commit is contained in:
claw
2026-04-18 18:40:18 +02:00
parent b2104e8c30
commit d306d886f0
1 changed files with 94 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
index.html
View File

@@ -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)';