JSFiddle - React, Tailwind, and code Playground

by Aves

HTML

<canvas id="cnv"></canvas>
<div id="out">

CSS

canvas {
    display: block; 
    position: relative; 
    margin: 2em auto; 
}

div {
    word-wrap: break-word;
}

JavaScript

var ctx = $('#cnv')[0].getContext('2d'),
    hx = 300,
    hy = 200,
    mouse = {
        hoverOn: []
    },
    list = [],
    player;
ctx.canvas.width = 2 * hx;
ctx.canvas.height = 2 * hy;
ctx.translate(hx, hy);
ctx.scale(1, -1);

function Common() {}

Common.prototype.draw = function() {
    var ihx, ihy, src, alpha, ang, d, t, x, y;
    d = Math.sqrt(this.dirx * this.dirx + this.diry * this.diry);
    (this.diry > 0) ? ang = Math.asin(this.dirx / d) : ang = Math.PI - Math.asin(this.dirx / d);
    ctx.save();
    ctx.translate(this.x - player.x, this.y - player.y);
    ctx.lineWidth = 0.3;
    for (t = (Date.now() - this.lt) / 1000; t < 60;) {
        x = this.vx * t;
        y = this.vy * t;
        ctx.beginPath();
        ctx.moveTo(x, y);
        t += 1;
        x = this.vx * t;
        y = this.vy * t;
        ctx.lineTo(x, y);
        alpha = 1 - t / 60;
        ctx.strokeStyle = 'rgba(200,200,250,' + alpha + ')';
        ctx.stroke();
    }

    if (this.ax !== 0 || this.ay !== 0) {
        for (t = (Date.now() - this.lt) / 1000; t < 60;) {
            x = this.vx * t + this.ax * t * t / 2;
            y = this.vy * t + this.ay * t * t / 2;
            ctx.beginPath();
            ctx.moveTo(x, y);
            t += 1;
            x = this.vx * t + this.ax * t * t / 2;
            y = this.vy * t + this.ay * t * t / 2;
            ctx.lineTo(x, y);
            alpha = 1 - t / 60;
            ctx.strokeStyle = 'rgba(250,250,0,' + alpha + ')';
            ctx.stroke();
        }
        src = this.acs;
    } else {
        src = this.reg;
    }
    ihx = src.width / 2;
    ihy = src.height / 2;
    ctx.scale(1, -1);
    ctx.rotate(ang);
    ctx.drawImage(src, -ihx, -ihy);
    src = this.frm;
    ihx = src.width / 2;
    ihy = src.height / 2;
    //ctx.scale(1, -1);
    ctx.rotate(-ang);
    ctx.drawImage(src, -ihx, -ihy);
    ctx.restore();
};

Common.prototype.setMv = function(data) {
    this.x = data[0];
    this.y = data[1];
    this.vx = data[2];
   ...