Collisioni con ostacoli multipli

Creiamo un altro ostacolo ad angolo retto col primo.

Fatto! Con la creazione di una matrice di oggetti, funziona tutto! Salvo il "bug" degli angoli che avevo già individuato e per il quale dovrò studiare una soluzione, ossia che se il mobile entra velocemente in esatta corrispondenza di un angolo non viene bloccato e attraversa l'ostacolo.
Ecco comunque il codice:

function OnMouseMove(evt){
 
 puntoX=evt.pageX-canvas.offsetLeft;
 puntoY=evt.pageY-canvas.offsetTop;
 for(var i=0;i<matrice.length;i++){
  matrice[i].direzione="";
 }
 for(var i=0;i<matrice.length;i++){
  if(scavalcaDestra(puntoX,rettangolo,matrice[i])) matrice[i].direzione="destra";
  if(scavalcaSinistra(puntoX,rettangolo,matrice[i])) matrice[i].direzione="sinistra";
  if(scavalcaAlto(puntoY,rettangolo,matrice[i]))matrice[i].direzione="alto";
  if(scavalcaBasso(puntoY,rettangolo,matrice[i]))matrice[i].direzione="basso";
 }
 
 rettangolo.x=puntoX;
 rettangolo.y=puntoY;
 for(var i=0;i<matrice.length;i++){
  if(matrice[i].direzione=="basso")rettangolo.y=alto(matrice[i])-rettangolo.h;
  if(matrice[i].direzione=="alto")rettangolo.y=basso(matrice[i]);
  if(matrice[i].direzione=="destra")rettangolo.x=sinistra(matrice[i])-rettangolo.w;
  if(matrice[i].direzione=="sinistra")rettangolo.x=destra(matrice[i]);
 }
 
}

Dopo aver creato un array e pushativi dentro i due rettangoli:

var puntoX;
var puntoY;
var rettangolo,ostacolo;
var ostacolo2;

var matrice=new Array;

function init(){
 initContext("canvas");
 
 //preparazione di figure varie
 sfondo=new rect(0,0,WIDTH,HEIGHT,"white");
 rettangolo=new rect(0,0,50,50,"red");
 ostacolo=new rect(100,300,300,80,"cyan");
 ostacolo2=new rect(400,100,80,200,"green");
 matrice.push(ostacolo);
 matrice.push(ostacolo2);
 setInterval(draw,1);
} 

Ecco il filmato, con il "bug degli angoli":



...bug che già avrei in mente come affrontare, speriamo che funzioni.