<head>
<script>
var context;
var x=100;
var y=200;
var dx=5;
var dy=5;
var n=5;
var bBola=new Array();
function init(){
canvas=myCanvas;
context= myCanvas.getContext('2d');
for (i=0;i<n;i++){
dx = Math.random()*10-5;
dy = Math.random()*10-5;
bBola.push(new bola('#007700', 17,dx,dy));
}
setInterval(draw,10);
}
function draw(){
context.clearRect(0,0, 500,300);
for (i=0;i<n;i++){
//pantul
if (bBola[i].x >= (canvas.width - bBola[i].r) || bBola[i].x <= bBola[i].r) bBola[i].dx *= -1;
if (bBola[i].y >= (canvas.height - bBola[i].r) || bBola[i].y <= bBola[i].r) bBola[i].dy *= -1;
//buat
bBola[i].context.beginPath();
bBola[i].context.fillStyle = bBola[i].color;
bBola[i].context.arc(bBola[i].x,bBola[i].y,bBola[i].r,0,Math.PI*2,false);
bBola[i].context.fill();
//gerak
bBola[i].x+=bBola[i].dx;
bBola[i].y+=bBola[i].dy;
}
}
function bola(color, r,dx,dy){
this.canvas = canvas;
this.context = canvas.getContext('2d');
this.r = r;
this.x =Math.random()*400+30;
this.y = Math.random()*250+30;
this.dx = dx;
this.dy = dy;
this.color = color;
}
window.onload = function(){
init()
}
</script>
</head>
<body>
<canvas height="300" id="myCanvas" width="500">
</canvas>
</body>
No comments:
Post a Comment