JavascriptProva

martedì 5 febbraio 2013

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!

Nessun commento:

Posta un commento