Collisioni: prendiamo di petto la cosa...

Per prima cosa, creiamo una serie di funzioni DragDrop secondo la mia tecnica, complete delle righe di codice che memorizzano le coordinate prima del movimento

function OnMouseMove(){
 
 //CODICE CHE MEMORIZZA LE COORDINATE PRIMA DELLO SPOSTAMENTO
 prevSin=sinistro(oggetto);
 prevAlt=alto(oggetto);
 prevDex=destro(oggetto);
 prevBas=basso(oggetto);
 
 oggetto.style.left=(BaseX+event.clientX-MouseX)+"px";;
 
 oggetto.style.top=(BaseY+event.clientY-MouseY)+"px"; 
}

Quando l'oggetto viene mosso, prima che si abbia lo spostamento vengono memorizzate le coordinate che l'oggetto deteneva prima dello spostamento stesso.

---

Adesso, voglio che all'ascissa 400 il movimento a destra si arresti.
Come fare?

Ho pronte alcune funzioni:

//FUNZIONI CHE ESPRIMONO LE SOVRAPPOSIZIONI DELL'OGGETTO ALL'OSTACOLO.
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;
 }
}

...costruite su queste altre funzioni che esprimono la sovrapposizione dell'oggetto alla proiezione orizzontale o verticale dell'ostacolo (un po' cervellotico):

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;
 }
}

---

---

Bene, comunque le funzioni che dobbiamo considerare per verificare la sovrapposizione da destra, sinistra, alto e basso sono queste:
daDestra(obj,ost), daSinistra(obj,ost), daAlto(obj,ost) e daBasso(obj,ost).
Anzi quasi quasi le metto su un modulo a parte così non ci confondiamo le idee...
Sì, lo faccio subito così le tolgo dalle balle.

Fatto. E inserisco il collegamento:

<script src="overlap.js"></script> 

Fatto... Adesso si può ragionare, tenendo sempre presenti i nomi delle funzioni.