Anzeige
Tutorialbeschreibung

JavaScript bringt Farbe auf (hinter) die Seite!

JavaScript bringt Farbe auf (hinter) die Seite!

Mit diesem, meinem zweiten, Tutorial möchte ich euch einen netten Effekt vorstellen, den ich eigentlich für ein Wolken-schweben-lassen-Script benutzt habe, das ich nun aber etwas umfangreicher ausgebaut und mit Kollisionsabfragen versehen habe. Ich hoffe, es gefällt euch; ein lustiges Gimmik für eine einzelne Webseite gibt es allemal ab. Ich würde es aber nicht für einen ganzen Internetauftritt empfehlen. ;-)


Die gesamte Animation ist natürlich in JavaScript geschrieben, aber vorher benötigen wir diverse HTML- und CSS-Elemente, um der Seite ein Grundlayout zu verpassen.

Fangen wir doch gleich einmal mit dem Erstellen der Datei an. Erstellt eine HTML-Datei z. B. mit dem Namen animation.html und schreibt unser Gerüst hinein:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<html>


<head>
	<title>Würfelkollision</title>
</head>


<body>
	<div id="container">
		<h2><u>JavaScript bringt Farbe auf (hinter) die Seite!</u></h3>
		<p>... IRGEND EIN TEXT ...</p>
		<p>... IRGEND EIN TEXT ...</p>
	</div>

	<div id="box01"></div>
	<div id="box02"></div>
	<div id="box03"></div>
	<div id="box04"></div>
	<div id="box05"></div>
</body>


</html>

Das wäre es erst einmal. Eine ganz einfache HTML-Struktur mit einigen Divs (Divisions = Bereiche) im Body-Tag. Der #container beinhaltet unseren Beispieltext und die Divs #box01 bis #box05 werden unsere animierten Quadrate.

Damit es nun auch was anderes zu sehen gibt als nur unseren Text, formatieren wir die Divs mit CSS innerhalb derselben Datei. Dazu erweitern wir obenstehenden Code zu diesem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<html>


<head>
	<title>Quadratkollision</title>

	<style type="text/css">
		body   {margin: 0; padding: 0; overflow: hidden;}

		#box01 {position: absolute; z-index: -1; background-color: red;}
		#box02 {position: absolute; z-index: -1; background-color: aqua;}
		#box03 {position: absolute; z-index: -1; background-color: purple;}
		#box04 {position: absolute; z-index: -1; background-color: green;}
		#box05 {position: absolute; z-index: -1; background-color: yellow;}
		
		#container {background-image:	url('hintergrund.png');
		            margin:		75px auto;
		            padding:		35px;
		            width:		608px;
		            height:		508px;}
	</style>
</head>


<body>
	<div id="container">
		<h2><u>JavaScript bringt Farbe auf (hinter) die Seite!</u></h3>
		<p>... IRGENDEIN TEXT ...</p>
		<p>... IRGENDEIN TEXT ...</p>
	</div>

	<div id="box01" style="left:   0px; top:   0px; width:  40px; height:  40px;"></div>
	<div id="box02" style="left:  75px; top:   0px; width:  50px; height:  50px;"></div>
	<div id="box03" style="left: 200px; top:  75px; width:  65px; height:  65px;"></div>
	<div id="box04" style="left: 150px; top: 150px; width:  85px; height:  85px;"></div>
	<div id="box05" style="left:  30px; top: 260px; width: 110px; height: 110px;"></div>
</body>


</html>

Unser Body-Tag hat drei Fixes bekommen: Margin und Padding (den inneren und äußeren Abstand des Body-Inhalts auf 0 Pixel; dieser ist nämlich bei manchen älteren Browsern standardmäßig auf andere Werte eingestellt) und ein Overflow Hidden, das die Scrollbalken der Webseite unterbindet; dies wird für das JavaScript benötigt.

Die Boxen haben absolute Positionierungen erhalten, damit wir sie unabhängig voneinander positionieren können. Der Z-Index -1 rückt sie zusätzlich eine Ebene in den Hintergrund, also hinter unseren #container. Zusätzlich habe ich ihnen noch ein paar bunte Hintergrundfarben gegeben.

