5. Bewegung

Um Bereiche neu im Browser-Fenster zu positionieren verwende ich die Funktionen moveObjTo und moveObjBy meiner kleinen Funktionensammlung crossObj.js, die ganz gleich aufgebaut sind wie showObj und hideObj. Die Namen der Funktionen sprechen wohl für sich, ihr einziger Zweck ist es, den Zugriff auf diese Funktionalitäten crossbrowser-fähig zu machen.
Ich vermeide es riesige Bibliotheken anzulegen (siehe etwa Dan Steinman), die dann alles leisten was man sich vorstellen kann, da es unvermeidbar ist, dass diese viel zu gross werden, wenn man sie halbwegs flexibel gestalten will. Stattdessen stellt crossObj.js nur die Grundfunktionalitäten zur Verfügung und bleibt damit rank und schlank.

Für eine kontinuierliche Bewegung verwenden wir die Funktion setTimeout. Damit können wir in vorgegebenen Zeitabschnitten, sagen wir alle 100 Millisekunden, neue Positionen berechnen und zuweisen. Ein Beispiel ist das simple Spiel ping pong (hab ich im Jahre 99 programmiert; daher darf man den Quellcode nicht mit dem in diesem Artikel gesagtem vergleichen). Bei diesem Spiel sieht man eine große Schwäche von DHTML: je nach Browser, Plattform und Rechner laufen Bewegungen in unterschiedlicher Geschwindigkeit, was für Spiele üblicherweise tödlich ist.

Ich möchte hier noch eine Funktion vorstellen, die eine kontinuierliche Bewegung gewährleistet und recht bequem zu handhaben ist:

slide red slide green

   var sP = new Array();
   var sN = 0;

   function initSlide(objName,x1,y1,x2,y2,slidingTime,moveSteps)
	{
	sN++;
	sP[sN] = new Object();
	sP[sN].objName = objName;
	sP[sN].step = 0;
	sP[sN].nrOfSteps = moveSteps;
	sP[sN].to = (slidingTime/moveSteps);
	sP[sN].left = x1;sP[sN].top = y1;
	sP[sN].diffX = (x2-x1)/moveSteps;
	sP[sN].diffY = (y2-y1)/moveSteps;
	moveObjTo(objName,x1,y1);
	eval("slide"+sN+" = new Function(\"\",\"sP["+sN+"].step++;       
	if(sP["+sN+"].step<=sP["+sN+"].nrOfSteps){sP["+sN+"].left        
	+=sP["+sN+"].diffX;sP["+sN+"].top+=sP["+sN+"].diffY;moveObjTo    
	(sP["+sN+"].objName,sP["+sN+"].left,sP["+sN+"].top);setTimeout   
	('slide"+sN+"()',sP["+sN+"].to);}\")");
	eval("slide"+sN+"()");
	}

Im wesentlichen passiert hier folgendes: in der globalen Variable sP wird für jeden Slide-Vorgang ein Speicherobjekt sP[sN] angelegt, in dem wir all die wichtigen Details des Vorgangs ablegen, wie Start- und Endpunkt, Anzahl der Bewegungsschritte, Weite und Dauer eines Schrittes usw. Dann wird für jeden Vorgang per eval() eine eigene Bewegungsfunktion angelegt, die regelmäßig durchlaufen wird. So können auch mehrere Objekte gleichzeitig durch die Gegend gleiten.
In der erzeugten Funktion passiert nichts anderes, als dass die x- und y-Werte des Objekts kontinuierlich um eine Schrittweite verändert werden und nach einem berechneten Zeitintervall die Funktion sich selbst wieder aufruft.