Bewegung mit konstanter Beschleunigung
Freier Fall eines Gegenstandes
Freier Fall eines Gegenstandes
Die Objekte des Programms sind als Klassen programmiert
Weitere Kommentare befinden sich im Programm.
<!DOCTYPE html><html><body>
<canvas id="myCanvas" width="300" height="600" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>"use strict";
//Statische Methoden werden über den Klassen-Namen aufgerufen, sodass das Objekt nicht initialisiert werden mussclass Leinwand{ static lesenKonstante(){ this.canvas = document.getElementById("myCanvas"); this.ctx = this.canvas.getContext("2d"); }}Leinwand.lesenKonstante();
class Punkt{ constructor(Radius){ this.Radius=Radius; } zeichnen(x,y){ this.x=x; this.y=y; Leinwand.ctx.beginPath(); Leinwand.ctx.arc(this.x, this.y, this.Radius, 0, 2 * Math.PI); Leinwand.ctx.fillStyle="black"; Leinwand.ctx.fill(); Leinwand.ctx.stroke(); } bewegen(ax,ay){ var dt=0.1; var dvx=ax*dt; var dvy=ay*dt; this.vx=this.vx+dvx; this.vy=this.vy+dvy; var dx=this.vx*dt; var dy=this.vy*dt; this.x=this.x+dx; this.y=this.y+dy; }}
//Die Animation funktioniert nur mit einer statischen Methodeclass Animation{static Start(){ Leinwand.ctx.clearRect(0, 0, Leinwand.canvas.width, Leinwand.canvas.height); Punkt1.zeichnen(Punkt1.x,Punkt1.y); Punkt1.bewegen(0,10); window.requestAnimationFrame(Animation.Start); }}
var Punkt1=new Punkt(10);Punkt1.zeichnen(100,10);Punkt1.vx=0;Punkt1.vy=0;Animation.Start();</script>
</body></html>
<canvas id="myCanvas" width="300" height="600" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>"use strict";
//Statische Methoden werden über den Klassen-Namen aufgerufen, sodass das Objekt nicht initialisiert werden mussclass Leinwand{ static lesenKonstante(){ this.canvas = document.getElementById("myCanvas"); this.ctx = this.canvas.getContext("2d"); }}Leinwand.lesenKonstante();
class Punkt{ constructor(Radius){ this.Radius=Radius; } zeichnen(x,y){ this.x=x; this.y=y; Leinwand.ctx.beginPath(); Leinwand.ctx.arc(this.x, this.y, this.Radius, 0, 2 * Math.PI); Leinwand.ctx.fillStyle="black"; Leinwand.ctx.fill(); Leinwand.ctx.stroke(); } bewegen(ax,ay){ var dt=0.1; var dvx=ax*dt; var dvy=ay*dt; this.vx=this.vx+dvx; this.vy=this.vy+dvy; var dx=this.vx*dt; var dy=this.vy*dt; this.x=this.x+dx; this.y=this.y+dy; }}
//Die Animation funktioniert nur mit einer statischen Methodeclass Animation{static Start(){ Leinwand.ctx.clearRect(0, 0, Leinwand.canvas.width, Leinwand.canvas.height); Punkt1.zeichnen(Punkt1.x,Punkt1.y); Punkt1.bewegen(0,10); window.requestAnimationFrame(Animation.Start); }}
var Punkt1=new Punkt(10);Punkt1.zeichnen(100,10);Punkt1.vx=0;Punkt1.vy=0;Animation.Start();</script>
</body></html>