Animation mehrerer Objekte

[jack]

Guten Morgen zusammen,

ich bräuchte mal einen Tipp für ein konzeptionelles Problem.

Ich habe ein Objekte mit Hilfe von JS animiert:

function Animal() {
        this.vor = this.forward = function(dDistance) {
                this.doneDistance = 0;
                this.distance = dDistance;
                setTimeout("window."+this.divId+".nextStep()", 1);
        };

this.nextStep = function(dStep) {
                this.doneDistance += curDistance;
                this.posX = this.posX+deltaX;
                this.posY = this.posY+deltaY;
                this.draw();

if (this.doneDistance<this.distance) {
                        setTimeout("window."+this.divId+".nextStep("+this.step+")", 0);
                }

};
}

Animiert werden wird das Objekt durch zB folgende Befehlssequenz:

var a = new Animal();
a.vor(50)
a.vor(100)

Jetzt habe ich nur das Problem, das zwar mit a.vor(50) gestartet wird, dann aber gleich a.vor(100) ausgeführt wird. a bewegt sich also nur um 100 vor und nicht um 150. Das liegt an der setTimeout-Methode.

Jetzt könnte man das ganze so ändern, dass die Animation mit Hilfe einer while-Schleife abläuft, so dass nach a.vor(50) erstmal das vollständig abgearbeitet wird und danach die nächste Zeile gelesen wird.

Dann habe ich aber das Problem, dass ich keine zwei Animals gleichzeitig laufe lassen kann:

var a = new Animal();
a.vor(50)

var b = new Animal();
b.vor(50)

Gleichzeitig ginge nur, dass ich am Anfang alle Objekte generiere und diese dann gleichzeitig mit Hilfe einer Schleife bewege. Allerdings weiß ich am Anfang noch gar nicht die Anzahl der Objekte.