JSFiddle - React, Tailwind, and code Playground

by Pysis

HTML

<canvas id="gameArea" width="800" height="600"></canvas>

JavaScript

(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

var gameArea = document.getElementById("gameArea");

window.context = gameArea.getContext("2d");

function makeFillStyle(r, g, b, a) {
    a = a || 255;
    return 'rgba(' + r + ',' + g + ',' + b + ',' + (a / 255) + ')';
}

function drawPixel(context, color, position) {
    context.fillStyle = makeFillStyle(color.r, color.g, color.b, 255);
    context.fillRect(x, y, 1, 1);
}

function drawCircle(context, color, centerPosition, radius) {
    context.beginPath();
    context.arc(centerPosition.x, centerPosition.y, radius, 0, 2 * Math.PI, false);
    context.fillStyle = makeFillStyle(color.r, color.g, color.b, 255);
    context.fill();
}

gameArea.onmousemove = function (e) {
    if (!e) var e = window.event;
    var x = e.offsetX,
        y = e.offsetY;
    
    makeRandomFirework(x, y);
};

function getRandomDirection(magnitude) {
    var angle = Math.random() * (2 * Math.PI);
    return {
        x: magnitude * Math.cos(angle),
        y: magnitude * Math.sin(angle)
    };
}

function getRandomColor(r, g, b, radius) {
    function randomColorValue(r) {
        return Math.max(0, Math.min(255, Math.round(r + Math.random() * radius)));
    }
    return {r: randomColorValue(r), g: randomColorValue(g), b: randomColorValue(b)};
}

function makeRandomFirework(x, y) {
    for (var i = 0; i < 40; i++) {
        particleManager.add(new Particle(getRandomColor(192, 0, 0, 64), {x: x, y: y}, Math.random()*5, getRandomDirection(Math.random()*0.2), 1000+Math.random()*2000));
    }
}

var mousedown = gameArea.onmousedown = function (e) {
    if (!e) var e = window.event;
    var x = e.offsetX,
        y = e.offsetY;

    makeRandomFirework(x, y);

    gameArea.onmousedown = null;
}

gameArea.onmouseup =...