canvas005

by catfood

HTML

<canvas width="500" height="500" id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var speedX = [],speedY=[],x=[],y=[]
   var flag = 1,flag2 = 1;
for(var i=0 ;i<100 ; i++){
    flag2 = flag2*-1;
    if(i>50){
        flag = -1
    }else{
        flag = 1;
    }
    speedX[i] = Math.random() * 5*flag;
    speedY[i] = Math.random() * 5*flag2;

    x[i] = 245;
    y[i] = 245; 
}
setTimeout(function() {
    ctx.clearRect(0, 0, 500, 500);        
    for(var i=0 ;i<100 ; i++){
        if (x[i] > 500 || x[i] < 0) {
            speedX[i] = speedX[i] * -1;
        }
        if (y[i] > 500 || y[i] < 0) {
            speedY[i] = speedY[i] * -1;
        }
        
        ctx.fillRect(x[i], y[i], 5, 5);
        x[i] += speedX[i];
        y[i] += speedY[i];
    }
    setTimeout(arguments.callee, 20);
}, 1);