JSFiddle - React, Tailwind, and code Playground

by andrewray

HTML

<div class="thing"></div>

CSS

body{margin:0; padding:0; font-family:Arial, sans-serif; font-size:11pt; height:1640px; border-bottom:5px solid #FF8544; background:#0F1B1C;}

.thing {padding:10px 30px 30px; color:#FF8548; font-size:30pt; font-weight:bold; line-height:100px; text-align:center; overflow:hidden; position:relative;
margin:20px;
height: 190px;
width: 400px;
opacity:1;
background-color: #29332E;
}

JavaScript

(function() {

var sp = 'http://andrewray.me/assets/games/hippopotamatron/',
    animations = [],
    MOTION = {'Normal':1, 'Smooth':2},      // AS3 like motion types. Used for tweening
    INTERVAL = {'Tween':10, 'Animation':20};// Intervals in milliseconds for setTimeout calls. Defaults are Tween:10, Animation:1

$.fn.killWithFire = function() {
    var elem = this.get(0), me = this;
    this.css('overflow', 'hidden');
    var offset = {y:parseInt(elem.offsetTop), x:parseInt(elem.offsetLeft)};
    var height = parseInt(elem.clientHeight);
    var steps = Math.round(parseInt(elem.clientWidth) / 50);

    // Steps are how many explosion "lines" there are. Creates new line from right to left every 500 ms.
    for(var x=steps; x > 0; x--) {
        setTimeout((function(i){ return function(){
             explosion(((i*50)+offset.x)-128, offset.y+(height/2)-20, elem);
         }}(x)) , 450*(Math.abs(x-steps)));
    }

    setTimeout(function() {
        me.animate('opacity', 1, 0, 50, function() {
            me.remove();
            if(callback) {callback();}
        });
    }, 450*(steps+1));
    return this;
};
        
// Create an explosion at point x,y. Generations are how many "tails" the explosion creates before dying out completely. Each explosion has 2 tails in 
// the next generation, so it's exponential. Default generations is 3 ... 5 lags pretty badly ... 10 almost crashed my computer, but it was nice to look at.
function explosion(x, y, parent, generations) {
    var offset = {'x':parseInt(parent.offsetLeft), 'y':parseInt(parent.offsetTop)};
    var circle = $('<div></div>')
        .appendTo(parent)
        .css({'background':'transparent url('+sp+'circle_eat.png) top left no-repeat', 'position':'absolute',
        'top':(y - offset.y - 36)+'px', 'left':(x - offset.x - 36)+'px', 'width':'200px', 'height':'200px'});
    var ap = false;
    if(generations === undefined) {generations = 2;} // THE FASTER YOUR COMPUTER, THE HIGHER THIS CAN BE
   ...