Untitled
unknown
plain_text
2 years ago
3.6 kB
4
Indexable
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Murciélago Volador</title> <style> body { position: relative; overflow: hidden; } #murcielago { position: absolute; top: 0; left: 0; width: 50px; /* Ajusta según el tamaño de tu imagen */ visibility: hidden; /* Ocultamos el murciélago inicialmente */ z-index: 9999; } </style> </head> <body> <img id="murcielago" src="ruta-a-tu-imagen-de-murcielago.png" alt="Murciélago"> <script> const murcielago = document.getElementById('murcielago'); const VELOCIDAD_MAXIMA = 500; // píxeles por segundo const PUNTO_INICIAL = { x: 0, y: 0 }; // Punto original del murciélago function obtenerPosicionActual() { return { x: parseFloat(murcielago.style.left || 0), y: parseFloat(murcielago.style.top || 0) }; } function obtenerPosicionAleatoria() { return { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }; } function calcularDuracion(puntoA, puntoB, velocidad) { const distancia = Math.sqrt(Math.pow(puntoB.x - puntoA.x, 2) + Math.pow(puntoB.y - puntoA.y, 2)); return distancia / velocidad * 1000; // Convertir a milisegundos } function volarMurcielago() { const inicio = obtenerPosicionActual(); const punto1 = obtenerPosicionAleatoria(); const punto2 = obtenerPosicionAleatoria(); const puntoFinal = obtenerPosicionAleatoria(); const velocidad1 = Math.random() * VELOCIDAD_MAXIMA; const velocidad2 = Math.random() * VELOCIDAD_MAXIMA; const velocidad3 = Math.random() * VELOCIDAD_MAXIMA; const velocidadRegreso = Math.random() * VELOCIDAD_MAXIMA; const duracion1 = calcularDuracion(inicio, punto1, velocidad1); const duracion2 = calcularDuracion(punto1, punto2, velocidad2); const duracion3 = calcularDuracion(punto2, puntoFinal, velocidad3); const duracionRegreso = calcularDuracion(puntoFinal, PUNTO_INICIAL, velocidadRegreso); murcielago.style.visibility = 'visible'; const animacion = murcielago.animate([ { top: `${inicio.y}px`, left: `${inicio.x}px`, offset: 0 }, { top: `${punto1.y}px`, left: `${punto1.x}px`, offset: duracion1 / (duracion1 + duracion2 + duracion3 + duracionRegreso) }, { top: `${punto2.y}px`, left: `${punto2.x}px`, offset: (duracion1 + duracion2) / (duracion1 + duracion2 + duracion3 + duracionRegreso) }, { top: `${puntoFinal.y}px`, left: `${puntoFinal.x}px`, offset: (duracion1 + duracion2 + duracion3) / (duracion1 + duracion2 + duracion3 + duracionRegreso) }, { top: `${PUNTO_INICIAL.y}px`, left: `${PUNTO_INICIAL.x}px`, offset: 1 } ], { duration: duracion1 + duracion2 + duracion3 + duracionRegreso, fill: 'forwards' }); animacion.finished.then(() => { setTimeout(volarMurcielago, 10000); // Esperar 10 segundos antes de comenzar la próxima animación }); } volarMurcielago(); // Iniciar la primera animación inmediatamente </script> </body> </html>
Editor is loading...