JSFiddle - React, Tailwind, and code Playground

HTML

<div id='math_practicing_game'> </div>

CSS

html, body {max-height:100%; max-width:100%; background:#252525; font-family:arial; overflow: hidden;}
#points {position:absolute; top:4%; left:4%; font-size:35px; color:#F3F3F3}

JavaScript

var container = document.getElementById('math_practicing_game'),
	points = document.createElement('div');
	container.appendChild(document.createElement('canvas'));
	container.appendChild(points);
	container.children[1].id = 'points';

var canvas = container.children[0],
	ctx = canvas.getContext('2d'),
	width = canvas.width = window.innerWidth,
	height = canvas.height = window.innerHeight,
	centerX = width / 2,
	centerY = height / 2,
	angle = 0,
	points = 0;

container.children[1].textContent = 'Score: ' + points;

player = {
	core: {x:0, y:0, radius:35, angle: Math.PI * 2},
	shield: {x:0, y:0, radius:80, protector:8, angle: Math.PI * 1}
}

difference = {
	x: function (a, b, check) {return (check == true ? a.x - b.x : a - b)},
	y: function (a, b, check) {return (check == true ? a.y - b.y : a - b)}
}

collision = {
	distance:
	function (player, spawn) {
	var a = player, b = spawn;
		return Math.sqrt(difference.x(a, b, true) * difference.x(a, b, true) + difference.y(a, b, true) * difference.y(a, b, true));
	},
	tangent: 
	function (player, spawn) {
		return Math.atan2(difference.y(player, spawn, true), difference.x(player, spawn, true));
	},
	core: 
	function (player, spawn) {
		return this.distance(player, spawn) <= player.radius + spawn.radius;
	},
	shield: 
	function (player, spawn) {
		return (this.distance(player, spawn) <= player.radius + spawn.radius) && (this.tangent(player, spawn) >= angle - Math.PI * 2 && this.tangent(player, spawn) >= angle);
	}
}

spawnCache = {
	groups: new Array()
}

function spawns() {
	this.shape = function (x, y, radius, angle, color) {
		this.x = x;
		this.y = y;
		this.radius = radius;
		this.angle = angle;
		this.color = color;
	};2

	this.main = function (obj) {
		this.create = function (obj) {
			for (var i = 0; i < 14; i++) {
				this.x = Math.random() * (obj.edgeMax - obj.edgeMin) + obj.edgeMin;
				this.y = Math.random() * (obj.offsetMax - obj.offsetMin) + obj.offsetMin;
				this.radius = 12;
				this.color =...