Der #container hat ein paar weitere Einstellungen bekommen, u.a. ein halb-transparentes Hintergrundbild, hinter dem die Quadrate später zu sehen sind.

Die Boxen haben innerhalb des Body-Tags noch Inline-Styles mit verschiedenen Positionsangaben (Left, Top) und Größen (Width, Height) bekommen. Nur mit Inline-Styles ist es für JavaScript möglich, diese Werte in Scripten auszulesen und zu verwerten.

Beginnen wir nun mit dem eigentlichen Thema: der Animation. Fügt ein Script-Tag an folgender Stelle ein:
...
	</style>
 
	<script type="text/javascript">
		... HIER KOMMT UNSER JS-CODE HINEIN ...
	</script>
</head>


<body>
...

Im Folgenden befinden wir uns immer in dem Script-Tag ...

Ich möchte nun zuerst die Fensterbreite und -höhe des Browserfensters speichern lassen, damit die Quadrate immer in diesem Bereich umherschwirren.
<script type="text/javascript">
	function bildBreite() {
		if(navigator.userAgent.indexOf('MSIE') > -1) {
			buehneX = document.documentElement.clientWidth; }
		if(navigator.userAgent.indexOf('Gecko') > -1) {
			buehneX = window.innerWidth; }
		return buehneX;
	}
	function bildHoehe() {
		if(navigator.userAgent.indexOf('MSIE') > -1) {
			buehneY = document.documentElement.clientHeight; }
		if(navigator.userAgent.indexOf('Gecko') > -1) {
			buehneY = window.innerHeight; }
		return buehneY;
	}

	...
</script>

Für diese zwei Funktionen möchte ich mich bei c00kies vom gulli-Board bedanken, der sie dort in einer zusammengefassten Form beigetragen hat. Eine kurze Erklärung: In den If-Abfragen wird geklärt, ob der Client einen auf MSIE oder Gecko basierenden Browser benutzt und je nachdem wird die Fensterbreite bzw. -höhe auf verschiedene Arten ausgelesen. Danach wird die Variable über ein Return aus der Funktion gegeben.

Nun kommen wir zur Hauptfunktion der Animation:
<script type="text/javascript">
	function bildBreite() { ... }
	function bildHoehe() { ... }

	/* String:	element		= ID des Elements
	   Int:		gLinks		= Bewegungsgrenze links in Pixeln
	   Int:		gRechts		= Bewegungsgrenze rechts in Pixeln
	   Int:		gOben		= Bewegungsgrenze oben in Pixeln
	   Int:		gUnten		= Bewegungsgrenze unten in Pixeln
	   Boolean:	hRichtung	= Horizontale Startrichtung: true = rechts, false = links
	   Boolean:	vRichtung	= Vertikale Startrichtung: true = runter, false = hoch
	   Int:		hTempo		= Horizontale Geschwindigkeit in Pixeln
	   Int:		vTempo		= Vertikale Geschwindigkeit in Pixeln
	   Int:		intervall	= Zeit in Millisekunden, nach der die Funktion erneut startet */

	function bewegen(element, gLinks, gRechts, gOben, gUnten, hRichtung, vRichtung, hTempo, vTempo, intervall, arrZiele) {
		...
	}
</script>

