JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

CSS

div{
    border-radius: 50%;
    position:absolute;
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
   opacity:0.5;
}

.b-1 { background: #FF6600 }
.b-2 { background: #CC6633 }
.b-3 { background: #993300 }
.b-4 { background: #FF9933 }
.b-5 { background: #FF9966 }

JavaScript

var ship = function () {
    this.position = {
        x: 0,
        y: 0
    };
    this.position.__proto__ = {
        set: function (x, y) {
            this.x = x;
            this.y = y;
        },
        distanceTo: function (other) {
            return [{
                x: other.position.x - this.x,
                y: other.position.y - this.y

            },
            Math.sqrt((this.x - other.position.x) * (this.x - other.position.x) + (this.y - other.position.y) * (this.y - other.position.y))]
        }
    };

};


ship.__proto__ = {
    createAt: function (x, y) {
        var t = new ship(x, y);
        t.position.set(x, y);
        return t;
    }
};
ship.prototype = {
    moveTo: function (x, y, callback, rate, stepcount) {
        var parent = this;
        var step = parent.position.distanceTo(ship.createAt(x, y));
        if (typeof stepcount === 'undefined') {
            step[0].x = step[0].x / step[1];
            step[0].y = step[0].y / step[1];
        } else {
            step[1] = stepcount;
            step[0].x = step[0].x / step[1];
            step[0].y = step[0].y / step[1];
        }
        parent.count = 0;

        parent.timer = setInterval(function () {
            parent.position.set(parent.position.x + step[0].x, parent.position.y + step[0].y);

            if (parent.count >= step[1]) {
                window.clearInterval(parent.timer);
                if (typeof callback !== 'undefined') callback();
            }
            parent.count++;
        }, (typeof rate === 'undefined') ? 20 : rate);
    }
};

function randommove(that) {
    return that.moveTo((((Math.random() ) )*(300*Math.random())), (((Math.random() ) )*(300*Math.random())), function () {
        randommove(that)
    }, 'undefined', 150);
}


var test = ship.createAt(100, 100);
var test2 = ship.createAt(100, 100);
var div = new Array();
var test = new Array();
for(var i = 0;i<500;i++){
    div[i] = document.createElement('div');
    div[i].className =...