Mausverfolger Wurm

[Hape]

Hier folgt ein farbiger Wurm dem Mauszeiger.

Code: Alles auswählen

<script type='text/javascript'>
<!--
var anzahl   = 20;  // Länge des Wurmes
var groesse  = 100; // Ist so aber schon ziemlich optimiert auf Darstellung
var abstand1 = 7;   // Läuft auf meinem K6/2 500'er recht flüssig
var Farbe    = 0;   // siehe Farbarray;

farbbibliothek = new Array();
farbbibliothek[0] = new Array("#FF0000","#FF0000","#FF0000","#FF1100","#FF2200","#FF3300","#FF4400","#FF5500","#FF6600","#FF7700","#FF8800","#FF9900","#FFaa00","#FFbb00","#FFcc00","#FFdd00","#FFee00","#FFff00","#FFff00","#FFff00","#FFee00","#FFdd00","#FFcc00","#FFbb00","#FFaa00","#FF9900","#FF8800","#FF7700","#FF6600","#FF5500","#FF4400","#FF3300","#FF2200","#FF1100");
farbbibliothek[1] = new Array("#00FF00","#000000","#00FF00","#00FF00");
farbbibliothek[2] = new Array("#00FF00","#FF0000","#FF0000","#FF0000","#FF0000","#FF0000","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00","#00FF00");
farbbibliothek[3] = new Array("#FF0000","#FF4000","#FF8000","#FFC000","#FFFF00","#C0FF00","#80FF00","#40FF00","#00FF00","#00FF40","#00FF80","#00FFC0","#00FFFF","#00C0FF","#0080FF","#0040FF","#0000FF","#4000FF","#8000FF","#C000FF","#FF00FF","#FF00C0","#FF0080","#FF0040");
farbbibliothek[4] = new Array("#FF0000","#FF0000","#FF0000","#EE0000","#DD0000","#CC0000","#BB0000","#AA0000","#990000","#880000","#770000","#660000","#550000","#440000","#330000","#220000","#110000","#000000","#000000","#000000","#110000","#220000","#330000","#440000","#550000","#660000","#770000","#880000","#990000","#AA0000","#BB0000","#CC0000","#DD0000","#EE0000");
farbbibliothek[5] = new Array("#000000","#000000","#000000","#FFFFFF","#FFFFFF","#FFFFFF");
farbbibliothek[6] = new Array("#0000FF","#FFFF00");
/*
        0 - Rot-Gelb-Übergang        -Standard
        1 - Grün-Schwarz-Raupe
        2 - grüne Raupe mit rotem Magen
        3 - Regenbogendurchgang
        4 - Rot-Schwarz-Durchgang
        5 - Zebra
        6 - Gelb-Blau-Stroboskop
*/
document.write("<span id='AAA'></span>");
function erzeuge()
{
        var a=1;
        var text="";
        while(a<=anzahl)
        {
                text +="<span id='wurm"+a+"' style='position:absolute; top:0px; left:-50px; color:#FFFFFF; margin:0px; font-size: "+groesse+"px; z-index:2; filter:Alpha(opacity=20, style=2, finishopacity=0); -moz-opacity:0.2; opacity: 0.2;'>&#8226;</span>";
                a++;
        }
        document.getElementById("AAA").innerHTML = text;
        laufen();
}

var x=-groesse,y=-groesse;
function erfasse(e) {
        var myEventX, myEventY;
        if (e) {
                myEventX = e.pageX;
                myEventY = e.pageY;
        } else {
                myEventX = window.event.x;
                myEventY = window.event.y
        }
        x = myEventX + document.documentElement.scrollLeft - groesse/2;
        y = myEventY + document.documentElement.scrollTop - groesse/2;
}
document.onmousemove = erfasse;
var X=0,Y=0;
function neue_koordinaten(x1,y1)
{
        X = abstand1 * Math.sin(Math.atan2(y-y1,x-x1));
        Y = abstand1 * Math.sin(Math.atan2(x-x1,y-y1));
}
var b=anzahl-1;
var c=anzahl;
var d=anzahl-Math.ceil(anzahl/32*23);
function laufen()
{
        myLeftD = parseInt(document.getElementById("wurm"+d).style.left);
        myTopD  = parseInt(document.getElementById("wurm"+d).style.top);

        neue_koordinaten(myLeftD, myTopD);
        document.getElementById("wurm"+b).style.top = (parseInt(document.getElementById("wurm"+c).style.top) + X) + "px";
        neue_koordinaten(myLeftD, myTopD);
        document.getElementById("wurm"+b).style.left = (parseInt(document.getElementById("wurm"+c).style.left) + Y) + "px";
        document.getElementById("wurm"+b).style.color = farbbibliothek[Farbe][zaehler()];
        b--; if(b<=0) b=anzahl;
        c--; if(c<=0) c=anzahl;
        d--; if(d<=0) d=anzahl;
        setTimeout("laufen()",50);
}
z=-1;
function zaehler()
{
        z++;
        if(z>=farbbibliothek[Farbe].length)
        {
                z=0;
        }
        return(z)
}

/**** Zu Demozwecken (entfernbar für gleichbleibende Farbe) *****/

        function farbwechsel()
        {
                Farbe = Math.floor(Math.random()*farbbibliothek.length);
        }

        document.onclick = farbwechsel;

/**** Demo-Ende ****/
setTimeout("erzeuge()",500);
//-->
</script>

Hier dazu die Demoseite: Wurm