JavaScript: Canvas: Bewegte Bilder

Programmieren mit JavaScript

Bewegte Bilder (Animationen)

Canvas - Figuren "stempeln" Inhalt HTML - Ausgabe

Beispiel 1

Den Quelltext für das Beispiel nebenan finden Sie unter

canvasDynamischMuehle.html

setInterval( .. )

Wie entsteht Bewegung auf dem Bildschirm?

Es muss ständig etwas passieren, das Bild oder Teile davon müssen neu gezeichnet werden! Dazu bestellt man im body - Tag nicht das - einmalige - "zeichne>()", sondern mit

<body  onload="setInterval('zeichne()',20);">

die ständige Wiederholung der "zeichne"- Funktion. Alle 20 Millisekungen wird in diesem Beispiel die "zeichne"-Funktion aufgerufen.

globale Variablen

Wie zeichnet man die Flügel an anderen Positionen ?

Das System muss sich die jeweile "Flügelposition" bis zum nächsten Aufruf von "zeichne" merken. Das geht aber nicht innerhalb der "zeichne"- Funktion, weil die Variablen, die dort stehen, immer wieder neu erzeugt werden. Die richtige Stelle ist deshalb außerhalb und vor den Funktionen "windmuehle2" und "zeichne". Variablen, die dort angegeben werden, stehen allen Funktionen zur Verfügung (was wir in diesem Beispiel nicht benötigen) und behalten ihren Wert von Aufruf zu Aufruf. Der Wert kann in den Funktionen natürlich geändert werden. Solche Variablen nennt man "global" (im Gegensatz zu "lokal" - innerhalb einer Funktion).

<script type="text/javascript">
    	var winkel1 =0; //fuer die windmuehlen
	function windmuehle2 (cv, xpos, ypos, hoehe, winkel, wandfarbe, fluegelfarbe){ ...

Löschen - Winkel ändern - neu zeichnen

	function zeichne(){
	var canvas2 = document.getElementById('Canvas2');
	var bild2 = canvas2.getContext('2d');

	bild2.fillStyle="white";
	bild2.fillRect(0,0,canvas2.width, canvas2.height); 	// alles loeschen

	winkel1 = winkel1 + 0.02;				// Winkel fuer die erste Muehle
	windmuehle2(bild2,50, 120,70,winkel1, "blue","red");	// Muehle zeichnen

	winkel2 = winkel2 + 0.04;				// usw.
	windmuehle2(bild2,150, 120,70,winkel2, "orange","blue");

	winkel3 = winkel3 + 0.06;
	windmuehle2(bild2,250, 120,70,winkel3, "black","red");

	}

ein bisschen Mathe ..

	function windmuehle2 (cv, xpos, ypos, hoehe, winkel, wandfarbe, fluegelfarbe){
		// Gebaeude zeichnen wie vorher

		cv.strokeStyle= fluegelfarbe;
                 cv.lineWidth=2;
		var d = hoehe/10;
		dy = 7*d*Math.sin(winkel);	// Punkt auf dem Kreis für das Fluegelende
		dx = 7*d*Math.cos(winkel);
		cv.beginPath();
		cv.moveTo( xpos+d, ypos-hoehe+d);	// die Flügel
		cv.lineTo( xpos+d+dx, ypos-hoehe+d-dy);
		cv.moveTo( xpos+d, ypos-hoehe+d);
		cv.lineTo( xpos+d-dy, ypos-hoehe+d-dx);
		cv.moveTo( xpos+d, ypos-hoehe+d);
		cv.lineTo( xpos+d-dx, ypos-hoehe+d+dy);
		cv.moveTo( xpos+d, ypos-hoehe+d);
		cv.lineTo( xpos+d+dy, ypos-hoehe+d+dx);
      }

Aufgabe 1

Lasse ein Auto "fahren"!

Beispiel 2

Den Quelltext für das Beispiel nebenan finden Sie unter

canvasDynamisch.html

Kugel bewegen

Nach den Ausführungen über die Windmühlen oben ist die Programmierung des Balls recht einfach: immer wieder an einer weiteren Position zeichnen lassen. Als globale Variablen brauchen wir die Position des Kugel und die Geschwindigkeit, weil die Kugel immer langsamer werden soll.

    	var vx=5;	//Anfangsgeschwindigkeit
    	var vy=5;
    	var x1= 100;		//Anfangsposition
    	var y1=100;
    	var radius=10;

In der Funktion "zeichne":
	x1=x1+vx;
	y1=y1+vy;					// weiter
	vx = vx * 0.995;
	vy = vy * 0.995;           			// langsamer
	bild1.fillStyle="red";		  		//zeichnen
	bild1.beginPath();
	bild1.moveTo( x1, y1);
	bild1.arc(x1,y1,radius,0,Math.PI*2,true);
	bild1.fill();

Reflektion am Rand

Was passiert, wenn die Kugel an den Rand stößt: Reflektion

Aus der Physik weiß man: Einfallswinkel = Reflektionswinkel. Hier ist es aber viel einfacher, denn der Geschwindigkeitsanteil senkrecht zum Rand wird umgekehrt, der Anteil parallel zum Rand bleibt erhalten. Nicht zu rechnen!

	if ((x1 canvas1.width-radius)) vx=vx*(-1);	// links oder rechts
	if ((y1canvas1.height-radius)) vy=vy*(-1);	// oben oder unten

Wenn die Kugel genau am linken Rand ist, dann ist der Mittelpunkt genau so weit vom Rand entfernt, wie der Radius angibt. Da man diese Stelle oft nicht trifft, formuliert man die Bedingung mit "kleiner". Am rechten Rand ist die Breite des Zeichenfeldes minus Radius die Grenze, analog oben und unten.

Aufgabe 2

Füge eine zweite Kugel ein!

Auch den Zusammenstoß der beiden Kugeln muss man programmieren: Wann ist es so weit? Und wie verändern sich die Geschwindigkeiten?

Beispiel 3

"Bricks" (Steine) ist eines der ältesten Computerspiele und stammt aus den 70er Jahren des letzten Jahrhunderts. Für die hier verwendete Implementation in Javascript fand ich eine Vorlage auf "billmill.org / static / canvastutorial /index.html" (Stand: Mai 2010)

Den Quelltext für das endlos und automatisch laufende Beispiel nebenan finden Sie unter
bricksEndlos.html
Der Schäger "zittert",damit die Richtung des Balls zufällig wird und der Ball nicht ständig an der selben Stelle auf und ab fliegt - und damit natürlich die rechts und links liegenden Steine nicht erreicht - perfekt ist nicht immer gut.
Den (kommentierten) Quelltext für ein spielbares Beispiel gibt es unter
bricksNeu.html
Finden Sie die Stellen heraus, an denen man den Schwierigkeitsgrad verstellen kann, und erweitern sie das Spiel um eine Spielstandsanzeige!

Canvas - Figuren "stempeln" Seitenanfang HTML - Ausgabe