✔ jave script mit begrenzung

lubino · 14. Dezember 2005

Hallo ihr Lieben,

Ich suche einen Script wo ein Ball den Mauszeiger folgt, aber nicht über den ganzen
Bidschirm sondern in einer Begrenzung wie in einem Viereck oder einen einen Kreis.

der Ball soll sich aber dann auch noch bewegen wenn man nicht im Kreis oder Viereck mit
der Maus ist. ist sowas machbar und wie lautet dazu der Script? ich bin euch sehr
dankbar für die Lösung.

alles liebe und ein hoho Weihnachten

con-f-use · 14. Dezember 2005

Ich komm mir langsam wie eine Gebetsmühle vor: Wir sind keine Scriptdatenbank, sondern ein Hilfe-Forum. Fragen wie: "Wie lautet das Script dazu?" werden grundsätzlich nicht beantwortet, denn das würde heißen das Script für dich zu schreiben. Das wiederrum wäre aber Arbeit und keine Hilfe, also nicht der Zweck dieses Forums (siehe Hilfe-Forum). Für Arbeit bekommt man im Allgemeinen Geld. Solche Fragen haben folglich im JS-Forum nichts zu suchen und sollten in's Job-Forum hier auf tutorials.de. Dort musst du Geld dafür anbieten oder eben in Scriptdatenbanken suchen.

So nun da meine Predigt zu Ende ist noch etwas hilfreiches: Ja es ist möglich. Meine Seite zu tutorials.de beinhaltet ein Script für einen Layer, der dem Mauszeiger folgt. Auf dieser Seite sind die Scripts zu finden, nach denen die Leute hier am öftesten fragen - du hättest also auch die Forensuche benutzen können und sollen, aber egal.
Jetzt musst du eben das Script noch dahingehen verändern, dass es erstens dem Layer (mit dem Ball drinen) nicht aus deinem Kästen bewegt (durch if-Abfragen der Koordinaten) und zweitens dafür sorgen, dass der Ball sich anders weiter bewegt, wenn die Maus nicht im Kasten ist (also die Mauskoordinaten außerhalb eines gewissen Bereichs sind - auch wieder if-Abfragen).
Die Funktion mit Namen "mouse()" in meinem oben verlinkten Script wird automatisch aufgerufen, wenn sich die Position der Maus verändert und sorgt dann dafür, dass die Variablen "x" und "y" zu jedem Zeitpunkt die Werte der x- und y-Postion der Maus haben. Mehr brauchst du über dieses Funktion nicht zu wissen - du kannst sie schonmal einsetzten um die Mauskoordinaten zu ermitteln. "placePic()" plaziert den Layer an die Richtige postition und glättet dabei die Bewegung etwas, so dass es nicht allzusehr ruckelt.

Jetzt mit dem als Inspiration sollte das für einen kreativen Menschen kein unlösbares Problem sein. Bitte eigne dir das Wissen so weit wie möglichst selbst an und mach so viel von der Arbeit wie möglichst selbst. Ist zu erkennen, dass du dir schon vorher etwas mühe gegeben hast, kannst du gerne jedes konkrete Problem nochmal hier posten und wir helfen dir so gut es geht.

CHaoSlayeR · 18. Dezember 2005

Na also erste Frage ist doch: kennst Du Dich mit Javascript aus?

- Nein? >> Lerne es! (nur eigenes Wissen macht schlau)
- Ja? >> Dann kannst Du Dir Deine Frage selbst beantworten!
- Alles dazwischen >> folgendes...

...also was Du tun mußt ist folgendes (für den Fall, dass Du es selbst schreiben willst):

