JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<canvas id="canvas" width="600" height="300"></canvas>

CSS

canvas {
    border: 1px solid gray;
}

JavaScript

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

function PlayerConstructor(options) {
    var coords = {'x': 0, 'y': 0};
    this.color = options.color;
    this.width = options.width;
    this.height = options.height;
    this.coords = (function () {
        return coords;
    })();
    this.moveRandom = function () {
        coords.x += 2*(Math.random()*2.2 - 1.05);
        coords.y += 2*(Math.random()*2.2 - 1.05);
    };
}

function ControllerConstructor(options) {
    var c = document.getElementById(options.canvasId);
    var ctx = c.getContext("2d");
    var players = {}
    for (var i = 0; i < 500; i++) {
    	players[i] = new PlayerConstructor({
            'color': getRandomColor(),
            'width': 1 + Math.round(Math.random()*2),
            'height': 1 + Math.round(Math.random()*2),
        });
    }

    this.refreshCanvas = function () {
        //if (Math.random()>0.999) ctx.clearRect(0, 0, c.width, c.height);
        for (i in players) {
            if (players.hasOwnProperty(i)) {
                players[i].moveRandom();
                ctx.fillStyle = players[i].color;
                ctx.fillRect(players[i].coords.x, players[i].coords.y, players[i].width, players[i].height);
            }
        }
    }
}

window.controller = new ControllerConstructor({
    'canvasId': 'canvas'
});

window.setInterval(function () {
    controller.refreshCanvas();
}, 1);