Materialien zum Unterricht

Der hüpfende Ball

Ziel: Es soll ein Ball aus einer Höhe herunterfallen (freier Fall) und vom Boden abprallen (Reflexion). Bei jedem Aufprall vierliert er etwas an Energie, so dass seine Sprunghöhe immer mehr abnimmt.

 

Erstelle eine neue HTML-Datei, binde im <head> nur jquery.min.js ein und kopiere den unten stehenden Quelltext in den <body> der Datei.

Es wird ein SVG-Objekt der Größe 1000 Pixel x 610 Pixel erzeugt. (SVG: Scalable Vector Graphics) Bei diesem Objekt liegt der Koordinatenursprung in der linken oberen Ecke!

 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000px" height="610px" >
  <circle id="ball" r="10" style="fill: #ff0000; stroke: #FFFF99; stroke-width: 1"  cx="220" cy="130" /> 
  <rect x="10" y="600" width="800" height="20"  fill="#333333" />
</svg>
<div id="anzeige"></div>

Auf dem Bildschirm erscheint jetzt ein Ball mit den entsprechenden Eigenschaften sowie ein Rechteck. Das rechteck benötigt keine id, da es nicht verändert werden soll.

Der Bereich mit der id Anzeige dient nur dazu, während des Programmierens bei Bedarf Werte anzuzeigen.

 

Eigenschaften des Balls:

Attribut Wert
id ball
Radius r 10 Pixel
Füllfarbe #ff0000 (rot)
Randfarbe #ffff99 (gelb)
Randstärke 1 Pixel
cx 220 Pixel Abstand zum linken Rand
cy 130 Pixel Abstand zum oberen Rand

 

Nach dem Laden der Datei werden die Startwerte festgelegt:

Anfangsgeschwindigkeit 0

Beschleunigung 0.5 (das ist ein Wert, der in der Simulation ganz gut funktioniert, im wirklichen Leben ist a natürlich 9,81)

Zeitschritt 1

Der Befehl window.setInterval("fallen()", 100); bewirkt, dass nun automatisch nach jeweils 100 ms (0,1 s) eine Funktion mit dem Namen fallen() aufgerufen wird. Das passiert so lange, bis die Seite neu geladen oder geschlossen wird.

 
$(document).ready(function()  {
     v=0;
     a=0.5;
     dt=1;
     window.setInterval("fallen()", 100);
});

Der Hauptteil der Funktion fallen() macht folgendes:

  1. Der cy-Wert des Balls wird als ganze Zahl der Variablen y zugeordnet.
  2. Zur Kontrolle wird dieser Wert im Anzeigebereich ausgegeben (ist nicht wichtig).
  3. Die neue Geschwindigkeit wird aus der alten Geschwindigkeit und der Beschleunigung berechnet.
  4. Die neue Entfernung vom oberen Rand wird neu berechnet.
  5. Der Ball bekommt den neuen y-Wert in seine Eigenschaft cy geschrieben.

Der Ball wird nach dem letzten Befehl automatisch auf diese neue Position gesetzt.

 

 
  y=parseInt($('#ball').attr('cy'));
  $('#anzeige').html(y); 
  v=v+a*dt;
  y=y+v*dt; 
  $('#ball').attr('cy',y);

Der Ball fällt nun einfach runer und runter und runter...

Aufgabe: Der Ball soll nur so lange fallen, bis er auf dem Rechteck aufschlägt. Dazu darf der Hautpteil des Programms fallen() nur so lange ausgeführt werden, wie der y-Wert kleiner ist als der y-Wert des oberen Randes des Rechteckes. (liest sich komplizierter als es ist! Es muss eine einfache if-Abfrage hinzugefügt werden)

Aufgabe: Der Ball soll nun wieder hochhöpfen. In der vorherigen Aufgabe ist eine if-Abfrage hinzugekommen. In false-Teil muss die Geschwindigkeit negiert werden:

v=(-v);
v=v+a*dt;
y=y+v*dt;

Damit sollte der Ball wieder hochspringen.

Aufgabe: Im letzten Teil wird die Geschwindigkeit bei jedem Aufprall um 10% verkleinert.

zurück