JSFiddle - React, Tailwind, and code Playground

by nwellcome

HTML

<canvas id="canvas" width="640" height="480"></canvas>

JavaScript

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

var Missle = function (_x, _y, _target) {
    var self = {};
    self.x = _x;    self.vx = 0;    self.ax = 0;
    self.y = _y;    self.vy = 0;    self.ay = 0;
	self.r = 5;     self.mu = 0.5;
    self.target = _target;
    self.thrust = 0.001;
    self.targetX = 0;
    self.targetY = 0;
    self.frame = 0;
    self.frames = 500;
    self.tick = function () {
        // target!
        // how far am I?
        var dx = self.x - self.target.x;
        var dy = self.y - self.target.y;
        var distance = Math.sqrt(dx * dx + dy * dy);
        var speed = Math.sqrt(self.vx * self.vx + self.vy * self.vy);
        var time = distance / speed;
        
        if (time == Infinity) {
            self.ax = -self.thrust * dx;
            self.ay = -self.thrust * dy;
        } else {
            self.targetX = self.target.x + (self.target.vx * time);
            self.targetY = self.target.y + (self.target.vy * time);
            self.ax = -self.thrust * (self.x - self.targetX);
            self.ay = -self.thrust * (self.y - self.targetY);
        }
        self.vx += self.ax;
        self.vy += self.ay;
        self.x += self.vx;
        self.y += self.vy;
    };
    self.draw = function (context) {
        context.beginPath();
        context.arc(self.x, self.y, self.r, 0, Math.PI * 2, true);
        context.closePath();
        context.fillStyle = "rgba(0, 0, 255, 1)";
        context.fill();
        
        context.beginPath();
        context.moveTo(self.x, self.y);
        context.lineTo(self.targetX, self.targetY);
        context.closePath();
        context.strokeStyle = "rgba(0, 255, 0, 1)";
        context.stroke();
        
        context.beginPath();
        context.moveTo(self.x, self.y);
        context.lineTo(self.x +...