Fahrstuhl
<!DOCTYPE html><html><body>
<canvas id="myCanvas" width="200" height="450"style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><p>UG<input type="radio" id="UG" name="Stockwwerk" onchange="Fahrstuhl1.zustandWechseln()">EG<input type="radio" id="EG" name="Stockwwerk" onchange="Fahrstuhl1.zustandWechseln()">OG<input type="radio" id="OG" name="Stockwwerk" onchange="Fahrstuhl1.zustandWechseln()" ></p><script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var repeater=undefined;class Fahrstuhl{//Die Attribute der Klasse Fahrstuhl müssen im Konstruktor initialisiert werden. constructor(FahrstuhlBreite,FahrstuhlHöhe){ this.FahrstuhlBreite=FahrstuhlBreite; this.FahrstuhlHöhe=FahrstuhlHöhe; this.Höhe=0; this.Ziel=0; } zeichnen(){ ctx.fillStyle = "#FF0000"; ctx.fillRect((canvas.width-this.FahrstuhlBreite)/2,canvas.height-this.FahrstuhlHöhe-this.Höhe,this.FahrstuhlBreite,this.FahrstuhlHöhe); ctx.moveTo(0,canvas.height/3); ctx.lineTo(200,canvas.height/3); ctx.moveTo(0,canvas.height*2/3); ctx.lineTo(200,canvas.height*2/3); ctx.stroke(); } bewegenSchritt(){ if (this.Höhe<this.Ziel*canvas.height/3) { this.Höhe=this.Höhe+1; ctx.clearRect(0, 0, canvas.width, canvas.height); this.zeichnen(); }
else if (this.Höhe>this.Ziel*canvas.height/3){ this.Höhe=this.Höhe-1; ctx.clearRect(0, 0, canvas.width, canvas.height); this.zeichnen(); } }
zustandWechseln(){ if (this.Höhe==0){ if (document.getElementById("EG").checked == true){ this.Ziel=1; Animation.Start(); } else {Animation.Stop()}; if (document.getElementById("OG").checked == true){ this.Ziel=2; Animation.Start(); } else if(repeater!=1){Animation.Stop()}; //darf beim ersten Aufruf nicht aufgerufen weden, da requestAnimationframe einen Wert liefert, der zum Stop führt } if (this.Höhe==canvas.height/3){ if (document.getElementById("UG").checked == true){ this.Ziel=0; Animation.Start(); } else {Animation.Stop()}; if (document.getElementById("OG").checked == true){ this.Ziel=2; Animation.Start(); } else {Animation.Stop()}; } if (this.Höhe==canvas.height*2/3){ if (document.getElementById("UG").checked == true){ this.Ziel=0; Animation.Start(); } else {Animation.Stop()}; if (document.getElementById("EG").checked == true){ this.Ziel=1; Animation.Start(); } else {Animation.Stop()}; } }}//Ende der Klasse Fahrstuhl
//Objekt als Instanz der Klasse Fahrstuhlvar Fahrstuhl1=new Fahrstuhl(50,100);//AnfangsbedingungenFahrstuhl1.zeichnen();document.getElementById("UG").checked = true;
//requestAnimationFrame funktioniert nur mit Objekten als Instanzen von Klassen,//weswegen die Animation als Klasse mit statischen Methoden definiert werden muss.class Animation{ static Start(){ Fahrstuhl1.bewegenSchritt(); repeater=requestAnimationFrame(Animation.Start); } static Stop(){ cancelAnimationFrame(repeater); }//wird die Animation nicht gestoppt, wird sie immer schneller}
</script>
</body></html>
<canvas id="myCanvas" width="200" height="450"style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><p>UG<input type="radio" id="UG" name="Stockwwerk" onchange="Fahrstuhl1.zustandWechseln()">EG<input type="radio" id="EG" name="Stockwwerk" onchange="Fahrstuhl1.zustandWechseln()">OG<input type="radio" id="OG" name="Stockwwerk" onchange="Fahrstuhl1.zustandWechseln()" ></p><script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var repeater=undefined;class Fahrstuhl{//Die Attribute der Klasse Fahrstuhl müssen im Konstruktor initialisiert werden. constructor(FahrstuhlBreite,FahrstuhlHöhe){ this.FahrstuhlBreite=FahrstuhlBreite; this.FahrstuhlHöhe=FahrstuhlHöhe; this.Höhe=0; this.Ziel=0; } zeichnen(){ ctx.fillStyle = "#FF0000"; ctx.fillRect((canvas.width-this.FahrstuhlBreite)/2,canvas.height-this.FahrstuhlHöhe-this.Höhe,this.FahrstuhlBreite,this.FahrstuhlHöhe); ctx.moveTo(0,canvas.height/3); ctx.lineTo(200,canvas.height/3); ctx.moveTo(0,canvas.height*2/3); ctx.lineTo(200,canvas.height*2/3); ctx.stroke(); } bewegenSchritt(){ if (this.Höhe<this.Ziel*canvas.height/3) { this.Höhe=this.Höhe+1; ctx.clearRect(0, 0, canvas.width, canvas.height); this.zeichnen(); }
else if (this.Höhe>this.Ziel*canvas.height/3){ this.Höhe=this.Höhe-1; ctx.clearRect(0, 0, canvas.width, canvas.height); this.zeichnen(); } }
zustandWechseln(){ if (this.Höhe==0){ if (document.getElementById("EG").checked == true){ this.Ziel=1; Animation.Start(); } else {Animation.Stop()}; if (document.getElementById("OG").checked == true){ this.Ziel=2; Animation.Start(); } else if(repeater!=1){Animation.Stop()}; //darf beim ersten Aufruf nicht aufgerufen weden, da requestAnimationframe einen Wert liefert, der zum Stop führt } if (this.Höhe==canvas.height/3){ if (document.getElementById("UG").checked == true){ this.Ziel=0; Animation.Start(); } else {Animation.Stop()}; if (document.getElementById("OG").checked == true){ this.Ziel=2; Animation.Start(); } else {Animation.Stop()}; } if (this.Höhe==canvas.height*2/3){ if (document.getElementById("UG").checked == true){ this.Ziel=0; Animation.Start(); } else {Animation.Stop()}; if (document.getElementById("EG").checked == true){ this.Ziel=1; Animation.Start(); } else {Animation.Stop()}; } }}//Ende der Klasse Fahrstuhl
//Objekt als Instanz der Klasse Fahrstuhlvar Fahrstuhl1=new Fahrstuhl(50,100);//AnfangsbedingungenFahrstuhl1.zeichnen();document.getElementById("UG").checked = true;
//requestAnimationFrame funktioniert nur mit Objekten als Instanzen von Klassen,//weswegen die Animation als Klasse mit statischen Methoden definiert werden muss.class Animation{ static Start(){ Fahrstuhl1.bewegenSchritt(); repeater=requestAnimationFrame(Animation.Start); } static Stop(){ cancelAnimationFrame(repeater); }//wird die Animation nicht gestoppt, wird sie immer schneller}
</script>
</body></html>