JSFiddle - React, Tailwind, and code Playground

by Harm Zeinstra

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <!-- <h1 class="title">Click for flash!</h1> -->
        <div id="partical" class="partical"></div>
        <div id="box">
            <span id="spawn"></span>
        </div>

CSS

body {
   margin:0;
   padding:0; 
   overflow:hidden;
}

.title {
    position:absolute;
    padding-left:25%;
    padding-top:25%;
    color:white;
    z-index:2;
}

#box {
    width:100vw;
    height:100vh;
    position:absolute;
    /* background-color:black; */
    z-index:99999;
}

.blink {
    animation: blink 0.1s linear 0s infinite alternate;
}

@keyframes blink{
    from {
        background-color:black;
        color:white;
    }
    to {
        background-color:white;
        color:black;
    }
}

@-webkit-keyframes blink{
    from {
        background-color:black;
        color:white;
    }
    to {
        background-color:white;
        color:black;
    }
}

.partical {
    border-radius:999px;
    position:absolute;
    z-index:3;
}

#spawn {
  width:15px;
  height:15px;
  border-radius:99px;
  cursor:pointer;
  position:absolute;
  left:50%;
  top:80%;
  animation: slide 0.6s linear 0s infinite alternate;
}

@keyframes slide{
    from {
        left: 10%;
    }
    to {
        left: 90%;
    }
}

@-webkit-keyframes slide{
    from {
        left: 10%;
    }
    to {
        left: 90%;
    }
}

JavaScript

//Setup
    $('#box, .title, .partical').click( function() 
    {
       $('#box').toggleClass('blink');
       $('.title').toggleClass('blink');
    });
    var currentmilis = Date.now();
    var particals = [];
    
   
    $('#spawn').draggable();
    
    // Play
    setInterval(function() {
        addPartical();
        
        particals.forEach( function(p)
        {
            p.move();
            p.reDraw();
            if (p.hitFloor() || p.isStopped()) {
                var i = particals.indexOf(p);
                particals.splice(i, 1);
                $('#'+i).remove();
            }
        });
    }, 50);
    
    function addPartical () 
    {
        if (Date.now() - currentmilis > 200) {
            if(particals.length < 25) {
                for (i = 0; i < 5; i++) {
                    particals.push(new Partical(
                        particals.length,
                        $("#spawn").offset().left, 
                        $("#spawn").offset().top,
                        ( (Math.floor(((Math.random() * 50) +1)*-1)+Math.floor((Math.random() * 50)+1) )/2 ),
                        (Math.floor((Math.random() * -50) + 1)),
                        ( (Math.floor(((Math.random() * 50) +1)*-1)+Math.floor((Math.random() * 50)+1) )/2 ),
                        (Math.floor((Math.random() * 50) + 1)/100),
                        Math.floor((Math.random() * 15) + 20),
                        ('rgb('+Math.floor((Math.random() * 255) + 1)+','+Math.floor((Math.random() * 255) + 1)+','+Math.floor((Math.random() * 255) + 1)+')')
                        ));
                }
                currentmilis = Date.now();
            }
        }
    };

    


function Partical(id, x, y, vx, vy, ax, ay, size, color) 
{
    this.id = id;
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.ax = ax;
    this.ay = ay;
    this.size = size;
    this.color = color;
    this.obj = $('#partical').clone().attr('id',...