Realizzare un carrello elevatore in javascript con l'elemento canvas HTML5

Esercizio 5

Disegnare un apparecchio sollevatore (un muletto) che si muove lungo una traiettoria rettilinea, dotato di una forca che può essere alzata e abbassata, implementando i movimenti:
• avanti
• indietro
• alza
• abbassa

Anche in questo caso possiamo far ricorso alla programmazione orientata agli oggetti. Viene istanziato un oggetto c(x,delta) con due parametri: il primo è la posizione orizzontale del carrello, mentre il secondo è la posizione verticale della forca.
Ogni volta che viene richiesto tramite i pulsanti di azione di modificare la posizione di questi due elementi il canvas deve essere cancellato e l’oggetto ridisegnato nella nuova posizione.

<!DOCTYPE html><html>
<body>
<canvas id="CNV" width="300" height="200" style="border:1px solid #d3d3d3;">
</canvas>
<br><input type="button" value="⇐" id="SN"></input>
 <input type="button" value="⇒" id="DX"></input>
 <input type="button" value="⇑" id="UP"></input>
 <input type="button" value="⇓" id="DN"></input>

function C(x,delta){
ctx.fillStyle = "green";

ctx.beginPath();
ctx.fillRect(x,y,25,40);
ctx.fillRect(x+25,y+20,40,20);
//ruote
ctx.arc(x+15,y+40,10,0,2*Math.PI);
ctx.arc(x+50,y+40,10,0,2*Math.PI);
ctx.fill();
//montanti
ctx.fillRect(x-8,y-20,4,60);

ctx.beginPath();//forca
ctx.fillRect(x-24,y+36-delta,20,4);
}//fine C

SN.addEventListener("click",function(){
	ctx.clearRect(0,0,CNV.width,CNV.height);
	x=x-5;
	c=new C(x,delta)
});

DX.addEventListener("click",function(){
	ctx.clearRect(0,0,CNV.width,CNV.height);
	x=x+5;
	c=new C(x,delta)
});

UP.addEventListener("click",function(){
	ctx.clearRect(0,0,CNV.width,CNV.height);
	if(delta<60)delta+=5;
	c=new C(x,delta)
});

DN.addEventListener("click",function(){
	ctx.clearRect(0,0,CNV.width,CNV.height);
	if(delta>0)delta-=5;
	c=new C(x,delta)
});
</script></body></html>

Come si vede la sagoma degli elementi puo essere ottenuta con delle semplici primitive grafiche (cerchi, rettangoli) dotate di riempimento.