Zurück  zum Start

Tutorial 11: Interaktion und Physik

 

In diesem Tutorial gehts bereits ganz schön zur Sache. Zwar sieht das Ganze relativ unspektakulär aus, der Code beinhaltet aber bereits die wesentlichen Mausaktionen (Drücken, Loslassen und Bewegen der Maus) und außerdem eine Formel zur Berechnung des Aufpralls auf einen zweiten Ball.

 

 

Im JavaScript Teil unseres Beispiels werden zuerst dem Canvas-Baustein die Maus-Ereignisse zugordnet:

canvas.addEventListener('mousedown', mausDruck);
canvas.addEventListener('mouseup', mausLos);
canvas.addEventListener('mousemove', mausBewegung);

 

Später werden die Funktionen dazu geschrieben. Etwa die die Funktion "mausLos", die aufgerufen wird, wenn die Maustaste wieder losgelassen wird.

 

function mausLos(eventDaten) {
x = eventDaten.clientX;
y = eventDaten.clientY;
angehalten = false;
vx = 0;
vy = 0;
} 

 

Neu in diesem Tutorial ist besonders der "mousemove"-Teil.

 

Besonders interessant ist die Kollisionserkennung mit der blauen Kugel. Die entsprechende Funktion ist folgende:

function fEntfernung(ax, ay, bx, by) {
return Math.sqrt(((ax - bx) * (ax - bx)) + ((ay - by) * (ay - by)));
} 

Wie du sicher gleich gesehen hast benützt diese Funktion zur Messung der Entfernung den Satz von Phytagoras.

 

 

Die HTML-Datei mit dem Script kannst du dir wieder   hier in einem eigenen Fenster anschauen 

Zum vorherigen Tutorial: Interaktion mit der Maus