Bewegungen mit HTML5

Einführung

Eine HTML-Seite besteht aus Elementen wir z.B. einen Absatz <p> oder eine Überschrift <h1> .
Es hatte sich nicht bewährt den Elementen einzeln Formatierungen zuzuordnen, weswegen die Formatierungen in Cascading Style Sheets (CSS) ausgelagert wurden und man sich im Wesentlichen nur noch auf die Elemente <div> und <span> beschränkt (mehr).
HTML 5 erweitert HTML um das Element <canvas> (Leinwand), das Grafik-Objekte darstellen kann.
Wird eine HTML-Seite als Textseite mit der Kennung html abgespeichert, kann sie von einem Browser dargestellt werden.
Editoren zum Programmieren mit JavaScript
Weil in JavaScript im Gegensatz zu Java die Verwendung von Klassen zur objektorientierten Programmierung nicht zwingend notwendig ist, werden im Folgenden alle Möglichkeiten für die JavaScript-Programmierung dargestellt.

Programmierung der Bewegung mit konstanter Geschwindigkeit eines Balls mit HTML 5

Tutorials im Internet

Ball als Objekt im Mozilla Developer Network
Self-HTML-Wiki bietet für Animationen neben der Standardlösung auch eine optimierte Lösung an
Das Mozilla Developer Network bietet ein Tutorial zum Programmieren des Spiels Breakout mit HTML 5 an (Tutorial zu Breakout).

Leinwand als HTML-Element

<!DOCTYPE html><html><head> <title>Leinwand</title></head><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;background: #e00;"></canvas></body></html>

HTML-Element Canvas mit Breite und Höhe und mit CSS für Rahmendickke, Rahmenart und Hintergrundfarbe

Zeichnen des Balls (Kreis) mit JavaScript

Mit JavaScript wird durch die Methode getElementById() in einer Variablen das HTML-Element Zeichenfläche (canvas) als JavaScript-Objekt mit 2-dimensionalen Zeichenmethoden für Zeichenobjekte (getContext("2d"))abgespeichert (W3Schools)
Das Zeichenobjekt Kreis wird in der Canvas mit JavaScript durch die Methode arc() für einen Kreisbogen gezeichnet.(W3Schhols)

<!DOCTYPE html><html><head> <title>Ball</title></head><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;background: #eee;"></canvas><script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var ballRadius = 10;var x = canvas.width/2;var y = canvas.height/2;ctx.beginPath();ctx.arc(x, y, ballRadius,0, Math.PI*2,false);ctx.closePath();ctx.strokeStyle = 'black';ctx.stroke();ctx.fillStyle = "#0095DD";ctx.fill();</script></body></html>

Bewegung des Balles

Für die Bewegung des Balles wird er nacheinander gezeichnet,
Um die Anweisungen für das Zeichnen an verschiedenen Orten immer wieder ausführen zu können, werden diese zu einer Funktion zusammengefasst, die durch die Methode requestAnimationFrame()in einem Fenster des Betriebssystems in dem der Browser ausgeführt wird, immer wieder aufgerufen wird.
- Die neuen Positionen des Balls werden durch Multiplikation einer Geschwindigkeit mit der Zeit, die um dt hochgezählt wird, von requestAnimationFrame in einer Schleife berechnet.
- Dabei muss die alte Position jeweils mit Hilfe eines Rechtecks von der Größe der Leinwand gelöscht werden.
Die wiederholte Funktion muss auch selbst ausgeführt werden, entweder durch das Ereignis onload beim Laden des body der HTML-Datei oder durch Aufruf (Im Beispiel nur als Kommentar vermerkt.) der Funktion im body.
Variable in JavaScript müssen nicht typisiert und deklariert werden.
- Der Typ wird automatisch zugewiesen, z.B. beim Multiplizieren zweier Variablen der Typ Zahl. Beim Addieren ist der Typ allerdings nicht eindeutig, auch Zeichen können addiert (aneinander gehängt) werden. Da zunächst Variablen als Zeichenketten verwendet werden, können sie durch die Methoden parseInt() bzw, parseFloat() in Zahlen verwandelt werden.
- Die Deklarierung von Variablen kann durch 'use strict' aufgezwungen werden.
- Variablen die außerhalb von Methoden deklariert wurden, gelten auch in den Methoden, müssen also nicht übergeben werden.

