mehrere div´s dynamisch erzeugen und bewegen

[Felix S]

hallo ich hoffe irgendjemand versteht was ich will!

also:
ich erzeuge mit
var c = document.createElement("div");
ein div und lege größe usw fest
mit
c.setAttribute("id","laser"+nr);
lege ich dann eine dynamische ip an welche ich immer mit
nr++;
verändere.
soweit klappt ja alles so wie ich es will.
mein problem ist das sich diese divs nach oben bewegen sollen.
(sind schüsse bei einem spiel;-) )

nach oben bewege ich sie mit
for (var i=0;i<nr;i++) {
             if ((document.getElementById("laser"+i).style.posTop) > 0) {
                document.getElementById("laser"+i).style.posTop =
                document.getElementById("laser"+i).style.posTop - 15;
             }

und rufe dann die funktion in der der code für die nachoben bewegung steht wieder rekursiv auf.

aber es werden mit der zeit einfach zu viel divs und der IE braucht 90% rechenleistung.
Wie kann ich es lösen das die divs sich wieder zB löschen wenn es 20 gibt?
Mit removeChild() hab ich es probiert aber das hat nicht wirklich geklappt.

Ich glaube zwar nicht das mein Gestammel irgendwer versteht aber danke trotzdem.
Mfg

[Lirpa]

Hallo, am einfachsten ist es wohl, wenn Du in einer Variablen sicherst, welches Div Du als nächstes ansprichst (machst Du im Prinzip ja schon über nr)... An der Stelle im Code, in der Du über createElement ein neues div hinzufügst fragst Du einfach ab, ob nr einen bestimmten Wert überschritten hat...

if (nr > maximale_Anzahl_an_Divs)
{
  nr = 0;
}

dann könntest du
-entweder das alte div löschen und ein neues mit derselben id erstellen,

• oder einfach das gleiche div mit neuen Koordinaten versorgen

if (document.getElementById("laser"+nr) != null) // existiert schon ein Object mit dieser Id ?
{
   //wenn ja neue Position
}
else
{
   //wenn nein, div erzeugen und dann Position setzen
}

nr++;

Du kannst das Ganze auch über ein Array lösen...

Gruß, Lirpa

[Felix S]

Danke Lirpa
Hast mir sehr geholfen obwohl ich es dann ein wenig anders gelöst habe.
Nach dem erzeugen des divs rufe ich die Funktion up() auf die dafür sorgt das die Schüsse alle nach oben wandern.

function up(){

for(var i=0; i<nr; i++){
                 if (document.getElementById("laser"+i) != null) {

document.getElementById("laser"+i).style.posTop =
                    document.getElementById("laser"+i).style.posTop - 10;
                    if(document.getElementById("laser"+i).style.posTop < 20) {
                       document.getElementById("bg").removeChild(document.getElementById("laser"+i));
                    }

}
         }

window.clearTimeout(active);
            active = window.setTimeout("up()",20);

}

Problem ist nur das variable i in der for schleife irgendwann so gross wird das Prozessor wieder leidet ;-)
keine ahnung wie ich das noch lösen werde

[Jürgen Berkemeier]

Hallo Felix,

for(var i=0; i<nr; i++){
                 if (document.getElementById("laser"+i) != null) {

document.getElementById("laser"+i).style.posTop =
                    document.getElementById("laser"+i).style.posTop - 10;
                    if(document.getElementById("laser"+i).style.posTop < 20) {
                       document.getElementById("bg").removeChild(document.getElementById("laser"+i));
                    }

}
         }

in dieser Schleife greifst Du vier- bis fünfmal auf das DIV mit getElementById zu. Definiere doch eine Variable:
laser_i=document.getElementById("laser"+i);
und greif dann auf die Elemente mit "laser_i.style.posTop" zu. Ich glaube, dadurch wird es etwas schneller. Das selbe kannst Du mit "bg" außerhalb der Schleife machen. Aber ich habe auch die Erfahrung gemacht, dass das dynamische Anlegen und Positionieren vieler DIV's viel Zeit kostet. (siehe http://home.vrweb.de/j.berkemeier/Spiralen.html).

Gruß, Jürgen

[Lirpa]

Aber ich habe auch die Erfahrung gemacht, dass das dynamische
Anlegen und Positionieren vieler DIV's viel Zeit kostet.

So isses.

Vielleicht bist Du besser beraten, wenn Du am Anfang des Spiels in einer init()-Funktion einmal alle divs erstellst (ein Array), mit dem style visibility:hidden; und danach nur mit diesen Instanzen arbeitest.

init()

lasers = new Array();

for (i=0; i<maximale_Anzahl_von_Lasern; i++)
{
   lasers[i] = createElement(bla) <- // hier Elemente erzeugen
   lasers[i].style.visibility = 'hidden';
}

Danach arbeitest Du in Deiner Spielroutine mit diesem Array...

Gruß,
Lirpa