Halloween Night in Diäbuluz

Halloween Night in Diäbuluz

Well, the Day of the Dead is approaching and to celebrate these dates on the forum Diäbuluz in Mëxico I’ve placed a small script that I designed.

The script performs the following tasks:

First, it creates a random variable that determines whether the visual effect will be shown or not, as well as how long it will take to appear.

I do this because seeing the same effect all the time is annoying, and one of the effects is meant to scare the visitor, jejej.

Once the time is determined, it checks if the time is even or odd and from there decides whether to present the scare or the flying witch.

If the scare is chosen, it will create an interval, and when the visitor least expects it, PUF!, a child with a devilish face appears for an instant in the center of the screen.

If the witch’s flight is chosen, it creates another random value to decide which of all the images will be displayed. Once decided, it will load and make it visible in a corner of the screen.

The images I chose for this were animated GIFs, so that as they move across the screen it seems like they are flying. Especially I liked how the bat looked.

This script is this:

        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);
                    }
                }
            }


To make it work, you need to add some elements to the HTML:

<br><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”>&lt;/div>


And add the images we are going to display in the indicated directory.

Finally, modify the body to make it load the script automatically:

<body onload=“javascript:asustame()”>

I’m signing off. If in the future someone finds this useful, I’ll improve it next year so that it has better effects. I’d like to have a monster tear the page, add some sounds, or make the window start bleeding. But that will be for the next time.