Friday, November 30, 2012

Bouncing Ball using Array on Canvas (without prototype method) in HTML 5

Here the code for this




<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>