Individuazione della sovrapposizione fra due elementi di un documento.

Insisto a cercare di costruirmi una serie di funzioni completamente da solo.

Innanzitutto definiamo una funzione di nome sovrapposto o qualcosa di simile che dovrebbe essere una variabile booleana la quale esprime lo stato di sovrapposizione fra due oggetti.

E cerchiamo di verificarla nella pagina-laboratorio.

Ecco, per il momento ho creato una funzione di nome overHor che esprime la sovrapposizione dell'oggetto all'ostacolo in senso orizzontale:

function overHor(){
 if(destro(oggetto)>sinistro(ostacolo) && sinistro(oggetto)<destro(ostacolo)){
  return true;
 }else{
  return false;
 }
}

Testata sulla pagina, in questo modo:

function OnMouseMove(){
 $("testo").innerHTML=overHor();
 oggetto.style.left=(event.clientX-spiazzamentoX)+"px";
 oggetto.style.top=(event.clientY-spiazzamentoY)+"px";
}

funziona: nella casella "testo" appare "false" se l'oggetto non si sovrappone in senso orizzontale all'ostacolo, mentre appare "true" soltanto nel momento in cui l'oggetto venga trascinato sulla banda verticale corrispondente alle coordinate X dell'ostacolo.

Ora creo anche un'analoga funzione per la direzione verticale:

function overVert(){
 if(basso(oggetto)>alto(ostacolo) && alto(oggetto)<basso(ostacolo)){
  return true;
 }else{
  return false;
 }
}

e funziona, parimenti.

Ora le sintetizzo insieme, e dovrei avere un valore true soltanto quando ci sia una sovrapposizione dell'oggetto all'ostacolo.

function overlap(){
 if(overHor() && overVert()){
  return true;
 }else{
  return false;
 }
}

Perfetto! Funziona benissimo! Ottengo un true solo se l'oggetto si sovrappone perfettamente all'ostacolo!