Einfache Bewegung in x-Richtung

<title>BallmitBewegung</title></head><body onload="BallmitBewegung()"><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;background: #eee;"></canvas><script>'use strict';var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var ballRadius = 10;var x=0;var y=50;var dx=2;
function Ball(){ctx.beginPath();ctx.arc(x, y, ballRadius,0, Math.PI*2,false);ctx.closePath();ctx.strokeStyle = 'black';ctx.stroke();ctx.fillStyle = "#0095DD";ctx.fill();}
function Bewegung(){x =x+dx;}
function BallmitBewegung(){ctx.clearRect(0, 0, canvas.width, canvas.height);Ball();Bewegung();window.requestAnimationFrame(BallmitBewegung);}</script></body></html>

Einfache Bewegung in x- und y-Richtung

Durch Entfernen des Kommentars am Ende des Scripts kann das Programm auch ohne den Parameter onload im Element Body über den Funktionsnamen aufgerufen werden.

<!DOCTYPE html><html><head><title>BallmitBewegung</title></head><body onload="BallmitBewegung()"><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;background: #eee;"></canvas><script>'use strict';var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var ballRadius = 10;var x=1;var dx;var dy;var y=1;var vx=1;var vy=1; var dt=1;
function Ball(){ctx.beginPath();ctx.arc(x, y, ballRadius,0, Math.PI*2,false);ctx.closePath();ctx.strokeStyle = 'black';ctx.stroke();ctx.fillStyle = "#0095DD";ctx.fill();}
function Bewegung(){dx=vx*dt;dy=vy*dt;x =x+dx;y =y+dy;}
function BallmitBewegung(){ctx.clearRect(0, 0, canvas.width, canvas.height);Ball();Bewegung();window.requestAnimationFrame(BallmitBewegung);}
//BallmitBewegung(); Aufruf der Funktion ohne onload
</script></body></html>

Ball als Objekt

Es hat sich in der Informatik als günstig erwiesen, Werte von Variablen zusammen mit dazugehörigen Methoden als Objekt zu speichern.

<!DOCTYPE html><html><head><title>BallmitBewegung</title></head><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;background: #eee;"></canvas><script> 'use strict';var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var t=0;var dt=1;var x;var y;var ref;var ball={ ballRadius: 10, x0: 0, y0: 50, vx: 1, vy: 1, zeichnen: function(){ ctx.beginPath(); ctx.arc(x, y, this.ballRadius,0, Math.PI*2,false); ctx.closePath(); ctx.strokeStyle = 'black'; ctx.stroke(); ctx.fillStyle = "#0095DD"; ctx.fill(); }, bewegen: function(){ x =this.x0+this.vx*t; y =this.y0+this.vy*t; t=t+dt; }}; function BallmitBewegung(){ ctx.clearRect(0, 0, canvas.width, canvas.height); ball.zeichnen(); ball.bewegen(); ref=window.requestAnimationFrame(BallmitBewegung);} BallmitBewegung(); </script></body>

Ball als Objekt mit Constructor-Funktion

Durch eine Constructor-Funktion können mit dem Operator new mehrere gleichartige Objekte gebildet werden.

<!DOCTYPE html><!DOCTYPE html><html><head><title>BallmitBewegung</title></head><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;background: #eee;"></canvas><script>
'use strict';var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var t=0;var dt=1;var x;var y;var ref;//Constructor-Funktionen werden mit großem Anfangsbuchstaben bezeichnetfunction Ball(ballRadius,x0,y0,vx,vy){ this.ballRadius=ballRadius; this.x0=x0; this.y0=y0; this.vx=vx; this.vy=vy;
this.zeichnen=function(){ ctx.beginPath(); ctx.arc(x,y,this.ballRadius,0, Math.PI*2,false); ctx.closePath(); ctx.strokeStyle = 'black'; ctx.stroke(); ctx.fillStyle = "#0095DD"; ctx.fill(); } this.bewegen=function(){ x =this.x0+this.vx*t; y =this.y0+this.vy*t; t=t+dt; }};
var Ball1=new Ball(10,0,0,1,1);

