JSFiddle - React, Tailwind, and code Playground

by Tgwizman

HTML

<canvas id="c"></canvas>

CSS

* {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
}

JavaScript

var canvas, ctx, keys, entities;

var ENTITY = (function() {
    function ENTITY(x, y, r, c) {
        this.position = {
            'x': x,
            'y': y
        };
        this.velocity = {
            'x': 0,
            'y': 0
        };
        this.radius = r;
        this.color = c;
    }
    ENTITY.prototype.render = function() {
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(
            Math.round(canvas.width/2 + this.position.x),
        	Math.round(canvas.height/2 + this.position.y),
            this.radius, 0, 2 * Math.PI, false
        );
        ctx.fill();
    };
    ENTITY.prototype.checkCollision = function(Other) {
        if (Math.abs(Math.sqrt(Math.pow(this.position.x-Other.position.x,2)+Math.pow(this.position.y-Other.position.y,2))) < this.radius+Other.radius) {
            return true;
        }
        return false;
    };
    return ENTITY;
})();

function init() {
    canvas = document.getElementById('c');
    ctx = canvas.getContext('2d');

    keys = {};
    document.onkeydown = function(e) {
        keys[e.keyCode] = true;
    };
    document.onkeyup = function(e) {
        keys[e.keyCode] = false;
    };
    
    entities = [
        new ENTITY(0, 0, 30, '#F00')
    ];
    
    for (var i = 0; i < 5; i++) {
        entities.push(new ENTITY(
            Math.random() * 200 - 100,
            Math.random() * 200 - 100,
            Math.random() * 10 + 20,
            '#0' + Math.round(Math.random()*10+5).toString(16) + '0'
        ));
    }

    console.log(entities)

	loop();
}

function loop() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    logic();
    render();

    requestAnimationFrame(loop);
}

function logic() {
    if (keys[37]) entities[0].velocity.x -= 3;
    if (keys[38]) entities[0].velocity.y -= 3;
    if (keys[39]) entities[0].velocity.x += 3;
    if (keys[40]) entities[0].velocity.y += 3
    
    for (var i=0; i < entities.length; i++) {
       ...