Ecco come, con l'uso del mio oggettino linea, si possono costruire tutte le linee che si vogliono, ognuna con la propria velocità di rotazione e anche con il proprio verso, che per rendere negativo basta impostare il parametro "velocità angolare" del metodo ruota con un valore negativo:
<script>
function linea(nomeLinea,spessore,colore,orgX,orgY,lunghezza,ang){
var nomeLinea=nomeLinea;
var orgX=orgX;
var orgY=orgY;
var lunghezza=lunghezza;
var angolo=ang;
var velAng;
var intervallo;
var spessore=spessore;
this.disegna=function(){
for (var n=0;n<=lunghezza;n++)
document.write("<div id='"+nomeLinea+n+"' style='font-size:1px;position:absolute;left:"+(orgX+n*Math.cos(angolo*Math.PI/180))+"px;top:"+(orgY+n*Math.sin(angolo*Math.PI/180))+"px;background-color:"+colore+";width:"+spessore+"px;height:"+spessore+"px'></div>");
}
this.disegna.call();
this.step=function(){
for(var n=0;n<=lunghezza;n++){
document.getElementById(nomeLinea+n).style.left=orgX+n*Math.cos(angolo*Math.PI/180);
document.getElementById(nomeLinea+n).style.top=orgY+n*Math.sin(angolo*Math.PI/180);
}
angolo+=velAng;
}
this.ruota=function(velocitaAngolare,tempo){
clearInterval(intervallo);
velAng=velocitaAngolare;
intervallo=window.setInterval(function(linea) {linea.step()},tempo,this);
}
}
prima=new linea("prima",1,"red",500,300,300,45);
prima.ruota(2,1);
seconda=new linea("seconda",2,"green",500,500,300,0);
seconda.ruota(5,1);
terza=new linea("terza",3,"blue",700,300,400,90);
terza.ruota(-2,1);
</script>
<body>
</body>
Nessun commento:
Posta un commento