function BallmitBewegung(){ctx.clearRect(0, 0, canvas.width, canvas.height);Ball1.zeichnen();Ball1.bewegen();ref=window.requestAnimationFrame(BallmitBewegung);}
BallmitBewegung();

</script></body>

Ball als Klasse

JavaScript kennt eigentlich keine Klassen, sondern nur Prototypen von Objekten.
Um auch in JavaScript objektorientierte Programmierung mit Klassen (OOP) zu ermöglichen, wurden Klassen (W3Schools) als Option formal eingeführt.
Auch bei einer Klasse werden in einer Konstruktor-Methode die Attribute deklariert (zwingend nötig innerhalb einer Klasse) und initialisiert Durch this können die lokalen Variablen des Konstruktor auch in anderen Methoden der Klasse verwendet werden (lokale Variablen sind ohne this).
Will man die Bewegung als Methode der Klasse Ball programmieren, muss diese static sein, da die JavaScript-Methode requestAnimationFrame() nur mit konkreten Objekten und nicht mit this arbeiten kann. Ansonsten kann die Bewegung auch außerhalb der Klasse Ball als JavaScript-Methode programmiert werden.

<!DOCTYPE html><html><head><title>BallmitBewegung</title></head><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;background: #eee;"></canvas><script>'use strict';var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");
class Ball{
  constructor(x,y,vx,vy) {    this.x=x;    this.y=y;    this.vx=vx;    this.vy=vy;   }
  zeichnenBall(ballRadius){    ctx.beginPath();    ctx.arc(this.x, this.y,ballRadius,0, Math.PI*2,false);    ctx.closePath();    ctx.strokeStyle = 'black';    ctx.stroke();    ctx.fillStyle = "#0095DD";    ctx.fill();  }
  bewegenBall(){    var dt=1;    var dx=this.vx*dt;    var dy=this.vy*dt;    this.x =this.x+dx;    this.y =this.y+dy;  }
  static BallmitBewegung(){    ctx.clearRect(0, 0, canvas.width, canvas.height);    Ball1.zeichnenBall(10);    Ball1.bewegenBall();    window.requestAnimationFrame(Ball.BallmitBewegung);  }
}
var Ball1=new Ball(1,1,1,1);Ball.BallmitBewegung();
</script></body></html>

Aufrufen der Bewegung des Balls durch EventHandler

Damit die in Funktionen zusammengefassten Anweisungen ausgeführt werden, müssen die Funktionen entweder im body mit ihrem Namen oder als Parameter des HTML-Elements body aufgerufen werden.
Man kann in JavaScript aber auch mit einer Methode einen EventListener starten.
Die JavaScript-Methode requestAnimationFrame hat das Problem, dass wenn sie nicht gestoppt wird, sie bei den nächsten Aufrufen immer schneller abläuft.

<!DOCTYPE html><html><head><title>BallmitBewegung</title></head><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;background: #eee;"></canvas><script>'use strict';var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var ref;class Ball{
  constructor(x,y,vx,vy) {    this.x=x;    this.y=y;    this.vx=vx;    this.vy=vy;   }
  zeichnenBall(ballRadius){    ctx.beginPath();    ctx.arc(this.x, this.y,ballRadius,0, Math.PI*2,false);    ctx.closePath();    ctx.strokeStyle = 'black';    ctx.stroke();    ctx.fillStyle = "#0095DD";    ctx.fill();  }
  bewegenBall(){    var dt=1;    var dx=this.vx*dt;    var dy=this.vy*dt;    this.x =this.x+dx;    this.y =this.y+dy;  }
static BallmitBewegung(){    ctx.clearRect(0, 0, canvas.width, canvas.height);    Ball1.zeichnenBall(10);    Ball1.bewegenBall();    ref=window.requestAnimationFrame(Ball.BallmitBewegung);  }
}
var Ball1=new Ball(1,1,1,1);

//Eventhandler
document.getElementById("myCanvas").addEventListener("mouseover",start);document.getElementById("myCanvas").addEventListener("mouseout",stop);
function start(){Ball1.x = canvas.width/2;Ball1.y = canvas.height/2;Ball.BallmitBewegung();}function stop(){window.cancelAnimationFrame(ref);}
</script></body></html>