Untitled

<!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...