Damit wir möglichst viele Einstellungsmöglichkeiten für jedes einzelne Quadrat haben, werden der Funtkion bewegen() einige Parameter innerhalb der normalen Klammern übergeben, die in dem Kommentarblock darüber erklärt sind. Beispielsweise gibt das Intervall die Zeit an, nach der die Funktion neu startet. Dazu definieren wir später ein setTimeout().
<script type="text/javascript">
	function bildBreite() { ... }
	function bildHoehe() { ... }

	/* ... */

	function bewegen(element, gLinks, gRechts, gOben, gUnten, hRichtung, vRichtung, hTempo, vTempo, intervall, arrZiele) {
		// Breite und Hoehe des Elements
		var elementBreite	= document.getElementById(element).style.width;
		    elementBreite	= parseInt(elementBreite.replace("px", ""));
		var elementHoehe	= document.getElementById(element).style.height;
		    elementHoehe	= parseInt(elementHoehe.replace("px", ""));

		// Aktuelle horizontale Position des Objekts
		var hPosition		= document.getElementById(element).style.left;
		    hPosition		= parseInt(hPosition.replace("px", ""));
		var hPositionNeu 	= hPosition + hTempo;

		// Aktuelle vertikale Position des Objekts
		var vPosition		= document.getElementById(element).style.top;
		    vPosition		= parseInt(vPosition.replace("px", ""));
		var vPositionNeu 	= vPosition + vTempo;

		// Neue Positionswerte an Objekt uebergeben
		document.getElementById(element).style.left = hPositionNeu + "px";
		document.getElementById(element).style.top  = vPositionNeu + "px";
	}
</script>

Sobald beim späteren Aufruf der Funktion der Parameter element z.B. den Wert 'box01' (inklusive einfache Anführungszeichen!) zugewiesen bekommt, können die oberen Zeilen arbeiten. Eine Variable elementBreite wird angelegt und bekommt die CSS-Inline-Style-Eigenschaft der Breite gespeichert. Da diesem Wert aber die Buchstaben "px" anhängen (z.B. 50px), müssen wir diese Buchstaben abschneiden oder, wie in diesem Fall, einfach durch nichts ersetzen. Dabei wird noch die parseInt-Funktion außen herumgelegt, um den neuen Wert direkt zu einem Integer zu machen, mit dem wir später rechnen können. Dasselbe geschieht mit der Höhe, der horizontalen und der vertikalen Position.

Die Positionen werden benutzt, um danach mit dem Parameter  hTempo  und vTempo      die neuen Positionen hPositionNeu und vPositionNeu zu errechnen. Anschließend werden die CSS-Eigenschaften .style.left und .style.top mit neuen Werten versorgt und ebenfalls wieder das "px" angehängt.

Somit haben wir jetzt die Bewegung der Quadrate, allerdings nur ein einziges Mal. Aber bevor wir die Funktion wiederholen lassen, schreiben wir sie erst zu Ende. ;-)
<script type="text/javascript">
	function bildBreite() { ... }
	function bildHoehe() { ... }

	/* ... */

	function bewegen(element, gLinks, gRechts, gOben, gUnten, hRichtung, vRichtung, hTempo, vTempo, intervall, arrZiele) {
		// Breite und Hoehe des Elements
		...

		// Aktuelle horizontale Position des Objekts
		...

		// Aktuelle vertikale Position des Objekts
		...

		// Neue Positionswerte an Objekt uebergeben
		...

		// Richtungswechsel horizontal
		// Wenn die linke Grenze erreicht wurde, hRichtung auf true (rechts) setzen
		if (!hRichtung && hPosition <= gLinks) {
			hRichtung	= true;
			hTempo		= hTempo * -1; }
		// Wenn die rechte Grenze erreicht wurde, hRichtung auf false (links) setzen
		if (hRichtung && hPosition >= gRechts - elementBreite) {
			hRichtung	= false;
			hTempo		= hTempo * -1; }

		// Richtungswechsel vertikal
		// Wenn die untere Grenze erreicht wurde, vRichtung auf true (runter) setzen
		if (!vRichtung && vPosition <= gOben) {
			vRichtung	= true;
			vTempo		= vTempo * -1; }
		// Wenn die untere Grenze erreicht wurde, vRichtung auf false (hoch) setzen
		if (vRichtung && vPosition >= gUnten - elementHoehe) {
			vRichtung	= false;
			vTempo		= vTempo * -1; }
	}
</script>

Hier folgen nun einige If-Abfragen zur Bestimmung der "Flugrichtung" der Quadrate. Wir haben für beispielsweise das horizontale Tempo 5 Pixel angegeben und die Funktion bewegt das Quadrat durch den Browser; dabei soll es ja nicht auf einmal verschwinden, sondern an allen vier Kanten zurückprallen. Die erste Abfrage prüft z.B., ob das Objekt die linke Kante des Fensters durchschlägt; dafür haben wir den Parameter hRichtung als Boolean definiert, der bewirkt, dass der Richtungswechsel auch wirklich nur einmal bei Kantenübertritt ausgeführt wird. Je nach Tempo könnte er ansonsten nämlich mehrfach ausgeführt werden, was ja nicht gewollt ist.

