Bewegung mit JavaScript

Am einfachsten kann das Beispiel ausgeführt und geändert werden, indem man es in den Editor von W3Schhools kopiert.
Das Beispiel ist in JavaScript als Klasse programmiert, was für JavaScript nicht notwendig, im Lehrplan für den Informatikunterricht an Gymnasien in Bayern aber vorgesehen ist.
Das Programm ist nach dem Prinzip der kleinen Schritte so einfach wie möglich programmiert.

<!DOCTYPE html><html><head><script>//Deklarierung von Variablen erzwingen'use strict';class ball { constructor(x,y,vx,vy,ax,ay,dt,radius,color){ this.x=x, this.y=y, this.vx=vx, this.vy=vy, this.ax=ax, this.ay=ay, this.dt=dt, this.radius=radius, this.color= color } zeichnen() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill();} bewegen(){ ctx.clearRect(0,0, canvas.width, canvas.height); this.zeichnen(); //Prinzip der kleinen Schritte this.vx =this.vx+this.ax*this.dt; this.vy =this.vy+this.ay*this.dt; this.x =this.x+this.vx*this.dt; this.y =this.y+this.vy*this.dt; }}</script></head><body onload="Bewegung()"><canvas id="canvas" width="300" height="600"style="border:1px solid #000000;"></canvas><script>//Deklarierung von Variablen erzwingen'use strict';var wiederhole;//Zeichenobjektevar canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');//Objektvar ball1=new ball(200,100,0,4,0,0,1,25,'blue');//Animationfunction Bewegung() { ball1.bewegen(); wiederhole=window.requestAnimationFrame(Bewegung); //Wiederholung muss gestoppt werden if (ball1.y>canvas.height) cancelAnimationFrame(wiederhole);}</script></body></html>

Objektorientierte Programmierung mit Klassen am Beispiel einer Bewegung

Im Head der HTML-Datei wird mit JavaScript innerhalb des Tag <script> eine Klasse programmiert.
Jede Klasse hat eine Konstruktor-Methode, aus der Objekte gebildet werden können, in denen Attributen (Variablen) einer Klasse Werte zugewiesen werden können und auf die die Methoden der Klasse angewendet werden können
Im Body der HTML-Datei wird die Zeichenfläche (Canvas) zur Verfügung gestellt, in der die Animation dargestellt werden kann.
Im Tag <script> des Body bekommt die Zeichenfläche als erstes grundlegende Zeichenobjekte und damit entsprechende Methoden zum Zeichnen verpasst.
Danach wird mit dem Operator new das Objekt ball1 gebildet, auf das in der JavaScript-Funktion Bewegung() die entsprechenden Methoden zeichnen() und bewegen() der Klasse angewendet werden, die wiederum die grundlegenden Zeichen-Methoden der Zeichenfläche verwenden.
Indem die JavaScript-Funktion Bewegen durch die JavaScript-Methode requestAnimationFrame() bis zu einer entsprechenden Stop-Bedingung wiederholt aufgerufen wird, wird das Objekt immer wieder gezeichnet und gelöscht und damit animiert.

Prinzip der kleinen Schritte

Beim Prinzip der kleinen Schritte werden die Koordinaten des neuen Ortes aus den alten durch Addition des in im Zeitintervall dt mit konstanter Geschwindigkeit zurückgelegten Weges ermittelt.
Dabei wird jeweils die veränderte Geschwindigkeit verwendet, die sich aus der im entsprechenden Zeitintervall wirkenden konstanten Beschleunigung ergibt..
Ist die Beschleunigung Null ergibt sich eine Bewegung mit konstanter Geschwindigkeit.
Das Prinzip kann auf mehrere Dimensionen angewendet werden.