|
|
| (6 tussenliggende versies door 2 gebruikers niet weergegeven) |
| Regel 1: |
Regel 1: |
| <script>
| | {{Sjabloon:Lange spieker}} |
| const canvas = document.getElementById("birdCanvas");
| |
| const ctx = canvas.getContext("2d");
| |
| | |
| let birdX = -50;
| |
| const birdY = 150;
| |
| const speed = 2;
| |
| | |
| let isBirdActive = true;
| |
| | |
| function drawLangeSpieker(x, y) {
| |
| ctx.save();
| |
| ctx.translate(x, y);
| |
| | |
| // Legs
| |
| ctx.strokeStyle = "#654321";
| |
| ctx.lineWidth = 4;
| |
| ctx.beginPath();
| |
| ctx.moveTo(0, 0);
| |
| ctx.lineTo(-10, 80);
| |
| ctx.moveTo(0, 0);
| |
| ctx.lineTo(10, 80);
| |
| ctx.stroke();
| |
| | |
| // Body
| |
| ctx.beginPath();
| |
| ctx.fillStyle = "#ffcc00";
| |
| ctx.ellipse(0, -30, 30, 45, 0, 0, Math.PI * 2);
| |
| ctx.fill();
| |
| | |
| // Neck
| |
| ctx.fillRect(-5, -90, 10, 30);
| |
| | |
| // Head
| |
| ctx.beginPath();
| |
| ctx.arc(0, -100, 15, 0, Math.PI * 2);
| |
| ctx.fill();
| |
| | |
| // Eye
| |
| ctx.beginPath();
| |
| ctx.fillStyle = "#000";
| |
| ctx.arc(5, -105, 2.5, 0, Math.PI * 2);
| |
| ctx.fill();
| |
| | |
| // Beak
| |
| ctx.beginPath();
| |
| ctx.fillStyle = "#ff6600";
| |
| ctx.moveTo(13, -105);
| |
| ctx.lineTo(33, -100);
| |
| ctx.lineTo(13, -95);
| |
| ctx.closePath();
| |
| ctx.fill();
| |
| | |
| // Wing
| |
| ctx.beginPath();
| |
| ctx.fillStyle = "#ffaa00";
| |
| ctx.ellipse(-15, -35, 12, 25, Math.PI / 6, 0, Math.PI * 2);
| |
| ctx.fill();
| |
| | |
| ctx.restore();
| |
| }
| |
| | |
| function resetBirdAfterRandomDelay() {
| |
| isBirdActive = false;
| |
| | |
| const delay = Math.random() * 4000 + 1000; // 1 to 5 seconds
| |
| setTimeout(() => {
| |
| birdX = -50;
| |
| isBirdActive = true;
| |
| }, delay);
| |
| }
| |
| | |
| function animate() {
| |
| ctx.clearRect(0, 0, canvas.width, canvas.height);
| |
| | |
| if (isBirdActive) {
| |
| drawLangeSpieker(birdX, birdY);
| |
| birdX += speed;
| |
| | |
| if (birdX > canvas.width + 50) {
| |
| resetBirdAfterRandomDelay();
| |
| }
| |
| }
| |
| | |
| requestAnimationFrame(animate);
| |
| }
| |
| | |
| animate();
| |
| </script>
| |