JSFiddle - React, Tailwind, and code Playground

by eccentric_j

HTML

<html>
    <head>
        <title>Test</title>
    </head>
    <body>
    </body>
</html>

JavaScript

function Bubble(x, y, x_jitter, y_jitter) {
    this.x = 0;
    this.y = 0;
    this.x_jitter = 0;
    this.y_jitter = 0;
    this.alpha = 1.0;
    this.size = 1.0;
    this.counter = 0;
    this.object = {};
    this.timer = 0;

    this.constructor.call(this, x, y, x_jitter, y_jitter);
}

(function(){
    Bubble.prototype.updatePosition = function() {
        this.object.style.left = this.x + "px";
        this.object.style.top = this.y + "px";

        if( this.y < 400 )
        {
            var bubble = this;
            $(this.object).fadeOut(1000, function(){ 
                bubble.timer = clearTimeout(bubble.timer);
                $(bubble.object).remove();
            });
        }
    };

    Bubble.prototype.animate = function() {
        var self = this;
        return function(){
            self.counter += Math.floor(Math.random() * 1.0) + 0.3;
            self.y -= self.speed;
            var x = Math.sin(self.counter); 
            x = Math.floor(x * (self.speed - 10));
            self.x = self.x + x;
            self.speed += 0.25;


            self.updatePosition();
        };
    };

    Bubble.prototype.draw = function() {
        this.object = document.createElement('div');
        this.object.innerHTML = "bubble";
        this.object.style.position = "absolute";
        this.object.style.left = this.x + "px";
        this.object.style.top = this.y + "px";
        this.object.style.width = this.size + "px";
        this.object.style.height = this.size + "px";
        this.object.className = "bubble";
        this.object.style.zIndex = "9999";
    };

    Bubble.prototype.constructor = function(x, y, x_jitter, y_jitter) {
        this.x = x + (Math.floor(Math.random() * x_jitter) - x_jitter);
        this.y = y + (Math.floor(Math.random() * y_jitter) - y_jitter);
        this.x_jitter = x_jitter;
        this.y_jitter = y_jitter;
        this.size = Math.floor(Math.random() * 10) + 3;
        this.distance = Math.floor(Math.random() * 20)...