JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="ball-canvas" width="400" height="300"></canvas>

CSS

canvas {
    box-shadow: 0 0 3px #aaa;
    transition: 0.05s all linear;
}

canvas.hit {
    box-shadow: 0 0 6px #f00
}

JavaScript

var canvas = document.getElementById('ball-canvas');
		var context = canvas.getContext('2d')
		 var radius = 20;
		var strokewidth = 2;
		var strokestyle = '#666';
		var frameCount = 0;
		var w = canvas.width;
		var h = canvas.height;

		// Circle Objects
		var yellowCircle = {
		    x: 30,
		    y: h / 2,
		    radius: radius,
		    color: 'yellow',
		    moveX: 1,
		    moveY: -1
		}

		var redCircle = {
		    x: 80,
		    y: h / 2,
		    radius: radius,
		    color: 'red',
		    moveX: -2,
		    moveY: -1
		}

		var blueCircle = {
		    x: 130,
		    y: h / 2,
		    radius: radius,
		    color: 'blue',
		    moveX: 2,
		    moveY: 4
		}
        
        var greenCircle = {
		    x: 190,
		    y: h / 2,
		    radius: radius,
		    color: 'green',
		    moveX: -1,
		    moveY: -1
		}

		// Create empty array and then push cirlce objects into array
		var circles = [];
		circles.push(yellowCircle, blueCircle, redCircle, greenCircle);

		// Clear last circle and draw again
		function draw() {
		    context.clearRect(0, 0, canvas.width, canvas.height); // Clear the circle from the from page
		    for (var i = 0; i < circles.length; i++) {
		        var c = circles[i];
		        context.beginPath();
		        context.fillStyle = c.color // Set the color of the circle using key:valuecontext.fill();
		        context.lineWidth = strokewidth;
		        context.strokeStyle = strokestyle;
		        context.stroke();
		        context.arc(c.x, c.y, c.radius, 0, Math.PI * 2); // X-axis Position, y-axis Position, radius, % of fill, ?
		        context.closePath();
		        context.fill();
		    }
		}

		function animate() {
		    for (var i = 0; i < circles.length; i++) {
		        var c = circles[i];
		        for (var u = i; u < circles.length; u++) {
                    var c2 = circles[u];
		            if (i == u) continue;
                    if (
                        (
                        (c.x <= c2.x && c.x + c.radius*2 >= c2.x) ||
                       ...