Die drei anderen Abfragen funktionieren genau gleich. Keine Sorge, falls ihr jetzt noch nicht alles verstanden habt: Ich erkläre am Ende des Tutorials noch einmal den Ablauf der Funktion mit angegebenen Werten.

Nun schreiben wir den Code für die Kollisionsabfragen:
<script type="text/javascript">
	function bildBreite() { ... }
	function bildHoehe() { ... }

	/* ... */

	function bewegen(element, gLinks, gRechts, gOben, gUnten, hRichtung, vRichtung, hTempo, vTempo, intervall, arrZiele) {
		// Breite und Hoehe des Elements
		...

		// Aktuelle horizontale Position des Objekts
		...

		// Aktuelle vertikale Position des Objekts
		...

		// Neue Positionswerte an Objekt uebergeben
		...

		// Richtungswechsel horizontal
		...

		// Richtungswechsel vertikal
		...

		// Kollisionskanten des Elements
		var lKollision        = hPosition;
		var rKollision        = hPosition + elementBreite;
		var oKollision        = vPosition;
		var uKollision        = vPosition + elementHoehe;

		// Kollision fuer jedes Array-Ziel berechnen
		for (var i = 0; i < arrZiele.length; i++) {
			// Werte des Ziel-Elements
			var zielBreite       = document.getElementById(arrZiele[i]).style.width;
			    zielBreite       = parseInt(zielBreite.replace("px", ""));
			var zielHoehe        = document.getElementById(arrZiele[i]).style.height;
			    zielHoehe        = parseInt(zielHoehe.replace("px", ""));
			var zielHPosition    = document.getElementById(arrZiele[i]).style.left;
			    zielHPosition    = parseInt(zielHPosition.replace("px", ""));
			var zielVPosition    = document.getElementById(arrZiele[i]).style.top;
			    zielVPosition    = parseInt(zielVPosition.replace("px", ""));

			// Kollisionskanten des Ziel-Elements
			var lKollisionZiel	= zielHPosition;
			var rKollisionZiel	= zielHPosition + zielBreite;
			var oKollisionZiel	= zielVPosition;
			var uKollisionZiel	= zielVPosition + zielHoehe;

			// Richtungswechsel bei Kollision ...
			// ... von Links
			if (hRichtung) {
				if ((rKollision >= lKollisionZiel && rKollision <= lKollisionZiel + hTempo * 2) && (oKollision <= uKollisionZiel && uKollision >= oKollisionZiel)) {
					hRichtung	= false;
					hTempo		= hTempo * -1;
				}
			}

			// ... von Rechts
			if (!hRichtung) {
				if ((lKollision <= rKollisionZiel && lKollision >= rKollisionZiel + hTempo * 2) && (oKollision <= uKollisionZiel && uKollision >= oKollisionZiel)) {
					hRichtung	= true;
					hTempo		= hTempo * -1;
				}
			}

			// ... von Oben
			if (vRichtung) {
				if ((uKollision >= oKollisionZiel && uKollision <= oKollisionZiel + vTempo * 2) && (lKollision <= rKollisionZiel && rKollision >= lKollisionZiel)) {
					vRichtung	= false;
					vTempo		= vTempo * -1;
				}
			}

			// ... von Unten
			if (!vRichtung) {
				if ((oKollision <= uKollisionZiel && oKollision >= uKollisionZiel + vTempo * 2) && (lKollision <= rKollisionZiel && rKollision >= lKollisionZiel)) {
					vRichtung	= true;
					vTempo		= vTempo * -1;
				}
			}
		}
	}
</script>

