JSFiddle - React, Tailwind, and code Playground
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 = {},
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);
ctx.restore();
};
Common.prototype.setMv = function(data) {
this.x = data[0];
this.y = data[1];
this.vx = data[2];
this.vy = data[3];
this.ax = data[4];
this.ay = data[5];
};
Common.prototype.calcMv = function() {
var t = (Date.now() - this.lt) / 1000;
this.x += this.vx * t...