Noche de Brujas En Diäbuluz

Noche de Brujas En Diäbuluz

Pues bien, se acerca día de muertos y para celebrar estas fechas en el foro Diäbuluz in Mëxico he colocado un pequeño script que diseñé.

El script realiza las siguientes tareas:

Primero crea una variable aleatoria que determina si el efecto visual se mostrará o no, además de cuanto tiempo tardará en aparecer.

Esto lo hago porque ver el mismo efecto todo el tiempo resulta molesto, además uno de los efectos su objetivo es asustar al visitante, jejej.

Una vez que determina el tiempo entonces revisa si el tiempo es par o impar y de allí decide si presenta el susto o la bruja volando.

Si se decide por el susto, creará un intervalo y, cuando el visitante menos se lo espere PUF!, aparece un niño con cara diabólica por un instante en el centro de la pantalla.

Si se decide por el vuelo de la bruja entonces crea otro valor aleatorio para decidir cual de todas las imágenes presentara. Una vez decidido la cargará y la hará visible en una esquina de la pantalla.

Las imágenes que escogí para esto fueron gifs animados, de manera que al desplazarse por la pantalla pareciera que van volando. En especial me gustó como se veía el murciélago.

es script es este:

        var intervalo;
        function espanta()
            {
            var espanto=document.getElementById("espanto");
            espanto.style.display="block";
            setTimeout("document.getElementById(\'espanto\').style.display=\'none\';",1000);
            }
        function vuela()
            {
            var bruja=document.getElementById("bruja");
            var x=bruja.style.top;
            var y=bruja.style.left;
            x=x.split("p");
            y=y.split("p");
            x=(x[0]*1)+5;
            y=(y[0]*1)+10;
            bruja.style.top=x+"px";
            bruja.style.left=y+"px";
            if(x>2000)
                {
                clearInterval(intervalo);
                }
            }
        function bruja()
            {
            document.getElementById("bruja").style.display="block";
            var fact=Math.round((Math.random())*10);
            switch(fact)
                {
                case 1:
                    var img="skull.gif";
                    break;
                case 2:
                    var img="mur.gif";
                    break;
                case 3:
                    var img="bruja2.gif";
                    break;
                case 4:
                    var img="esq.gif";
                    break;
                case 5:
                    var img="fan.gif";
                    break;
                case 6:
                    var img="cria.gif";
                    break;
                case 7:
                    var img="bruja.gif";
                    break;
                case 8:
                    var img="bruja.gif";
                    break;
                case 9:
                    var img="bruja.gif";
                    break;
                case 10:
                    var img="bruja.gif";
                    break;
                default:
                    var img="bruja.gif";
                    break;
                }
            document.getElementById("brujaimg").src=img;
            intervalo=setInterval(vuela,80);
            }
        function esPar(num)
            {
            res=num%2;
            if(res)
                {
                return(false);
                }
            else
                {
                return(true);
                }
            }
        function asustame()
            {
            var factor2=(Math.random())*3000000;
            //var factor2=(Math.random())*100;
            var factor=(Math.random())*factor2;
            var tiempo=Math.round((Math.random())*factor);
            if(tiempo<60000)
                {
                if(esPar(tiempo))
                    {
                    setTimeout(bruja,tiempo);
                    }
                else
                    {
                    setTimeout(espanta,tiempo);
                    }
                }
            }


Para que funcione es necesario agregar algunos elementos en el HTML:

<img src="espanto.jpg" style="display:none">
<div id="espanto" style="z-index:10000;width:100%;height:100%;background:url(\'espanto.jpg\') center no-repeat;display:none;position:fixed;top:0;left:0">
</div>
<div id="bruja" style="z-index:10000;display:none;position:fixed;top:0px;left:-50px"><img id="brujaimg" src="bruja.gif"/></div>


Y agregar en el directorio indicado las imágenes que vamos a mostrar.

Por útimo se modifica el body para que cargue el script automáticamente:

<body onload="javascript:asustame()">

Me despido, si en un futuro a alguien le sirve adelante, yo por mi parte lo mejoraré el próximo año para que presente mejores efectos, quisiera hacer que un monstruo rompa la página, agregarle sonidos o hacer que la ventana comience a sangrar. Pero será para la próxima vez.