Wir definieren die Variablen für die Kollisionsbestimmung. Dazu benötigen wir die 4 Kanten des Elements, welches die Funktion durch das Browserfenster "fliegen" lässt (lKollision, rKollision, oKollision, uKollision; jeweils links, rechts, oben und unten). Und die 4 Kanten der Quadrate, die wir mittels ID-Namen innerhalb eines Ziel-Arrays an die Funktion übergeben.

Nun wird für jedes Quadrat in diesem Array dessen linke, rechte, obere und untere Kollisionskante ausgelesen und berechnet. Und anschließend ähnlich der Kollisionsabfragen des Browserfensters geprüft, ob das aktuelle Element eines der Quadrate im Ziel-Array berührt. Wenn ja, wird entsprechend der Aufschlagkante die Richtung geändert. Beispielsweise in If-Abfrage 1: Wenn die "Flugrichtung" (hRichtung) nach rechts gestellt ist, wird geprüft, ob die rechte Kollisionskante des Elements größer/gleich der linken Kollisionskante des Quadrats ist und gleichzeitig aber kleiner als die linke Kollisionskante plus einem Toleranzwert, der dem hTemop * 2 entspricht. (Dies bezweckt, wenn die Quadrate sich zu schnell überschneiden, dass ein gewisser Spielraum herrscht, in dem sie trotzdem zurückprallen).

 
Wenn hier z.B. das grüne Element von links mit hTempo 5 kommt, kann es den gesamten violetten Bereich berühren, um wieder nach links abzuprallen.

KollisionBilder



Wäre dieser Toleranzbereich nicht vorhanden, könnte es bei einer zu hohen "Geschwindigkeit" sein, dass die Quadrate einfach durcheinander hindurch fliegen.

Nach der Kollisionsabfrage muss noch eine kleine Vorbereitung für die setTimeout-Funktion getroffen werden, nämlich, das Ziel-Array in einen String umzuwandeln, da setTimeout nur so richtig arbeiten kann.
<script type="text/javascript">
	function bildBreite() { ... }
	function bildHoehe() { ... }

	/* ... */

	function bewegen(element, gLinks, gRechts, gOben, gUnten, hRichtung, vRichtung, hTempo, vTempo, intervall, arrZiele) {
		// Breite und Hoehe des Elements
		...

		// Aktuelle horizontale Position des Objekts
		...

		// Aktuelle vertikale Position des Objekts
		...

		// Neue Positionswerte an Objekt uebergeben
		...

		// Richtungswechsel horizontal
		...

		// Richtungswechsel vertikal
		...
		
		// Kollisionskanten des Elements
		...

		// Kollision fuer jedes Array-Ziel berechnen
		for (var i = 0; i < arrZiele.length; i++) {
			...
		}

		// Ziel-Array fuer setTimeout als String schreiben
		var arrZieleString	= new String;
		    arrZieleString	= "[";
			for (var j = 0; j < arrZiele.length; j++) {
				if (j < arrZiele.length - 1) {
					arrZieleString += "'" + arrZiele[j] + "', ";
				}
				else {
					arrZieleString += "'" + arrZiele[j] + "'";
				}
			}
		    arrZieleString += "]";

		// Funktion durch setTimeout dauerhaft laufen lassen
		setTimeout("bewegen('"+element+"', "+gLinks+ ", "+bildBreite()+", "+gOben+", "+bildHoehe()+", "+hRichtung+", "+vRichtung+", "+hTempo+", "+vTempo+", "+intervall+", "+arrZieleString+")", intervall);
	}
</script>

Jedes Array Element wird durch eine weitere For-Schleife in den String eingebettet, sodass z.B. aus dem Array [box01, box02, box03, box05] wieder der String "['box01', 'box02', 'box03', 'box05']" wird, den wir beim ersten Aufruf der Funktion auch so angeben werden.

Danach lassen wir durch setTimout die Funktion bewegen() erneut nach der Zeit intervall ausführen.

Innerhalb des setTimeouts muss die auszuführende Funktion als ein einziger String geschrieben werden, und natürlich mit unseren benutzten Variablen.

