JSFiddle - React, Tailwind, and code Playground

by PiereDome

HTML

<canvas id='canvas'></canvas>

JavaScript

//Collision Testing
var Vector = function(x, y, z) {
    this.x = x || 0;
    this.y = y || 0;
    this.set = function(x, y) {
        this.x = x;
        this.y = y;
    };
    this.dot = function(v) {
        return v.x * this.x + this.y * v.y;
    };
    this.add = function(v) {
        return {
            x: this.x + v.x,
            y: this.y + v.y
        };
    };
    this.subtract = function(v) {
        return {
            x: this.x - v.x,
            y: this.y - v.y
        };
    };
};


var Ball = function(x, y, r, xVel, yVel) {
    this.x = x || 0;
    this.y = y || 0;
    this.r = this.w = this.h = r || 2;
    this.v = new Vector(xVel, yVel);
    this.draw = function(ctx) {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
        ctx.stroke();
        ctx.closePath();
    };
    this.update = function() {
        this.x += this.v.x;
        this.y += this.v.y;
    };
    this.boundingBox = function(b) {
        a = this;
        return (Math.abs(a.x - b.x) * 2 <= (a.w * 2 + b.w * 2)) && (Math.abs(a.y - b.y) * 2 <= (a.h * 2 + b.h * 2));
    };
    this.circle = function(a, b) {
        dx = b.x - a.x;
        dy = b.y - a.y;
        radii = a.r + b.r;
        return (dx * dx) + (dy * dy) <= (radii * radii);
    };
};


var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var shapes = [];

shapes.push(new Ball(20, 10, 5, 0, 10));
shapes.push(new Ball(40, 10, 10, -10, 0));
shapes.push(new Ball(30, 40, 10, -10, -10));

function boundingBoxTest(a, b) {
    return (Math.abs(a.x - b.x) * 2 <= (a.w * 2 + b.w * 2)) && (Math.abs(a.y - b.y) * 2 <= (a.h * 2 + b.h * 2));
}

function circularTest(a, b) {
    dx = b.x - a.x;
    dy = b.y - a.y;
    radii = a.r + b.r;
    return (dx * dx) + (dy * dy) <= (radii * radii);
}

function calculateBounce(a, b) {
    document.getElementById('canvas').style.background = 'red';
}
var count = 0;

function render() {
    count++;
    for (i = 0; i <...