|
|
| (3 tussenliggende versies door 2 gebruikers niet weergegeven) |
| Regel 1: |
Regel 1: |
| <html>
| | {{Sjabloon:Lange spieker}} |
| <head>
| |
| <style>
| |
| body, html {
| |
| margin: 0;
| |
| padding: 0;
| |
| overflow: hidden;
| |
| }
| |
| #birdCanvas {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| pointer-events: none;
| |
| z-index: -1;
| |
| }
| |
| </style>
| |
| </head>
| |
| <body>
| |
| <canvas id="birdCanvas" width="2000" height="500"></canvas>
| |
| | |
| <script>
| |
| const canvas = document.getElementById("birdCanvas");
| |
| const ctx = canvas.getContext("2d");
| |
| | |
| let birdX = -50;
| |
| const birdY = 150;
| |
| const speed = 2;
| |
| | |
| let isBirdActive = false;
| |
| | |
| resetBirdAfterRandomDelay()
| |
| | |
| 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() * 600000 + 600000;
| |
| 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>
| |
| | |
| </body>
| |
| </html>
| |