radios

by lbstr

HTML

<div id="wrap"></div>

CSS

#wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
}

.ball {
    position: absolute;
    left: 0;
    top: 0;
}

JavaScript

var Ball = function($wrap, x, y, vx, vy, ax, ay) {
    var id = 'ball-' + Math.floor((Math.random() * (+new Date())));
    $wrap.append('<input type="radio" class="ball" id="' + id + '" />');
    this.$ball = $('#' + id);
    this.$wrap = $wrap;
    
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.ax = ax;
    this.ay = ay;
};

Ball.prototype.draw = function() {
    this.$ball.css({
        left: this.x,
        top: this.y
    });
};

Ball.prototype.update = function() {
    var $wrap = this.$wrap,
        w = $wrap.width(),
        h = $wrap.height(),
        x0 = this.x,
        y0 = this.y,
        vx0 = this.vx,
        vy0 = this.vy,
        ax = this.ax,
        ay = this.ay,
        x1, y1, vx1, vy1;
    
    vx1 = vx0 + ax;
    vy1 = vy0 + ay;
    x1 = x0 + vx0;
    y1 = y0 + vy0;

    if (x1 < 0 || x1 > w - this.$ball.width()) {
        vx1 *= -1;
        x1 = x0 - vx0;
    }
    if (y1 < 0 || y1 > h - this.$ball.height()) {
        vy1 *= -1;
        y1 = y0 - vy0;
    }
    
    this.x = x1;
    this.y = y1;
    this.vx = vx1;
    this.vy = vy1;
};

Ball.prototype.updateForce = function(fx, fy) {
    this.ax = fx;
    this.ay = fy;
};

///////////////////////////////////////////////

var Controller = function($wrap) {
    this.$wrap = $wrap;
};

Controller.prototype.initialize = function() {
    this.addBalls();
    this.initMouse();
    this.startLoop();
};

Controller.prototype.addBalls = function() {
    var $wrap = this.$wrap;
    this.balls = [
        new Ball($wrap, 0, 0, -2, 1, 0, 0),
        new Ball($wrap, 10, 10, -2, 1, 0, 0),
        new Ball($wrap, 20, 20, -2, 1, 0, 0),
        new Ball($wrap, 30, 30, -2, 1, 0, 0),
        new Ball($wrap, 40, 40, -2, 1, 0, 0),
        new Ball($wrap, 50, 50, -2, 1, 0, 0),
        new Ball($wrap, 60, 60, -2, 1, 0, 0),
        new Ball($wrap, 70, 70, -2, 1, 0, 0),
        new Ball($wrap, 80, 80, -2, 1, 0, 0),
        new Ball($wrap, 90, 90, -2, 1, 0, 0),
        new Ball($wrap,...