✔ Mehrere Objekte unabhängig voneinander bewegen lassen

yeronimo · 17. November 2008

Hi,

mein problem ist, das ich im moment eine schleife habe die objekte(ein bild) mit koordinaten bewegen soll. das problem ist das ich es nicht hinbekomme, das die einzelnen objekte sich unabhängig vneinander bewegen.

wie kann ich das am besten anstellen ?

der code:

Javascript:

var delta = 5;
var timerID = "";
var delay = 50;
var newDelta = 5;
var newDelta2 = 5;

var images = new Array();

var theTop = 100+20;
var theLeft = 10+20;
var theRight = 290;
var theBottom = 480; ;

var theDOM1 = document.getElementById;

function GetRandom(min, max) {
    if (min > max) {
        return (-1);
    }
    if (min == max) {
        return (min);
    }

    return (min + parseInt(Math.random() * (max - min + 1)));
} 

function animate() {

    var i = 1;
    while (i <= 8) {
        theTop = parseInt(images[i-1]["TOP"]);
        theLeft = parseInt(images[i-1]["LEFT"]);
        //alert(theTop);
        
        if (theTop <= 100) {
            newDelta = delta;
        }
        else
            if (theTop > theBottom) {
            newDelta = -delta;
        }

        if (theLeft <= 10) {
            newDelta2 = delta;
        }
        else
            if (theLeft > theRight) {
            newDelta2 = -delta;
        }
        theLeft = theLeft + newDelta2;
        theTop = theTop + newDelta;

        getObj('square' + i).style.left = theLeft+"px";
        getObj('square' + i).style.top = theTop + "px";
        getObj('square' + i).zIndex = 2;

        getObj('xloc').value = getObj('square1').style.left;
        getObj('yloc').value = getObj('square1').style.top;

        //alert(theLeft);
        //alert(getObj('square1').style.left);
        
        images[i-1]["LEFT"] = theLeft;
        images[i-1]["TOP"] = theTop;

        i++;

    }
    
}

function getObj(elementID)
{
    return document.getElementById(elementID);
}

function startAnim()
{
    if (timerID =="")
    {
        timerID = setInterval("animate();", delay);
    }
}

function init()
{
    
    if (!theDOM1)
    {
        alert("DOM not inited");
    }

    for (i = 0; i < 8; i++) {
        images[i] = new Object();
        images[i]["TOP"] = GetRandom(120,480);
        images[i]["LEFT"] = GetRandom(30, 290);
    }        
            
    startAnim();
}

function shiftTo(x, y, z, c) {
    //getObj('square' + i).style.left = x + "px";
    //getObj('square' + i).style.top = y + "px";
    //getObj('square' + i).zIndex = z;
    
    //getObj('xloc').value = getObj('square1').style.left;
    //getObj('yloc').value = getObj('square1').style.top;

    
    
}

^

die dazugehörige html datei:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<!--
<script type="text/javascript" language="javascript">
    function init() {
        alert("ddd");
    }
</script>
-->

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" language="JavaScript" src="JScript.js">
    </script>
</head>
<body onload="init();">
    <div id ="controls">
    <form id="form1" runat="server">
    
    xloc:<input type="text" id = "xloc" value="0" size="5" />
    yloc:<input type="text" id = "yloc" value="0" size="5" />
    
    </form>
    </div>
    
    <div id = "billardTable">   
    </div>
    <img style="position:absolute;top:100;left:10" src="square.jpg" id="square1" width="20" height="20" />
    <img style="position:absolute;top:480;left:290" src="square.jpg" id="square2" width="20" height="20" />
    <img style="position:absolute;top:200;left:200" src="square.jpg" id="square3" width="20" height="20" />
    <img style="position:absolute;top:100;left:100" src="square.jpg" id="square4" width="20" height="20" />
    <img style="position:absolute;top:150;left:300" src="square.jpg" id="square5" width="20" height="20" />
    <img style="position:absolute;top:170;left:250" src="square.jpg" id="square6" width="20" height="20" />
    <img style="position:absolute;top:177;left:280" src="square.jpg" id="square7" width="20" height="20" />
    <img style="position:absolute;top:350;left:100" src="square.jpg" id="square8" width="20" height="20" />
    
</body>
</html>

mit bestem dank im vorraus

!

ist es nicht sogar einfacher moeglich anstelle des bildes mit javascript oder html ein ausgefuelltes viereck einer bestimmten größe as objekt zu erstellen und das bewegen zu lassen ? ist es dann moeglich auf eins von diesen objekten eine animate/move methode anzuwenden die dann unabhaengig von den anderen objekten laeuft ?

bin fuer jede antwort dankbar

Quaese · 17. November 2008

Hi,

du könntest in der init-Funktion den unterschiedlichen Objekten verschiedene "deltas" zuweisen.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
  <!--
var delta = 5;
var timerID = "";
var delay = 50;
var newDelta = 5;
var newDelta2 = 5;

var images = new Array();

var theTop = 100+20;
var theLeft = 10+20;
var theRight = 290;
var theBottom = 480; ;

var theDOM1 = document.getElementById;

function GetRandom(min, max) {
    if (min > max) {
        return (-1);
    }
    if (min == max) {
        return (min);
    }

    return (min + parseInt(Math.random() * (max - min + 1)));
}

