18 Temmuz 2016 Pazartesi
HTML5 CANVAS DUVARA ÇARPAN TOPLAR
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<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>
Kaydol:
Kayıt Yorumları (Atom)
Hiç yorum yok:
Yorum Gönder