E' estremamente arduo.
Riproviamo dall'inizio.
Io faccio così: più mi incorno su un problema più mi ci impiccio, e più non ci cavo un ragno dal buco.
Ricominciamo.
Dato che il difetto fondamentale del resettare la posizione dell'oggetto nel momento in cui viene mosso è che la posizione dell'oggetto non corrisponde a quella che si vede, devo fermare l'oggetto nella posizione
reale e non in una posizione
virtuale.
Per fare questo, devo arrestare il movimento bloccando l'oggetto contro una linea, ma bloccandolo davvero.
La dinamica dei fatti è che quando viene mosso l'oggetto, esso viene mosso oltre l'ostacolo, e resettato poi a monte dell'ostacolo in un secondo tempo. La cosa potrebbe anche andare bene...
Ma proviamo ad arrestare il movimento realmente, in modo che l'oggetto non si possa più muovere orizzontalmente contro un ostacolo, ma solo nelle altre direzioni.
La funzione da modificare è questa:
function OnMouseMove(){
oggetto.style.left=BaseX+event.clientX-MouseX;
oggetto.style.top=BaseY+event.clientY-MouseY;
}
Modifichiamola un po'...
function OnMouseMove(){
if(destro(oggetto)<500) oggetto.style.left=BaseX+event.clientX-MouseX;
oggetto.style.top=BaseY+event.clientY-MouseY;
}
Bene. Mi sono creato una linea verticale che abbia per ascissa 500 per verificare dove si arresta il movimento.
Così facendo, se sposto l'oggetto lentamente, esso si arresta esattamente con il suo lato destro contro la linea verticale, ossia a 500 di ascissa, ma se vado velocemente, si arresta più a destra, perchè la posizione non viene espressa punto per punto.
Devo quindi correggere la posizione dell'oggetto.
function OnMouseMove(){
if(destro(oggetto)<500) {
oggetto.style.left=BaseX+event.clientX-MouseX;
}else{
oggetto.style.left=(500-larghezza(oggetto))+"px";
}
oggetto.style.top=BaseY+event.clientY-MouseY;
}
Sì, così funziona: anche andando a velocità supersonica, l'oggetto si arresta sempre a 500.
La differenza con il codice che usavo precedentemente è che prima l'oggetto veniva spostato oltre l'ostacolo e poi tornava dietro.
Lo riprovo:
function OnMouseMove(){
oggetto.style.left=BaseX+event.clientX-MouseX;
if(destro(oggetto)>500) oggetto.style.left=(500-larghezza(oggetto))+"px";
oggetto.style.top=BaseY+event.clientY-MouseY;
}
Ecco: così facendo, prima l'oggetto
viene spostato oltre l'ostacolo, quindi viene
riportato indietro se il suo margine destro supera 500.
Questo accade a
ogni movimento dell'oggetto. Non si vede, ma in realtà quando l'oggetto viene spinto contro l'ostacolo, per un infinitesimo va effettivamente oltre l'ostacolo e quindi, verificandosi la condizione "oltre l'ostacolo", viene rispinto indietro.
Nel primo caso, invece:
function OnMouseMove(){
if(destro(oggetto)<500) {
oggetto.style.left=BaseX+event.clientX-MouseX;
}else{
oggetto.style.left=(500-larghezza(oggetto))+"px";
}
oggetto.style.top=BaseY+event.clientY-MouseY;
}
l'oggetto viene
mosso se il margine destro è minore del limite, altrimenti
viene fissato contro il limite stesso
In questo secondo caso, non vi è una posizione "inapparente" dell'oggetto durante le primissime fasi del movimento, perchè esso viene arrestato subito nella sua posizione contro l'ostacolo.
