<!DOCTYPE html>
<html>
<script src="funzioniCanvas.js"></script>
<script>
var x=200;
var dx=4;
var y=200;
var dy=3;
var w=30;
var h=30;
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,dx,h+2);
immagine2=ctx.getImageData(x-1,y-1,dx,h+2);
immagineGiu=ctx.getImageData(x-1,y+h,w+2,dy)
immagineSu=ctx.getImageData(x-1,y-1,w+2,dy)
XDetect(immagine,0,255);
XDetect(immagine2,0,255);
YDetect(immagineGiu,0,255);
YDetect(immagineSu,0,255);
if(x+w>WIDTH || x<0) dx=-dx;
if(y+h>HEIGHT || y<0) dy=-dy;
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>
Ecco il risultato:
Il movimento a scatti è una questione di browser. Non solo per questo, Firefox mi rallenta dopo un po' di uso, e per ripristinare la velocità devo riavviarlo... Boh?
Nessun commento:
Posta un commento