JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="resources/css/main.css"/>
    <script type="text/javascript" src="js/game.js"></script>
    <script type="text/javascript" src="js/particles.js"></script>
</head>
<body>

<canvas id="mainCanvas" width="640" height="480" style="z-index: 100; position: absolute;"></canvas>

<div id="particleCount">
    
</div>

</body>
</html>

CSS

/*
* {
    padding: 0px;
    margin: 0px;
}
*/

#particleCount {
    z-index: 101;
    background-color: #d3d3d3;
    position: absolute;
    left: 240px;
    margin: 5px;
    padding: 2px;
    width: 160px;
}

JavaScript

var ParticleEngine = (function() {

    var screenWidth;
    var screenHeight;
    var canvas;
    var ctx;

    var acceleration;
    var particles;
    var particleSize;
    var numParticlesToAddAtOnce;
    var emitLocation;
    var velocityRange;

    var runPE = function()
    {
        ctx.fillStyle = "#000";
        ctx.fillRect(0, 0, screenWidth, screenHeight);

        for(var p=0; p<numParticlesToAddAtOnce; p++)
        {
            addParticle();
        }
        
        for(var i=0; i<particles.length; i++)
        {
            var particle = particles[i];
            drawParticle(particle);
            updateParticle(particle, i);
        }
        document.getElementById("particleCount").innerHTML = "Number of particles: "+particles.length;
    };

    var addParticle = function(particle)
    {
        var particle = createParticle();
        particles.push(particle);
    };

    var createParticle = function()
    {
        var vRangeX = velocityRange["xRange"];
        var vRangeY = velocityRange["yRange"];

        var particle = {
            location: {
                x: emitLocation["x"],
                y: emitLocation["y"]
            },
            velocity: {
                x:  vRangeX[0]+(Math.random()*vRangeX[1]*2),
                y:  vRangeY[0]+(Math.random()*vRangeY[1]*2)
            }
        }
        
        return particle;
    };

    var updateParticle = function(particle, index)
    {
        particle.location["x"]+=particle.velocity["x"];
        particle.location["y"]+=particle.velocity["y"];
        particle.velocity["x"]+=acceleration["x"];
        particle.velocity["y"]+=acceleration["y"];

        if(particle.location["x"] > screenWidth+particleSize || particle.location["y"]+particleSize > screenHeight)
        {
            particles.splice(index, 1);
        }

        return { x: particle.location["x"], y: particle.location["y"] };
    };

    var drawParticle = function(particle)
    {
        ctx.fillStyle =...