Maledette collisioni!

Voglio vedere una volta per tutte come risolvere questa maledetta storia delle collisioni di un oggetto mosso manualmente.

Inizio con la pagina nuovamente vergine. Adesso non dovrei fare più gran fatica per ricostruire lo schema che permette l'individuazione delle collisioni.

function OnMouseMove(){

 oggetto.style.left=(event.clientX-spiazzamentoX)+"px";
 oggetto.style.top=(event.clientY-spiazzamentoY)+"px";
}

Questa è la funzione che va modificata.
In pratica, devo riscrivere da capo il semplice codice che mi fa individuare le collisioni, che ormai credo di aver imparato a sufficienza...
Ci provo...

Mi dichiaro le variabili globali che mi servono per memorizzare la posizione precedente delle coordinate dell'oggetto:

var prevDex;
var prevSin;
var prevAlt;
var prevBas;

E poi vado alla funzione per modificarla.
Innanzitutto memorizzo la posizione dell'oggetto prima del movimento.

function OnMouseMove(){
 prevDex=destro(oggetto);
 prevSin=sinistro(oggetto);
 prevAlt=alto(oggetto);
 prevBas=basso(oggetto);
 
 oggetto.style.left=(event.clientX-spiazzamentoX)+"px";
 oggetto.style.top=(event.clientY-spiazzamentoY)+"px";
}

Ora devo individuare i "corridoi", ossia le sovrapposizioni...
Spezziamo queste in due funzioni: una che individua la posizione nell'ambito della proiezione dell'ostacolo e una che individua lo sconfinamento dell'oggetto oltre il margine dell'ostacolo.
Funzione overH, che individua la sovrapposizione sul piano orizzontale, e overV, sul piano verticale

function overH(obj,ost){
 if(basso(obj)>=alto(ost) && alto(obj)<=basso(ost)){
  return true;
 } else {
  return false;
 }
}

function overV(obj,ost){
 if(destro(obj)>=sinistro(ost) && sinistro(obj)<=destro(ost)){
  return true;
 } else {
  return false;
 }
} 

Ho costruito, valendomi di overH e overV, le funzioni daAlto, daBasso, daDestra e daSinistra:

function daSinistra(obj,ost){
 if(overH(obj,ost) && destro(obj)>sinistro(ost)){
  return true;
 } else {
  return false;
 }
}

function daDestra(obj,ost){
 if(overH(obj,ost) && sinistro(obj)<destro(ost)){
  return true;
 } else {
  return false;
 }
}

function daAlto(obj,ost){
 if(overV(obj,ost) && basso(obj)>alto(ost)){
  return true;
 } else {
  return false;
 }
}

function daBasso(obj,ost){
 if(overV(obj,ost) && alto(obj)<basso(ost)){
  return true;
 } else {
  return false;
 }
} 

E adesso passo a modificare tutta la funzione OnMouseMove:

function OnMouseMove(){
 prevDex=destro(oggetto);
 prevSin=sinistro(oggetto);
 prevAlt=alto(oggetto);
 prevBas=basso(oggetto);
 
 oggetto.style.left=(event.clientX-spiazzamentoX)+"px";
 oggetto.style.top=(event.clientY-spiazzamentoY)+"px";
 
 
 if(prevDex<=sinistro(ostacolo) && daSinistra(oggetto,ostacolo)){
  oggetto.style.left=(sinistro(ostacolo)-larghezza(oggetto))+"px";
 }
 else if(prevSin>=destro(ostacolo) && daDestra(oggetto,ostacolo)){
  oggetto.style.left=(destro(ostacolo))+"px";
 }
 else if(prevAlt<=alto(ostacolo) && daAlto(oggetto,ostacolo)){
  oggetto.style.top=(alto(ostacolo)-altezza(oggetto))+"px";
 }
 else if(prevBas>=basso(ostacolo) && daBasso(oggetto,ostacolo)){
  oggetto.style.top=(basso(ostacolo))+"px";
 } 
} 

che funziona egregiamente! L'ostacolo è solido come un mattone, l'oggetto non gli passa assolutamente attraverso!

Il bug si manifesta quando gli ostacoli sono più di uno, e forse ragionando ho capito bene perchè