JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<button id="explode">Explode</button>
<div id="container">
    <canvas id="canvasTop" width=300 height=300></canvas>
    <canvas id="canvasBottom" width=300 height=300></canvas>
</div>

CSS

body {
    background-color: ivory;
    padding:20px;
}
#container {
    position:relative;
}
canvas {
    border:1px solid red;
    position:absolute;
    top:0;
    left:0
}

JavaScript

var canvasT = document.getElementById("canvasTop");
var ctxT = canvasT.getContext("2d");
var canvasB = document.getElementById("canvasBottom");
var ctxB = canvasB.getContext("2d");

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


var elevatorX = 30;
var elevatorY = 30;
var elevatorWidth = 40;
var elevatorHeight = 60;
var elevatorSpeed = 2;
var elevatorDirection = 1;

ctxT.strokeStyle = "orange";
var explosionX = 100;
var explosionY = 200;
var explosionStartingRadius = 10;
var explosionEndingRadius = 25;
var explosionRadius = explosionStartingRadius;

var raf1;
var raf2;

runElevator();


function explode(x, y, maxRadius) {

    explosionX = x;
    explosionY = y;
    explosionMaxRadius = maxRadius
    explosionRadius = 10;

    ctxT.clearRect(0, 0, canvasB.width, canvasB.height);
    ctxT.beginPath();
    ctxT.arc(x, y, explosionRadius, 0, Math.PI * 2, false)
    ctxT.closePath();
    ctxT.fillStyle = "yellow"
    ctxT.fill();
    ctxT.stroke();
    ctxT.fillStyle = "orange";
    runExplosion();

}

var fps1 = 60;

function runElevator() {
    setTimeout(function () {
        raf1 = requestAnimFrame(runElevator);

        elevatorY += elevatorSpeed * elevatorDirection;
        if (elevatorY + elevatorHeight > canvasB.height || elevatorY < 30) {
            elevatorDirection = -elevatorDirection;
        }

        drawElevator(elevatorX, elevatorY, elevatorWidth, elevatorHeight)

    }, 1000 / fps1);
}

var fps2 = 30;

function runExplosion() {

    explosionRadius += 1.5;

    if (explosionRadius < explosionMaxRadius) {
        drawExplosion(explosionX, explosionY, explosionRadius);
        setTimeout(runExplosion, 1000 / fps2);
    } else {
        ctxT.clearRect(0, 0, canvasT.width,...