JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

CSS

* {
    margin:0px;
    padding:0px;
}
html, body {
    width:100%;
    height:100%;
    overflow:hidden;
}
canvas {
    outline:double 3px black;
}

JavaScript

var canvas = document.createElement('canvas'),
    c = canvas.getContext('2d');
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
document.body.appendChild(canvas);

var Circle = function (x, y, size, context) {
    var circle = Object.create(null);
    circle.position = Object.create(null);
    circle.position.x = x;
    circle.position.y = y;
    circle.velocity = Object.create(null);
    circle.velocity.x = 0;
    
    circle.velocity.y = 0;
    circle.collision = [];
    circle.size = size;
    circle.c = context;
    circle.draw = function (f) {
        circle.c.save();
        circle.c.translate(circle.position.x, circle.position.y);
        circle.c.beginPath();
        circle.c.arc(0, 0, size, 0, Math.PI * 2, false);
        circle.c.closePath();
        if (f) circle.c.fill();
        circle.c.stroke();
        circle.c.restore();
    };
    circle.force = function (x, y) {
        circle.velocity.x += x / circle.size;
        circle.velocity.y += y / circle.size;
    };
    circle.checkBoundaries = function () {
        var x = 0,
            y = 0;
        if (circle.position.x > circle.c.canvas.width - circle.size) {
            circle.position.x = circle.c.canvas.width - circle.size;
            x = -circle.velocity.x * circle.size;
        }
        if (circle.position.x < 0 + circle.size) {
            circle.position.x = circle.size;
            x = -circle.velocity.x * circle.size;
        }
        if (circle.position.y > circle.c.canvas.height - circle.size) {
            circle.position.y = circle.c.canvas.height - circle.size;
            y = -circle.velocity.y * circle.size;
        }
        if (circle.position.y < 0 + circle.size) {
            circle.position.y = circle.size;
            y = -circle.velocity.y * circle.size;
        }
        circle.force(x * 2, y * 2);
    };
    circle.checkSpheres = function (e) {
        e = e.filter(function(b){return circle.collision.some(function(a){return a...