Hier sehen wir nun auch zum ersten Mal die Anwendung unserer bildBreite- und bildHoehe-Funktionen. Sie liefern beim Ausführen ähnlich wie Variablen den Wert aus, den wir durch Return in der entsprechenden Funktion festgelegt haben.

Zu guter Letzt starten wir die Funktion am Ende des Body-Bereichs, direkt hinter den Boxen:
...
	<div id="box05" style="left:  30px; top: 260px; width: 110px; height: 110px;"></div>

	<script type="text/javascript">
		bewegen('box01', 0, bildBreite(), 0, bildHoehe(), true, true, 5, 2, 30, ['box02', 'box03', 'box04', 'box05']);
		bewegen('box02', 0, bildBreite(), 0, bildHoehe(), true, true, 2, 5, 30, ['box01', 'box03', 'box04', 'box05']);
		bewegen('box03', 0, bildBreite(), 0, bildHoehe(), true, true, 4, 1, 30, ['box01', 'box02', 'box04', 'box05']);
		bewegen('box04', 0, bildBreite(), 0, bildHoehe(), true, true, 4, 5, 30, ['box01', 'box02', 'box03', 'box05']);
		bewegen('box05', 0, bildBreite(), 0, bildHoehe(), true, true, 3, 5, 30, ['box01', 'box02', 'box03', 'box04']);
	</script>

</body>
...

So, und wie versprochen die Erklärung anhand des zweiten Aufrufs.

Die Funktion bewegen wird gestartet und erhält den Parameter 'box02' als element-ID. Mit diesem kann jetzt die Breite und Höhe sowie dessen Position aus dem Inline-Style gelesen werden.

Hier, bei box02, wären es dann:
   elementBreite    = 50;
   elementHoehe     = 50;
   hPosition        = 75;
   vPosition        =  0;

Dann wird zu den Positionen der passende Tempo-Wert hinzuaddiert, um die neue Position zu bestimmen.
   hPositionNeu     = 75 + 2    ( = 77 );
   vPositionNeu     =  0 + 5    ( =  5 );

Daraufhin werden diese beiden neuen Werte in die Style-Eigenschaften eingeschrieben - das Element bewegt sich.

Als Nächstes kommt die Kollisionsabfrage mit den Fensterkanten. Hat hPosition beispielsweise nach mehrmaligem Ausführen der bewegen-Funktion endlich den Wert der Grenze rechts minus seiner eigenen Breite erreicht (wir wollen ja, dass die rechte Kante des Elements kollidiert), wird die Richtung umgekehrt.

Bei einer Fensterbreite von 1280 muss die hPosition 1280 - 50 = 1230 betragen. Also muss die Funktion 578 Mal durchlaufen, bis das Element diesen Wert erreicht:
   hPositionNeu     = 75 + 2 (* 578 Durchläufe)    ( = 1231 );

Der Wert von hPosition ist beim nächsten Funktionsdurchlauf also 1231 und demnach höher als die rechte Grenze mit 1230.
   if (hRichtung                   &&  hPosition >= gRechts - elementBreite) {
     hRichtung = false;
     hTempo    = hTempo * -1;

   Wenn (hRichtung gleich true ist UND 1231 größer/gleich 1230) dann
     hRichtung auf false (nach links) setzen und
     hTemtpo   = 2 * -1    ( = -2 )

Durch hRichtung = false, kann nun eine Kollision von rechts überprüft werden und durch ein negatives hTempo wird das Element nach links bewegt.

Die Kollision der einzelnen Quadrate funktioniert auf dieselbe Weise, wenn auch mit einem anderen Wertebereich, nämlich, wie schon erklärt, dem Toleranzbereich. Sagen wir mal, die horizontale Position des Element-Quadrats ist 500 und es kommt gerade von rechts. Dann ist hRichtung = false und ein zweites Quadrat "fliegt" auch nach links, aber in einem langsameren hTempo. Nach einer bestimmten Anzahl an Funktionsdurchläufen wird das Element-Quadrat das zweite Quadrat erreichen und dessen rechte Kante überschneiden; dabei muss es sich aber zusätzlich zwischen der oberen und unteren Kante des Ziel-Quadrats befinden:
   hRichtung      = false;   // Prüfvariable "nach links"
   hTempo         = -4;      // Tempo des Elements negativ
   lKollision     = 500;     // Aktuelle hPosition des Elements
   oKollision     = 100;     // Aktuelle vPosition des Elements
   uKollision     = 150;     // Aktuelle untere Kante des Elements, wenn 50px hoch
   rKollisionZiel = 503;     // Rechte Kante des Ziel-Quadrats
   oKollisionZiel = 75;      // Obere  Kante des Ziel-Quadrats
   uKollisionZiel = 300;     // Untere Kante des Ziel-Quadrats

   if (!hRichtung) {
     if ((lKollision <= rKollisionZiel && lKollision >= rKollisionZiel + hTempo * 2) && (oKollision <= uKollisionZiel && uKollision >= oKollisionZiel)) {
       hRichtung    = true;
       hTempo       = hTempo * -1;
     }
   }

   // wird zu ...

   Wenn (hRichtung false ist) {
     Wenn ((500 <= 503 && 500 >= 503 + (-4) * 2) UND (100 <= 300 UND 150 >= 75)) dann
       hRichtung    = true;
       hTempo       = -4 * -1    ( = 4 );
     }
   }

