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!
