La tecnica che sto mettendo a punto è quella di creare un'area in forma di rettangolino sul bordo destro di un rettangolo, nella quale individuare il colore che va considerato come ostacolo.
Ecco il codice di un rettangolo verde che si muove fino a incontrare una linea verticale gialla ferma (un rettangolo di larghezza 1).
Al momento non ci sono collisioni.
<!DOCTYPE html>
<html>
<script src="funzioniCanvas.js"></script>
<script>
var x=100;
var y=50;
var w=100;
var h=50;
var sfondo="black";
var colore="green";
var osx=350;
var osy=50;
var osw=1;
var osh=100;
var oscolore="#FFFF00";
function init(){
initContext("canvas");
intervallo=setInterval(draw,10);
}
function draw(){
rect(0,0,WIDTH,HEIGHT,sfondo);
rect(x,y,w,h,colore);
rect(osx,osy,osw,osh, oscolore);
x+=1;
}
window.addEventListener("load",init);
</script>
<body>
<canvas id="canvas" width=500 height=500></canvas>
</body>
</html>
In questo, il rettangolo verde si muove di 1 pixel alla volta.Considerando che la funzione si ripete ogni 10 millisecondi, la velocità raggiunta è di 100 pixel al secondo.
Se aumento la velocità riducendo l'intervallo a 1 millisecondo, la velocità sarà di 1000 pixel al secondo.
Ora creiamo il rettangolino, che avrà una posizione rappresentata dalle coordinate x+w, y e dimensioni pari a 1 x h.
immagine=ctx.getImageData(x+w,y,1,h);E una textarea per vedere cosa "vede" il rettangolino.
<textarea id="testo" style="float:right;height:500px""></textarea>Ora il codice che scansiona tutto il rettangolino:
<!DOCTYPE html>
<html>
<script src="funzioniCanvas.js"></script>
<script>
var x=240;
var y=50;
var w=100;
var h=10;
var sfondo="black";
var colore="green";
var osx=350;
var osy=50;
var osw=1;
var osh=100;
var oscolore="#FFFF00";
var immagine;
function init(){
initContext("canvas");
intervallo=setInterval(draw,500);
}
function draw(){
rect(0,0,WIDTH,HEIGHT,sfondo);
rect(x,y,w,h,colore);
rect(osx,osy,osw,osh, oscolore);
immagine=ctx.getImageData(x+w,y,1,h);
$("testo").value="";
for(var n=0;n<immagine.data.length;n+=4){
$("testo").value+=immagine.data[n]+" "+immagine.data[n+1]+" "+immagine.data[n+2]+" "+immagine.data[n+3]+"\n";
}
x+=1;
}
window.addEventListener("load",init);
</script>
<body>
<canvas id="canvas" width=500 height=500></canvas>
<textarea id="testo" style="float:right;height:500px""></textarea>
</body>
</html>
Ho fatto qualche adattamento, rimpicciolendo il rettangolo mobile e avvicinandolo all'ostacolo, e rallentando la frequenza di ripetizione del disegno del canvas in modo da poter vedere con calma i risultati nella textarea.Comunque il risultato è indubbio: non appena il rettangolo contatta l'ostacolo, nel rettangolino-spia che ho creato viene "visto" l'ostacolo di colore giallo (codice 255 255 0 255).
Questo rende piuttosto facile individuare ostacoli, sia pure con alcune limitazioni che verranno fuori dopo...
Nessun commento:
Posta un commento