Wenn also dieser Toleranzbreich getroffen wird und wenn aktuell die richtige Flugrichtung eingestellt ist, prallt das Element-Quadrat ab.

Und im Ganzen kommt dann ein schönes Schauspiel heraus.

>> Zur Vorschau geht es hier entlang.

Ich hoffe, es hat euch gefallen und ihr könnt es irgendwann einmal gebrauchen. ;-)

MfG Kalabrix

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von TRex2003
  • 12.05.2011 - 12:20

Tolles Tutorial :) Geht zwar mit frameworks wie jquery viel einfacher, aber so lernt man die Basics.

Portrait von Designerist
  • 06.05.2011 - 22:14

Das ist ja ein super Spass!!! Hab vielen Dank für deine grosse Arbeit. Ich werde mich gleich dahinterklemmen.

Portrait von thomaskeil
  • 06.05.2011 - 10:46

Sehr gut beschrieben, und ich für mich als Anfänger über den konkreten Effekt hinaus auch super um mehr über javascript an einem schönen und komplexen Beispiel zu lernen, Daumen hoch!

Portrait von pixelbienchen
  • 05.05.2011 - 10:46

auf jeden Fall eine anschauliche Methode, auch Laien Java-Script auf unterhaltsame Art ein Stückchen näher zu bringen ;-)

allerdings meine ich, im Code einen kleinen Fehler entdeckt zu haben:

müsste es bei der Definition der Kollisionskanten des Ziel-Elements nicht heißen

var uKollisionZiel = zielVPosition + zielHoehe;
anstatt
var uKollisionZiel = zielVPosition + zielBreite;

falls man mal nicht mit Quadraten arbeiten will ;-)

Portrait von Kalabrix
  • 06.05.2011 - 22:59

Oh, ja. Ganz richtig gesehen. Ist mir wohl beim kopieren durch die Lappen gegangen, ist aber schon als Änderungswunsch an stellamarina rausgegangen :-)

Portrait von Juergenbln
  • 04.05.2011 - 13:37

Gut erklärt,

aber in meinen Augen eher eine Spielerei als wirklich etwas nützliches.
Ich denke das es kaum einen HP-Bastler gibt der solche gimmicks verwenden wird. Schade um die 35 Punkte.
Ganz ehrlich,

Portrait von Kalabrix
  • 06.05.2011 - 23:00

Danke sehr für die konstruktive Kritik. Wie im Einleitungstext schon gesagt ist es mal für eine einzelne Seite (schon richtig) als Spielerei gedacht. Mehr soll es ja auch nicht erfüllen, ging mir lediglich nur um Kollisionsabfragen und dergleichen.

Portrait von kleeaar
  • 03.05.2011 - 10:11

sehr nice!
Wirklich sehr umfangreiches Tutorial, das auch für Fortgeschrittene einiges an Informationen bereithält!

x
×
×