Zurück  zum Start

Tutorial 9: Ein springender Ball

 

Im letzten Tutorial haben wir einen Baustein namens CANVAS kennengelernt. Wir wissen jetzt, dass wir 

• Einen Loop brauchen; erst dadurch lässt sich bewegung überhaupt erzeugen
• Eine Fläche zum darstellen unsere Grafiken brauchen. Dafür gibt es das Canvas.

Wie ihr sehen könnt ergibt das zusammen schon ganz schön viel Code. Unser Beispiel zeigt, wie ein Ball hüpft und an den Ecken abprallt. Wie ihr sehen könnt werden die Richtung und die Geschwindigkeit des Balls durch Mathematik festgelegt. Die Variablen x und x sind die aktuellen Koordinaten des Balls vx und vy sind die jeweiligen Richtungsvektoren.

Ihr könnt euch dieses Beispiel ja herunterkopieren und damit herumprobieren.  Erhöht z.B. einmal den Wert der Schwerkraft oder Elastizität.

 

 

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

Zum vorherigen Tutorial: Bewegte Grafiken

Zum nächsten Tutorial:  Interaktion mit der Maus