Tutte le funzioni che intercettano la posizione dell'oggetto.

Ecco... magna cum fatica, ho creato anche le funzioni che intercettano la posizione dell'oggetto sulle emiproiezioni verticali dell'ostacolo. Le ho testate, e funzionano.

function horOver(oggHi,oggLo,ost){
 if(oggLo>=alto(ost) && oggHi<=basso(ost)) return true;
}

function vertOver(oggSx, oggDx, ost){
 if(oggDx>=sinistro(ost) && oggSx <destro(ost)) return true;
}

function horOverDx(oggHi,oggLo,oggDx,ost){
 if(horOver(oggHi,oggLo,ost) && oggDx>=sinistro(ost)) return true;
}

function horOverSx(oggHi,oggLo,oggSx,ost){
 if(horOver(oggHi,oggLo,ost) && oggSx<=destro(ost)) return true;
}
function vertOverHi(oggSx,oggDx,oggLo,ost){
 if(vertOver(oggSx,oggDx,ost) && oggLo>=alto(ost)) return true;
}
function vertOverLo(oggSx,oggDx,oggHi,ost){
 if(vertOver(oggSx,oggDx,ost) && oggHi<=basso(ost)) return true;
}

Questo è un piccolo tesoro di funzioni da tener gelosamente custodite anche perchè per rifarle potrebbe scappare una caterva di imprecazioni notevole!

Ancora sulla direzione della sovrapposizione dell'oggetto all'ostacolo, usando le metà delle proiezioni dell'ostacolo

Costruiamo progressivamente queste funzioni altrimenti combiniamo un casino che non finisce più.

Le funzioni horOver e vertOver accertano che l'oggetto sia sulla proiezione orizzontale e, rispettivamente, verticale dell'ostacolo.

Poi abbiamo funzioni che accertano se l'oggetto sia sulla parte destra o sinistra della proiezione orizzontale, e, rispettivamente, verticale dell'oggetto.
Proseguo solo con l'orizzontale.
Come posso chiamare la funzione che mi accerta la presenza dell'oggetto sull'emiproiezione destra o sinistra?
Forse horOverDx e horOverSx. Mi sembra una denominazione mnemonicamente abbastanza facile.
Eccole:

function horOver(oggHi,oggLo,ost){
 if(oggLo>=alto(ost) && oggHi<=basso(ost)) return true;
}

function vertOver(oggSx, oggDx, ost){
 if(oggDx>=sinistro(ost) && oggSx <destro(ost)) return true;
}

function horOverDx(oggHi,oggLo,oggDx,ost){
 if(horOver(oggHi,oggLo,ost) && oggDx>=sinistro(ost)) return true;
}

function horOverSx(oggHi,oggLo,oggSx,ost){
 if(horOver(oggHi,oggLo,ost) && oggSx<=destro(ost)) return true;
}

Ecco. Ora vediamo se possiamo far capire al programma se l'oggetto arriva da destra o da sinistra.

