Ball Canvas

by unsign3d

HTML

<canvas id="canvas" widht="400px" height="400px"></canvas>

JavaScript

var ctx;
var balls = [];
var date;

function Ball(x, y, speed, angle, color)
{
    this.x = x;
    this.y = y;
    this.speed = speed;
    this.angle = angle;
    this.color = color;
    
    var radius = 10;
    
    this.Draw = function(ctx) {
        ctx.strokeStyle = this.color;
        ctx.lineWidth = 3;
        
        ctx.beginPath();
        ctx.arc(this.x, this.y, radius, 0, 2 * Math.PI);
        ctx.stroke();   
    };
    
    this.Move = function() {
        var vx = this.speed * Math.cos(this.angle);
        var vy = this.speed * Math.sin(this.angle);
        this.x += vx;
        this.y += vy;
    };
    
    
    
}

function Update()
{
    ctx.clearRect(0, 0, 400, 400);
    var d = new Date();
    if (d.getSeconds() - date.
    var dif = d.getMilliseconds() - date.getMilliseconds();
    dif = 1000 / dif;
    
    ctx.font = "20px Arial";
    ctx.fillText("FPS: " + parseInt(dif) + "/30", 0, 380);
                 
    var i = 0;
    for (i; i < balls.length; i++) {
        balls[i].Draw(ctx);
    }

    date = new Date();
}

function Move()
{
    var i = 0;
    for (i; i < balls.length; i++) {
        balls[i].Move();    
    }
        
}

var elem = document.getElementById("canvas");
ctx = elem.getContext("2d");

date = new Date();

balls.push(new Ball(50, 50, 5, Math.PI, "#000000"));
balls.push(new Ball(200, 200, 5, Math.PI / 2, "#FF00FF"));

setInterval(Update, 1000 / 30);
setInterval(Move, 1);


/*
        vx = v * cos(angle)
        vy = v * sin(angle)
*/