Ecco il codice:
<!DOCTYPE html>
<html>
<script src="funzioniCanvas.js"></script>
<script>
var x=200;
var dx=1;
var y=200;
var dy=1;
var w=50;
var h=50;
var sfondo="black";
var colore="green";
var immagine;
function init(){
initContext("canvas");
intervallo=setInterval(draw,1);
}
function draw(){
rect(0,0,WIDTH,HEIGHT,sfondo);
rect(x,y,w,h,colore);
rect(350,100,1,250,"#FFFF00");
rect(50,100,1,250,"#FFFF00");
rect(100,50,300,1,"#FF0000");
rect(100,400,300,1,"#FF0000");
immagine=ctx.getImageData(x+w,y,1,h);
immagine2=ctx.getImageData(x-1,y,1,h);
immagineGiu=ctx.getImageData(x,y+h,w,1)
immagineSu=ctx.getImageData(x,y-1,w,1)
XDetect(immagine,0,255);
XDetect(immagine2,0,255);
YDetect(immagineGiu,0,255);
YDetect(immagineSu,0,255);
if(x+w>WIDTH || x<0) dx=-dx;
x+=dx;
y+=dy;
}
function XDetect(img,colByte, colore){
for(var n=0;n<img.data.length;n+=4){
if(img.data[n+colByte]==colore) {
dx=-dx;
break;
}
}
}
function YDetect(img,colByte, colore){
for(var n=0;n<img.data.length;n+=4){
if(img.data[n+colByte]==colore) {
dy=-dy;
break;
}
}
}
window.addEventListener("load",init);
</script>
<body>
<canvas id="canvas" width=500 height=500></canvas>
<textarea id="testo" style="float:right;height:500px""></textarea>
<div id="delta"></div>
</body>
</html>
Le due funzioni chiave sono XDetect e YDetect.Ecco il risultato:
Nessun commento:
Posta un commento