function OnMouseMove(){
 prevSx=sinistro(oggetto);
 prevDx=destro(oggetto);
 
 oggetto.style.left=BaseX+event.clientX-MouseX;
  if(horOverDx(alto(oggetto),basso(oggetto),destro(oggetto),ostacolo)&& prevDx<=sinistro(ostacolo)) $("test").innerHTML="Da sinistra";
  if(horOverSx(alto(oggetto),basso(oggetto),sinistro(oggetto),ostacolo)&& prevSx>=destro(ostacolo)) $("test").innerHTML="Da destra";

Bene! Se l'oggetto va a sovrapporsi all'ostacolo da sinistra, nella casella test appare "Da sinistra", mentre se va a sovrapporsi da destra nella casella test appare "Da destra".
Riuscito!

Rilevamento della direzione della sovrapposizione di oggetti.

Ecco le due funzioni che rilevano la sovrapposizione verticale e orizzontale, e la loro sintesi:

function horOver(oggHi,oggLo,ost){
 if(oggLo>=alto(ost) && oggHi<=basso(ost)) return true;
}

function vertOver(oggSx, oggDx, ost){
 if(oggDx>=sinistro(ost) && oggSx <destro(ost)) return true;
}

function Over(oggHi,oggLo,oggSx,oggDx,ost){
 if(horOver(oggHi,oggLo,ost) && vertOver(oggSx,oggDx,ost)) return true;
}

Ed eccone l'applicazione, che rileva quando l'oggetto si sovrappone all'ostacolo:

function OnMouseMove(){
 oggetto.style.left=BaseX+event.clientX-MouseX;
 oggetto.style.top=BaseY+event.clientY-MouseY;
 
 
 if (Over(alto(oggetto),basso(oggetto),sinistro(oggetto),destro(oggetto),ostacolo)){
  $("test").innerHTML="sovrapposto";
 }else{
  $("test").innerHTML=" ";
 }
}

Testata, funziona alla perfezione.

---

---

Ora bisogna scrivere funzioni che rilevino la direzione della sovrapposizione...
Cerco di ricordare...

Il principio è rilevare la precedente posizione dell'oggetto, quindi una volta effettuato lo spostamento rilevare la posizione attuale dell'oggetto e fare il confronto.

Dichiaro le variabili che ospiteranno le coordinate prima del movimento.

var prevSx,prevDx,prevHi,prevLo;

E poi le pongo prima del movimento a ricevere i valori. Iniziamo solo con quelle orizzontali...

function OnMouseMove(){
 prevSx=sinistro(oggetto);
 prevDx=destro(oggetto);
 
 oggetto.style.left=BaseX+event.clientX-MouseX;

Aggiungo successivamente un codice che se l'oggetto si sovrappone all'ostacolo, se il precedente margine destro era inferiore o uguale al margine sinistro dell'ostacolo, ossia se l'oggetto va a sovrapporsi all'ostacolo da sinistra, scrive nella casella-test "da sinistra", mentre se il precedente margine sinistro dell'oggetto è superiore al margine destro dell'ostacolo, ossia se l'oggetto va a sovrapporsi all'ostacolo da destra scrive nella casella-test "da destra".

function OnMouseMove(){
 prevSx=sinistro(oggetto);
 prevDx=destro(oggetto);
 
 oggetto.style.left=BaseX+event.clientX-MouseX;
 
 if(Over(alto(oggetto),basso(oggetto),sinistro(oggetto),destro(oggetto),ostacolo)){
  if(prevDx<=sinistro(ostacolo)) $("test").innerHTML="da sinistra";
  if(prevSx>=destro(ostacolo)) $("test").innerHTML="da destra";
 }
 
 oggetto.style.top=BaseY+event.clientY-MouseY; 
}

Funziona benissimo! Ho rilevato se l'oggetto si sovrappone all'ostacolo da sinistra o da destra!

Collisioni: rilevamento della sovrapposizione fra oggetto e ostacolo con funzioni aventi come parametri le coordinate dell'oggetto anzichè l'oggetto stesso

Ora mi servono delle funzioni per stabilire quando l'oggetto si sovrappone all'ostacolo

Per la sovrapposizione orizzonale le condizioni sono che il limite inferiore dell'oggetto sia maggiore o uguale al limite superiore dell'ostacolo e il limite superiore dell'oggetto sia minore o uguale al limite inferiore dell'ostacolo.
Rendiamolo...

function horOver(ogg,ost){
 if(basso(ogg)>=alto(ost) && alto(ogg)<=basso(ost)) return true;
}

Adesso, per provare questo, mi creo un div "spia" nella pagina principale.

<div id="test"></div>

con il suo stile:

#test{
 width:100px;
 height:20px;
 border:2px solid black;
 top:0px;
 left:0px;
 position:absolute;
}

Bene.
Ora testiamo la funzione...

Ci sono stati un po' di problemi perchè non ricordavo come gestire la proprietà position se absolute o relative.

Ecco che ho sistemato la questione... Sì.
Nella DIV denominata "test" ottengo se è vero o falso che oggetto e ostacolo si sovrappongono in orizzontale, con questa aggiunta alla funzione OnMouseMove:

function OnMouseMove(){
 oggetto.style.left=BaseX+event.clientX-MouseX;
 oggetto.style.top=BaseY+event.clientY-MouseY;
 $("test").innerHTML=horOver(oggetto,ostacolo);
}

Ora però voglio inserire, come parametri, non l'oggetto ma le sue coordinate. Mi servirà successivamente per superare i grossi problemi che ho incontrato nei miei tentativi precedenti che mi hanno fatto ammattire...
Ci provo.

Ecco! come parametri pongo oggHi che corrisponde al limite alto dell'oggetto, e oggLo che ne è il limite basso.

function horOver(oggHi,oggLo,ost){
 if(oggLo>=alto(ost) && oggHi<=basso(ost)) return true;
}

E funziona lo stesso: la mia casella test mi segnala ugualmente true quando si ha la sovrapposizione orizzontale dell'oggetto.

---

---

Ora vediamo pure con la sovrapposizione verticale...

function vertOver(oggSx, oggDx, ost){
 if(oggDx>=sinistro(ost) && oggSx <destro(ost)) return true;
}

che viene correttamente svelata dalla mia casella test con il seguente codice nella funzione OnMouseMove:

function OnMouseMove(){
 oggetto.style.left=BaseX+event.clientX-MouseX;
 oggetto.style.top=BaseY+event.clientY-MouseY:
 $("test").innerHTML=vertOver(sinistro(oggetto),destro(oggetto),ostacolo);
}

Perfetto.
Quindi la sovrapposizione completa dell'oggetto all'ostacolo sarà data dalla contemporanea condizione di true per le due funzioni horOver e vertOver.

Ecco, infatti le due funzioni:

function horOver(oggHi,oggLo,ost){
 if(oggLo>=alto(ost) && oggHi<=basso(ost)) return true;
}

function vertOver(oggSx, oggDx, ost){
 if(oggDx>=sinistro(ost) && oggSx <destro(ost)) return true;
}

e il codice che ne rileva il risultato nella casella test.

function OnMouseMove(){
 oggetto.style.left=BaseX+event.clientX-MouseX;
 oggetto.style.top=BaseY+event.clientY-MouseY;
 if(horOver(alto(oggetto),basso(oggetto),ostacolo) && vertOver(sinistro(oggetto),destro(oggetto),ostacolo)) {
  $("test").innerHTML="sovrapposto";
 }else{
  $("test").innerHTML=" ";
 }
}

Bene.

Per oggi è sufficiente!

Continuo a disegnarmi lo scenario per le mie collisioni

Bene, ripetere un po' le cose già fatte riscrivendole da capo aiuta a memorizzare la tecnica...

Ora materializziamo un nuovo oggetto sulla pagina, mediante il CSS:

#ostacolo1{
 width:100px;
 height:100px;
 top:100px;
 left:100px;
 background-color:red;
 position:relative;
}

