Butterfly vs Bee

Butterfly vs Bee

body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { text-align: center; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } h1 { color: #333; margin-bottom: 20px; } #battlefield { border: 1px solid #ccc; background-color: #e0f7fa; /* Light blue sky */ } /* Butterfly Wing Animation */ .wing { transform-origin: 0% 50%; /* Rotate around the base */ animation: flap 0.5s infinite ease-in-out alternate; } .right-wing { transform-origin: 100% 50%; /* Rotate around the base */ animation-delay: 0.05s; /* Slight delay for asymmetry */ } @keyframes flap { 0% { transform: rotate(-30deg); } 100% { transform: rotate(-50deg); } } /* Bee Wing Animation */ .bee-wing { transform-origin: 50% 50%; /* Rotate around the center */ animation: buzz 0.1s infinite linear; } @keyframes buzz { 0% { transform: scaleY(1); } 50% { transform: scaleY(0.8); } 100% { transform: scaleY(1); } } /* Character Movement (handled by JS) */ .character { transition: transform 0.5s ease-in-out; /* Smooth movement */ } document.addEventListener('DOMContentLoaded', () => { const butterfly = document.getElementById('butterfly'); const bee = document.getElementById('bee'); const svg = document.getElementById('battlefield'); const svgWidth = svg.viewBox.baseVal.width; const svgHeight = svg.viewBox.baseVal.height; let butterflyPos = { x: 100, y: 200 }; let beePos = { x: 500, y: 200 }; const attackDistance = 50; // Distance at which they "attack" const retreatDistance = 150; // Distance they retreat to function updatePositions() { butterfly.style.transform = `translate(${butterflyPos.x}px, ${butterflyPos.y}px)`; bee.style.transform = `translate(${beePos.x}px, ${beePos.y}px)`; } function animateAttack() { // Move towards each other butterflyPos.x = svgWidth / 2 - attackDistance; beePos.x = svgWidth / 2 + attackDistance; updatePositions(); // After a short pause, retreat setTimeout(() => { butterflyPos.x = retreatDistance; beePos.x = svgWidth - retreatDistance; updatePositions(); }, 600); // Attack duration // Repeat the attack sequence setTimeout(animateAttack, 2000); // Time between attacks } // Initial position update updatePositions(); // Start the attack animation sequence animateAttack(); });