function animate() {

    var i = 1;
    while (i <= 8) {
        theTop = parseInt(images[i]["TOP"]);
        theLeft = parseInt(images[i]["LEFT"]);

        if((theTop > theBottom)||(theTop < 100)) {
            images[i]['delta'] = -1*images[i]['delta'];
        }

				if((theLeft > theRight) || (theLeft <= 10)) {
            images[i]['delta2'] = -1*images[i]['delta2'];
        }

        theLeft = theLeft + images[i]['delta2'];
        theTop = theTop + images[i]['delta'];

        getObj('square' + i).style.left = theLeft+"px";
        getObj('square' + i).style.top = theTop + "px";
        getObj('square' + i).zIndex = 2;

        getObj('xloc').value = getObj('square1').style.left;
        getObj('yloc').value = getObj('square1').style.top;

        images[i]["LEFT"] = theLeft;
        images[i]["TOP"] = theTop;

        i++;

    }

}

function getObj(elementID)
{
    return document.getElementById(elementID);
}

function startAnim()
{
    if (timerID =="")
    {
        timerID = setInterval("animate();", delay);
    }
}

function init(){
    if (!theDOM1){
        alert("DOM not inited");
    }

    for (i = 1; i <= 8; i++) {
        images[i] = new Object();
        images[i]["TOP"] = GetRandom(120,480);
        images[i]["LEFT"] = GetRandom(30, 290);
        delta = (Math.floor(Math.random()*4)) + 2;
        images[i]['delta'] = (Math.floor(Math.random()*2))? -delta : delta;
        delta = (Math.floor(Math.random()*4)) + 2;
        images[i]['delta2'] = (Math.floor(Math.random()*2))? -delta : delta;
    }

    startAnim();
}

function shiftTo(x, y, z, c) {
    //getObj('square' + i).style.left = x + "px";
    //getObj('square' + i).style.top = y + "px";
    //getObj('square' + i).zIndex = z;

    //getObj('xloc').value = getObj('square1').style.left;
    //getObj('yloc').value = getObj('square1').style.top;
}
 //-->
</script>
</head>
<body onload="init();">
	<button onclick="window.clearTimeout(timerID);">clearTimeout</button>
    <div id ="controls">
    <form id="form1" runat="server">

    xloc:<input type="text" id = "xloc" value="0" size="5" />
    yloc:<input type="text" id = "yloc" value="0" size="5" />

    </form>
    </div>

    <div id = "billardTable">
    </div>
    <img style="position:absolute;top:100;left:10" src="square.jpg" id="square1" width="20" height="20" />
    <img style="position:absolute;top:480;left:290" src="square.jpg" id="square2" width="20" height="20" />
    <img style="position:absolute;top:200;left:200" src="square.jpg" id="square3" width="20" height="20" />
    <img style="position:absolute;top:100;left:100" src="square.jpg" id="square4" width="20" height="20" />
    <img style="position:absolute;top:150;left:300" src="square.jpg" id="square5" width="20" height="20" />
    <img style="position:absolute;top:170;left:250" src="square.jpg" id="square6" width="20" height="20" />
    <img style="position:absolute;top:177;left:280" src="square.jpg" id="square7" width="20" height="20" />
    <img style="position:absolute;top:350;left:100" src="square.jpg" id="square8" width="20" height="20" />

</body>
</html>

Vielleicht hift dir das weiter.

Ciao
Quaese

yeronimo · 17. November 2008

hm, so ganz verstehe ich das nicht. was ganz genau soll das bezwecken ?

das aendert ja nix an dem grundproblem, das z.B. 5 quadrate bewegen sich richtung NW, sobald das vorderste die grenze erreicht hat drehen ALLE objekte, auch die die auf der haelfte des weges sind um. das soll so nicht sein, die anderen objekte sollenw eiter bis zur grenze wandern und dann erst umdrehen, wnen auch sie die grenze erreicht haben.

ich glaube verstehe grad was du meintest.... aber so ganz umsetzen kann ich das grad nicht. ich muesste doch dann je nach objekt auch verschiedene deltas aufrufen ?
hm

vielleicht kannst du mir ja noch einen hinweis geben

?

Quaese · 18. November 2008

Hi,

hast du dir den kompletten Quellcode in meinem Beispiel mal angesehen?

Dort habe ich auch die Funktion animate dahingehend verändert, dass die individuellen "deltas" ausgelesen und getestet werden. Damit ändern die Grafiken auch individuell ihre Richtungen, wenn eine Grenze erreicht wurde.

Ciao
Quaese

yeronimo · 18. November 2008

ahhh.

...mein fehler, perfekt gelöst ! allerbesten dank an dich

lg

Maik · 18. November 2008

Hi,

und achte in deinen zukünftigen Beiträgen bitte auf die Netiquette (Nr.15) bzgl. der erwünschten Groß- und Kleinschreibung. Vielen Dank!

mfg Maik

yeronimo · 18. November 2008

kleine frage noch, was genau macht diese zeile hier mit dem fragezeichen ?

Code:

images[i]['delta'] = (Math.floor(Math.random()*2))? -delta : delta;

danke

Quaese · 18. November 2008

Hi,

grundsätzliche Informationen zum Fragezeichen-Doppelpunkt-Konstrukt findest du bei SelfHTML.

In der Zeile selbst wird nichts anderes gemacht, als eine Zufallszahl zu erstellen, die nur die Werte 1 oder 0 annehmen kann. Entsprechend des Wertes wird das "delta" positiv oder negativ definiert. Dadurch entsteht ein zufällige Individualität.

Ciao
Quaese

✔ Mehrere Objekte unabhängig voneinander bewegen lassen

yeronimo

Erfahrenes Mitglied

Quaese

Moderator

yeronimo

Erfahrenes Mitglied

Quaese

Moderator

yeronimo

Erfahrenes Mitglied

Maik

yeronimo

Erfahrenes Mitglied

Quaese

Moderator

Neue Beiträge