1. Objekt was sich mitbewegen soll muss der Mausposition folgen
2. Objekt sollte sich nur in Grenzen bewegen, also mußt Du diese Grenzen definieren und abfragen bevor das Objekt positioniert wird
3. Das ganze machst Du seperat für x- und y-Werte. damit erreichst Du, dass sich das Objekt auch dann bewegt, wenn der Mauszeiger nicht in dem Bereich ist.
4. Weiterhin kannst Du (um die Sache optisch ansprechender zu gestalten) für den Fall, dass der Mauszeiger nicht im Bereich ist eine Funktion schreiben, die Dir den Winkel zum Mauszeiger ermittelt (...jaja... der gute alte Pythagoras... ;-)). Dieser bringt gerade im Zusammenhang mit einem kreisfömigen Bereich ein intuitiveres Verhalten.

Ansonsten sieht die Lösung von con-f-use auch ganz gut aus, obwohl die Performance besser sein könnte. Dahingehend setze ich ganz gern auf etablierte Bibliotheken auf, wie z.B. Cross-Browser :: X-Library...

Gruß, C]-[aoZ

lubino · 18. Dezember 2005

Hallo und Danke schonmal für Eure Antwort. Ich hab mich schon sehr ausgiebig mit dem Thema Java Script befasst und kann sie auch so umschreiben wie ich sie brauche, bin auch erlich und sage das ich Sie selber noch nicht schreiben kann.

mein gewünschtes Zieh habe ich somit fast erreicht, nur weis ich noch nicht wie eine begrenzung auszuhenen har :-(

hier schonmal der Scrips, viel weit ich schon gekommen bin

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>lubino</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<div id="dot0" style="position: absolute; visibility: hidden; height: 11; width: 11;"><img src="gfxu/ball.gif" height=11 width=11></div>
<div id="dot1" style="position: absolute; height: 11; width: 11;"><img src="ball.gif" height=11 width=11></div>


<script LANGUAGE="JavaScript">
var nDots = 2;
if (document.all&&window.print)
document.body.style.cssText="overflow-x:hidden;overflow-y:scroll"
var Xpos = 0;
var Ypos = 0;
var DELTAT = .01;
var SEGLEN = 10;
var SPRINGK = 10;
var MASS = 1;
var GRAVITY = 50;
var RESISTANCE = 10;
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
var BOUNCE = 0.75;

var isNetscape = navigator.appName=="Netscape";
var followmouse = true;

var dots = new Array();
init();

function init()
{
    var i = 0;
    for (i = 0; i < nDots; i++) {
        dots[i] = new dot(i);
    }
    
    if (!isNetscape) {
    }
    for (i = 0; i < nDots; i++) {
        dots[i].obj.left = dots[i].X;
        dots[i].obj.top = dots[i].Y;
    }
    if (isNetscape) {
        startanimate();
    } else {
        setTimeout("startanimate()", 2000);
    }
}
function dot(i) 
{
    this.X = Xpos;
    this.Y = Ypos;
    this.dx = 0;
    this.dy = 0;
    if (isNetscape) {	
        this.obj = eval("document.dot" + i);
    } else {
        this.obj = eval("dot" + i + ".style");
    }
}
function startanimate() {	
    setInterval("animate()", 20);
}
function setInitPositions(dots)
{
    // initialize dot positions to be on top 
    // of the bullets in the <ul>
    var startloc = document.all.tags("LI");
    var i = 0;
    for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
        dots[i+1].X = startloc[i].offsetLeft
            startloc[i].offsetParent.offsetLeft - DOTSIZE;
        dots[i+1].Y = startloc[i].offsetTop +
            startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
    }
    dots[0].X = dots[1].X;
    dots[0].Y = dots[1].Y - SEGLEN;
}
function MoveHandler(e)
{
    Xpos = e.pageX;
    Ypos = e.pageY;	  
    return true;
}
function MoveHandlerIE() {
    Xpos = window.event.x + document.body.scrollLeft;
    Ypos = window.event.y + document.body.scrollTop;	  
}

if (isNetscape) {
    document.captureEvents(Event.MOUSEMOVE);
    document.onMouseMove = MoveHandler;
} else {
    document.onmousemove = MoveHandlerIE;
}


function vec(X, Y)
{
    this.X = X;
    this.Y = Y;
}
function springForce(i, j, spring)
{
    var dx = (dots[i].X - dots[j].X);
    var dy = (dots[i].Y - dots[j].Y);
    var len = Math.sqrt(dx*dx + dy*dy);
    if (len > SEGLEN) {
        var springF = SPRINGK * (len - SEGLEN);
        spring.X += (dx / len) * springF;
        spring.Y += (dy / len) * springF;
    }
}


function animate() {
    var start = 0;
    if (followmouse) {
        dots[0].X = Xpos;
        dots[0].Y = Ypos;	
        start = 1;
    }
    
    for (i = start ; i < nDots; i++ ) {
        var spring = new vec(0, 0);
        if (i > 0) {
            springForce(i-1, i, spring);
        }
        if (i < (nDots - 1)) {
            springForce(i+1, i, spring);
        }
        var resist = new vec(-dots[i].dx * RESISTANCE,
            -dots[i].dy * RESISTANCE);
        var accel = new vec((spring.X + resist.X)/ MASS,
            (spring.Y + resist.Y)/ MASS + GRAVITY);
        dots[i].dx += (DELTAT * accel.X);
        dots[i].dy += (DELTAT * accel.Y);
		if (Math.abs(dots[i].dx) < STOPVEL &&
            Math.abs(dots[i].dy) < STOPVEL &&
            Math.abs(accel.X) < STOPACC &&
            Math.abs(accel.Y) < STOPACC) {
            dots[i].dx = 0;
            dots[i].dy = 0;
        }
        dots[i].X += dots[i].dx;
        dots[i].Y += dots[i].dy;
        var height, width;
        if (isNetscape) {
            height = window.innerHeight + document.scrollTop;
            width = window.innerWidth + document.scrollLeft;
        } else {	
            height = document.body.clientHeight + document.body.scrollTop;
            width = document.body.clientWidth + document.body.scrollLeft;
        }
        if (dots[i].Y >=  height - DOTSIZE - 1) {
            if (dots[i].dy > 0) {
                dots[i].dy = BOUNCE * -dots[i].dy;
            }
            dots[i].Y = height - DOTSIZE - 1;
        }
        if (dots[i].X >= width - DOTSIZE) {
            if (dots[i].dx > 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = width - DOTSIZE - 1;
        }
        if (dots[i].X < 0) {
            if (dots[i].dx < 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = 0;
        }
        
        // move img to new position
        dots[i].obj.left = dots[i].X;			
        dots[i].obj.top =  dots[i].Y;		
    }
}
</script><body>
</body>
</html>

ich verlange keinen komplet geschriebene Lösung sondern nur ein Angebot wie was auszusehen hat....

CHaoSlayeR · 19. Dezember 2005

OK, also ich hab mir Dein Teil mal angeschaut. Scheint, als hättest Du einen Plan von JavaScript aber scheinbar magst Du DOM nicht sehr, was schade ist, da so die Kompatibilität zu Mozilla/Firefox flöten gegangen ist...

...wie dem auch sei, ich hab mal beispielhaft für ein Rechteck implementiert, wie das auszusehen hat. Dabei habe ich eine kleine Funktion eingefügt ("restrictMove(id_of_ele)"), die anhand eines Elements den Bereich ermittelt, den das Objekt zum Bewegen nutzen kann. Dein "bounce" geht dabei nicht verloren. Diese Funktion wird nur einmal zu Beginn der Initialisierung benötigt...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>lubino</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script LANGUAGE="JavaScript">
var nDots = 2;
var Xpos = 0;
var Ypos = 0;
var DELTAT = .01;
var SEGLEN = 10;
var SPRINGK = 10;
var MASS = 1;
var GRAVITY = 50;
var RESISTANCE = 10;
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
var BOUNCE = 0.75;

// restrict area of movement
var x_start = 0;
var x_end = 0;
var y_start = 0;
var y_end = 0;
var restrict = false;

var isNetscape = navigator.appName=="Netscape";
var followmouse = true;

var dots = new Array();

function init()
{
	if (document.all && window.print) document.body.style.cssText="overflow-x:hidden;overflow-y:scroll";
    var i = 0;
    for (i = 0; i < nDots; i++) {
        dots[i] = new dot(i);
    }
    
    if (!isNetscape) {
    }
    for (i = 0; i < nDots; i++) {
        dots[i].obj.left = dots[i].X;
        dots[i].obj.top = dots[i].Y;
    }

	 restrict = true;
	 restrictMove("area");

    if (isNetscape) {
        startanimate();
    } else {
        setTimeout("startanimate()", 2000);
    }
}
function dot(i) 
{
    this.X = Xpos;
    this.Y = Ypos;
    this.dx = 0;
    this.dy = 0;
    if (isNetscape) {	
        this.obj = eval("document.dot" + i);
    } else {
        this.obj = eval("dot" + i + ".style");
    }
}
function startanimate() {	
    setInterval("animate()", 20);
}
function setInitPositions(dots)
{
    // initialize dot positions to be on top 
    // of the bullets in the <ul>
    var startloc = document.all.tags("LI");
    var i = 0;
    for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
        dots[i+1].X = startloc[i].offsetLeft
            startloc[i].offsetParent.offsetLeft - DOTSIZE;
        dots[i+1].Y = startloc[i].offsetTop +
            startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
    }
    dots[0].X = dots[1].X;
    dots[0].Y = dots[1].Y - SEGLEN;
}
function MoveHandler(e)
{
    Xpos = e.pageX;
    Ypos = e.pageY;	  
    return true;
}
function MoveHandlerIE() {
    Xpos = window.event.x + document.body.scrollLeft;
    Ypos = window.event.y + document.body.scrollTop;	  
}

if (isNetscape) {
    document.captureEvents(Event.MOUSEMOVE);
    document.onMouseMove = MoveHandler;
} else {
    document.onmousemove = MoveHandlerIE;
}


function vec(X, Y)
{
    this.X = X;
    this.Y = Y;
}
function springForce(i, j, spring)
{
    var dx = (dots[i].X - dots[j].X);
    var dy = (dots[i].Y - dots[j].Y);
    var len = Math.sqrt(dx*dx + dy*dy);
    if (len > SEGLEN) {
        var springF = SPRINGK * (len - SEGLEN);
        spring.X += (dx / len) * springF;
        spring.Y += (dy / len) * springF;
    }
}

function restrictMove(id_of_ele) {
	var ele = document.getElementById(id_of_ele);
	x_end = (String(ele.style.width).indexOf("px") != -1) ? ele.style.width : ele.offsetWidth;
	y_end = (String(ele.style.height).indexOf("px") != -1) ? ele.style.height : ele.offsetHeight;

	while(ele) {
		if(ele.offsetLeft) x_start += ele.offsetLeft;
		ele = (ele.offsetParent) ? ele.offsetParent : null;
	}

	ele = document.getElementById(id_of_ele);
	while(ele) {
		if(ele.offsetTop) y_start += ele.offsetTop;
		ele = (ele.offsetParent) ? ele.offsetParent : null;
	}

	x_end += x_start;
	y_end += y_start;
}


function animate() {
    var start = 0;
    if (followmouse) {
	     if(restrict) {
		      dots[0].X = Math.max(x_start, (Math.min(x_end, Xpos)));
		      dots[0].Y = Math.max(y_start, (Math.min(y_end, Ypos)));
		  } else {
            dots[0].X = Xpos;
            dots[0].Y = Ypos;	
		  }
        start = 1;
    }
    
    for (i = start ; i < nDots; i++ ) {
        var spring = new vec(0, 0);
        if (i > 0) {
            springForce(i-1, i, spring);
        }
        if (i < (nDots - 1)) {
            springForce(i+1, i, spring);
        }
        var resist = new vec(-dots[i].dx * RESISTANCE,
            -dots[i].dy * RESISTANCE);
        var accel = new vec((spring.X + resist.X)/ MASS,
            (spring.Y + resist.Y)/ MASS + GRAVITY);
        dots[i].dx += (DELTAT * accel.X);
        dots[i].dy += (DELTAT * accel.Y);
		if (Math.abs(dots[i].dx) < STOPVEL &&
            Math.abs(dots[i].dy) < STOPVEL &&
            Math.abs(accel.X) < STOPACC &&
            Math.abs(accel.Y) < STOPACC) {
            dots[i].dx = 0;
            dots[i].dy = 0;
        }
        dots[i].X += dots[i].dx;
        dots[i].Y += dots[i].dy;
        var height, width;
        if (isNetscape) {
            height = window.innerHeight + document.scrollTop;
            width = window.innerWidth + document.scrollLeft;
        } else {	
            height = document.body.clientHeight + document.body.scrollTop;
            width = document.body.clientWidth + document.body.scrollLeft;
        }
        if (dots[i].Y >=  height - DOTSIZE - 1) {
            if (dots[i].dy > 0) {
                dots[i].dy = BOUNCE * -dots[i].dy;
            }
            dots[i].Y = height - DOTSIZE - 1;
        }
        if (dots[i].X >= width - DOTSIZE) {
            if (dots[i].dx > 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = width - DOTSIZE - 1;
        }
        if (dots[i].X < 0) {
            if (dots[i].dx < 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = 0;
        }
        
        // move img to new position
        dots[i].obj.left = dots[i].X;			
        dots[i].obj.top =  dots[i].Y;		
    }
}
</script>
</head>
<body onload="init()">

<div id="area" style="position:absolute; top:30%; left:30%; width:40%; height:40%; background-color:#DDDDDD; border:1px solid #AAAAAA;">area of movement</div>

<div id="dot0" style="position: absolute; visibility: hidden; height: 15; width: 15;"><img src="naja.gif" height=15 width=15></div>
<div id="dot1" style="position: absolute; height: 15; width: 15;"><img src="lachen.gif" height=15 width=15></div>


</body>
</html>

...so, meine Funktion läuft im IE, in allen Gecko Browser, in Opera und allen anderen, die DOM1 können...

Desweiteren sei angemerkt, das dieses Beispiel nur für rechtecke so funktioniert. Bei einem kreisförmigen Bereich geht das leider nicht so einfach. In dem Fall mußt Du vorher den Mittelpunkt des Bereichs ermitteln und den Radius. Dann muß bei jedem Bewegen der Maus die Entfernung und der Winkel des Mauszeigers zum Bereichsmittelpunkt ermittelt werden (über den Pythagoras z.B.). Ist die Entfernung größer als der Radius, dann ist der Mauszeiger ausserhalb des Bereichs. Ist er kleiner ist er drin.

Das wäre denke ich auch nicht allszu kompliziert, könnte aber die Performance der Animation ein wenig beeinträchtigen, bislang ist's ja noch butterweich...

So, wo ich grad dabei war, Dein JavaScript durchzusehen hab ich mal das HTML korrigiert, das war ja furchtbar. Dass die Browser sowas überhaupt zugelassen haben:

- <div>-Elemente ausserhalb von <body></bod>
- komplett fehlendes </head>

Das sind verdammt grobe Fehler! Aber naja, auch egal. Jedenfalls solltest Du auch drauf achten (gehört übrigens zum besseren Ton) erst auf HTML-Elemente zuzugreifen, wenn die Seite auch vollständig angekommen ist. Somit habe ich Dein "init()" erst bei "onload" aufgerufen.

So, ich hoffe, damit kommst Du jetzt etwas weiter...

Gruß, C]-[aoZ

✔ jave script mit begrenzung

lubino

Mitglied

con-f-use

Erfahrenes Mitglied

CHaoSlayeR

Erfahrenes Mitglied

lubino

Mitglied

CHaoSlayeR

Erfahrenes Mitglied

Neue Beiträge