JSFiddle - React, Tailwind, and code Playground

by mvasilkov

HTML

<div id="container">
    <canvas id="L1" width="900" height="600"></canvas>
    <canvas id="L2" width="900" height="600"></canvas>
</div>

CSS

#container {
    height: 600px;
    margin: 0 auto;
    position: relative;
    width: 900px;
}
canvas {
    display: block;
    left: 0;
    position: absolute;
    top: 0;
}
#L1 {
    background: #101010;
}

JavaScript

function $id(id) {
    return document.getElementById(id)
}

function rand0(a) {
    return a * (Math.random() - 0.5)
}
var L1 = $id('L1'),
    L2 = $id('L2')
var R1 = L1.getContext('2d'),
    R2 = L2.getContext('2d')
var x0 = 0.5 * 900 + 0.5
var y0 = 0.5 * 600 + 0.5
R1.translate(x0, y0)
R2.translate(x0, y0)

/** @const */
var deadZone = 100

function Rocket() {
    var s, dist, a, i10n
    s = 1 - 2 * (Math.random() < 0.5)
    if (Math.random() < 0.4) {
        this.x = 0.5 * 900 * s
        this.y = rand0(600 - deadZone)
    } else {
        this.x = rand0(900 - deadZone)
        this.y = 0.5 * 600 * s
    }
    dist = Math.sqrt(this.x * this.x + this.y * this.y)
    this.r = 0.75 * dist
    a = Math.atan(-this.x / this.y) + Math.asin(0.5 * dist / this.r) + (this.y < 0) * Math.PI
    this.x0 = this.x - this.r * Math.cos(a)
    this.y0 = this.y - this.r * Math.sin(a)
    if ((i10n = intersection(this.x0, this.y0, this.r))) {
        this.x1 = i10n[0]
        this.y1 = i10n[1]
    } else this.x1 = this.y1 = 0
    this.a0 = Math.atan2(this.y - this.y0, this.x - this.x0)
    this.a1 = Math.atan2(this.y1 - this.y0, this.x1 - this.x0)
    if (this.a0 <= this.a1) this.a0 += 2 * Math.PI
}
Rocket.prototype.render = function(av) {
    this.a0 -= av
    if (this.a0 <= this.a1) return this.hit = true
    this.x = this.x0 + this.r * Math.cos(this.a0)
    this.y = this.y0 + this.r * Math.sin(this.a0)
    R2.beginPath()
    R2.setLineDash([4])
    R2.arc(this.x0, this.y0, this.r, this.a0, this.a1, true)
    R2.strokeStyle = '#1ad6fd'
    R2.stroke()
    R2.fillStyle = '#1ad6fd'
    R2.fillRect(this.x - 2.5, this.y - 2.5, 5, 5)
}

function intersections(x, y, r) {
    var r0 = 64
    var dist = Math.sqrt(x * x + y * y)
    if (dist > r0 + r || dist < Math.abs(r0 - r)) return false
    var a = (r0 * r0 - r * r + dist * dist) / (2 * dist)
    var x2 = x * a / dist
    var y2 = y * a / dist
    var b = Math.sqrt(r0 * r0 - a * a)
    var rx = -y * b / dist
    var ry = x * b /...