Yazılım Günlüğü: HTML5 CANVAS DUVARA ÇARPAN TOPLAR

18 Temmuz 2016 Pazartesi

HTML5 CANVAS DUVARA ÇARPAN TOPLAR

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var mycanvas = document.getElementById("canvas");
var ctx = mycanvas.getContext("2d");
var w=window.innerWidth;
var h=window.innerHeight;
mycanvas.width=w;
mycanvas.height=h;
ctx.fillStyle="black";/*ekranın tamamını siyahla kapladık*/
ctx.fillRect(0,0,w,h);

var toplar=[];
for(var a=0;a<50;a++){
toplar.push({"px":w/2,"py":h/2,"vx":5-10*Math.random(),"vy":5-10*Math.random()});

}
function animasyon(){
ctx.clearRect(0,0,w,h);
ctx.fillStyle="black";/*canvasın rengini belirledik*/
ctx.fillRect(0,0,w,h);/*canvası çizdik*/
ctx.fillStyle="white";/*topların rengini beyaz yaptık*/
for(var b=0;b<50;b++){
ctx.beginPath();
ctx.arc(toplar[b].px,toplar[b].py,15,0*Math.PI,2*Math.PI); /*toplarımızın konumunu ve yarıçapını belirledik*/
ctx.fill();
toplar[b].px+=toplar[b].vx*2; /*pozisyonuna hızı ekledik*/
toplar[b].py+=toplar[b].vy*2;

if(toplar[b].px>=w){ /*duvara çarptıgında geri dönmesini sağladık*/
toplar[b].vx=-toplar[b].vx;
}
if(toplar[b].px<=0){/*duvara çarptıgında geri dönmesini sağladık*/
toplar[b].vx=-toplar[b].vx;
}
if(toplar[b].py>=h){/*duvara çarptıgında geri dönmesini sağladık*/
toplar[b].vy=-toplar[b].vy;
}
if(toplar[b].py<=0){/*duvara çarptıgında geri dönmesini sağladık*/
toplar[b].vy=-toplar[b].vy;
}

}
}

setInterval(animasyon,20);

}
</script>
</head>

<body>
<canvas id="canvas" ></canvas>
</body>
</html>

Yazılım Günlüğü

18 Temmuz 2016 Pazartesi

HTML5 CANVAS DUVARA ÇARPAN TOPLAR

Hiç yorum yok:

Yorum Gönder