Un quadrato rosso.
Anch'esso è mobile, dato che ha la proprietà position impostata su relative...

Ora vediamo il da farsi...
Impostiamo le funzioni che definiscono il limite destro e sinistro e alto e basso, più la larghezza, dei vari oggetti, così il codice si semplifica...

function sinistro(ogg){
 return EN(ogg.currentStyle.left);
}

function larghezza(ogg){
 return EN(ogg.currentStyle.width);
}

function destro(ogg){
 return EN(sinistro(ogg)+larghezza(ogg));
}

function alto(ogg){
 return EN(ogg.currentStyle.top);
}
 
function altezza(ogg){
 return EN(ogg.currentStyle.height);
}

function basso(ogg){
 return EN(alto(ogg)+altezza(ogg));
}

Ecco, così il codice è più scrivibile.

Per il momento fermiamoci qua...

Ricominciamo daccapo con le collisioni...

Procediamo, con calma...

Buttiamo giù di nuovo il DragDrop? Ma no... prendiamocelo già confezionato, vah...

Ecco: ho deciso di riscrivermelo
Mi sono riscritto lo scheletro:

var BaseX, BaseY;
var MouseX, MouseY;
var oggetto;

function OnMouseDown(){
 oggetto=event.srcElement;
 BaseX=EN(oggetto.currentStyle.left);
 BaseY=EN(oggetto.currentStyle.top);
 MouseX=event.clientX;
 MouseY=event.clientY;
 document.onmousemove=OnMouseMove;
 document.onmouseup=OnMouseUp;
}

function OnMouseMove(){
 oggetto.style.left=BaseX+event.clientX-MouseX;
 oggetto.style.top=BaseY+event.clientY-MouseY;
}

function OnMouseUp(){
 document.onmousemove=null;
}

Questo è il complesso di funzioni che permette a un oggetto con la proprietà position impostata a relative di venir trascinato.

Ricominciamo a prendere d'assalto le tecniche per le collisioni

VAI!

Mi ricostruisco la pagina, piano piano...

<html>
<head>
<style>
#oggetto{
 width:50px;
 height:50px;
 background-color:green;
 position:relative;
} 

</style>
<script>
</script>
</head>
<body>
<div id="oggetto"></div>
<div id="ostacolo1"></div>
<div id="ostacolo2"></div>
</body>
</html> 

Per il momento ho dato una forma solo all'oggetto.
Un po' poco per ricominciare, ma continuo domani...

Per il momento ho ricominciato!