Collisioni fra rettangoli con blocco di un rettangolo mobile su un ostacolo, che continua a muoversi al movimento del mouse secondo le direzioni consentite.

Decidiamoci ad affrontare il problema (difficilissimo).

Per prima cosa, quando due rettangoli si sovrappongono, per respingere di nuovo il rettangolo "mobile" ai margini del rettangolo "ostacolo", bisogna sapere la direzione dalla quale il mobile viene, per poter respingerlo in quella direzione.
Se ho una situazione di questo genere...

Il mobile (rettangolo rosso) si sovrappone all'ostacolo (rettangolo blu), ma non è possibile stabilire se sia arrivato a sovrapporsi partendo dall'alto o da sinistra, e quindi non è possibile stabilire se lo si deve ricacciare in alto o a sinistra.

---

Quindi si deve individuare la direzione.
Ho trovato il modo di confrontare la posizione reale del mobile rispetto all'ostacolo.
Creiamo le funzioni.

Innanzitutto definiamo i lati del mobile, alto, basso, sinistra e destra.

function alto(figura){
 return figura.y;
}
function basso(figura){
 return figura.y+figura.h;
}
function sinistra(figura){
 return figura.x;
}
function destra(figura){
 return figura.x+figura.w;
}

Quindi definiamo la posizione relativa del mobile rispetto all'ostacolo.<

function ostacoloInBasso(mobile,ostacolo){
 if(basso(mobile)<=alto(ostacolo) && sinistra(mobile)<=destra(ostacolo) && destra(mobile)>=sinistra(ostacolo))return true;
 return false;
}
function ostacoloInAlto(mobile, ostacolo){
 if(alto(mobile)>=basso(ostacolo) && sinistra(mobile)<=destra(ostacolo) && destra(mobile)>=sinistra(ostacolo))return true;
 return false;
}
function ostacoloADestra(mobile,ostacolo){
 if(destra(mobile)<=sinistra(ostacolo) && alto(mobile)<=basso(ostacolo) && basso(mobile)>=alto(ostacolo))return true;
 return false;
}
function ostacoloASinistra(mobile,ostacolo){
 if(sinistra(mobile)>=destra(ostacolo) && alto(mobile)<=basso(ostacolo) && basso(mobile)>=alto(ostacolo))return true;
 return false;
}

---

Verifichiamole...
Ostacolo in basso:

function OnMouseMove(evt){
 puntoX=evt.pageX-canvas.offsetLeft;
 puntoY=evt.pageY-canvas.offsetTop;
 rettangolo.x=puntoX;
 rettangolo.y=puntoY;
 scrivi(ostacoloInBasso(rettangolo,ostacolo));
}

...e funziona.

Verifichiamo l'altra:
Ostacolo in alto:

function OnMouseMove(evt){
 puntoX=evt.pageX-canvas.offsetLeft;
 puntoY=evt.pageY-canvas.offsetTop;
 rettangolo.x=puntoX;
 rettangolo.y=puntoY;
 scrivi(ostacoloInAlto(rettangolo,ostacolo));
}

...okay!

Ostacolo a destra:

function OnMouseMove(evt){
 puntoX=evt.pageX-canvas.offsetLeft;
 puntoY=evt.pageY-canvas.offsetTop;
 rettangolo.x=puntoX;
 rettangolo.y=puntoY;
 scrivi(ostacoloADestra(rettangolo,ostacolo));
}

...okay!

Ostacolo a sinistra:

function OnMouseMove(evt){
 puntoX=evt.pageX-canvas.offsetLeft;
 puntoY=evt.pageY-canvas.offsetTop;
 rettangolo.x=puntoX;
 rettangolo.y=puntoY;
 scrivi(ostacoloASinistra(rettangolo,ostacolo));
}

...e funziona anche questo!

---

Ecco realizzato il primo passaggio.