JSFiddle - React, Tailwind, and code Playground

by techsin

CSS

.box {
    width: 20px;
    height: 20px;
    border-radius: 500px;
    background-color: red;
    background-position:50% 50%;
    background-size: cover;
    position: absolute;
    top: 20px;
}
body {
    overflow: hidden;
    position: relative;
}
.bullet {
    height: 8px;
    width: 6px;
    background-color: gold;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    position: absolute;
}

JavaScript

var arr = [
    'http://img1.wikia.nocookie.net/__cb20150110232732/naruto/images/c/c3/Sasuke_headshot.png', 'http://img1.wikia.nocookie.net/__cb20150110232732/naruto/images/c/c3/Sasuke_headshot.png', 'http://img1.wikia.nocookie.net/__cb20150110232732/naruto/images/c/c3/Sasuke_headshot.png'];
var bullet = $('<div class="bullet">');

var eles = [];
var onScreen = [];
var mouse = {
    x: 0,
    y: 0
};
var bullets = [];

$(document).mousemove(function (e) {
    mouse.x = e.pageX;
    mouse.y = e.pageY;
}).keypress(function(e){
    if (e.which != 32) return;
    fireBullet();
});

function fireBullet() {
    var ele = bullet.clone();
    bullets.push(ele);
    ele.css('left',mouse.x-10+'px').css('top','250px').animate({'top':0},800,function(){
    $(this).remove();
    });
    $('body').append(ele);                                                          
}
arr.forEach(function (k) {
    var ele = $('<div class="box">');
    ele.css('background-image', 'url(' + k + ')');
    eles.push(ele);
});

function animate() {
    var time = Math.random() * 1000 + 5000;
    var ele = eles[Math.round((eles.length - 1) * Math.random())].clone();
    ele.css("left", Math.random() * 400 + "px").animate({
        top: 400
    }, time);
    setTimeout(function () {
        var i = onScreen.indexOf(ele);
        onScreen.splice(i, 1);
        ele.remove();
    }, time);
    $('body').append(ele);
    onScreen.push(ele);


    //  requestAnimationFrame(animate);
}

function explode(k,j) {
    j.remove();
    k.stop();
    k.css('background', 'red');
    setTimeout(function () {
        k.fadeOut(function () {
            $(this).remove();
        });
    }, 300);
}

setInterval(animate, 1200);
setInterval(function () {
    onScreen.forEach(function (k) {
        var x = k.offset().left;
        var y = k.offset().top;
        bullets.forEach(function (j) {

            var bx = j.offset().left;
            var by = j.offset().top;
            console.log(bx,by);
            if (x-10...