JSFiddle - React, Tailwind, and code Playground

by MashedPotatoes

HTML

<div class="window">
    <div class="bot-line"></div>
    <div class="square-wrapper move">
        <div class="square-inside"></div>
    </div>
    <div class="block" data-x="100" data-y="100" style="width: 100px; box-sizing: border-box; border: 2pt solid black; height: 4px;"></div>
    <div class="block" data-x="100" data-y="200" style="width: 100px; box-sizing: border-box; border: 2pt solid black; height: 4px;"></div>
</div>
<div class="log"></div>
<script>
    $('.block').each(function() {
        var x = $(this).data('x');
        var y = 50 + $(this).data('y');
        console.log();
        $(this).css({
            position: 'absolute',
            left: x,
            bottom: y + $(this).height(),
        });
    });
    var log = window.log;
    log.log('Right to go Right');
    log.log('Left to go Left');
    log.log('Space to go space');
    log.log('Going down after going up not implemented yet');
</script>

CSS

.bot-line {
	position: absolute;
	bottom: 50px;background black;
	border: 1pt solid black;
	width: inherit;
	box-sizing: border-box;
}
html, body {
	margin: 0;
	height: 100%;
}

.window {
	height: 100%;
	width: 80%;
}

.square-wrapper {
	position: absolute;
	bottom: 50px;
	height: 30px;
	width: 30px;
	border: 2pt solid black;
	left: 50px;
	background: #00c5ff;
}
.square-inside {
	position: relative;
	top: 3px;
	height: 20px;
	width: 20px;
	border: 2pt solid black;
	left: 3px;
	background: #8cff52;
}

.move {
	transition: left 30s linear;
}

.jumpup {

	/*transition: left 30s linear, bottom 200ms cubic-bezier(0.000, 0.000, 0.000, 0.440);*/

	transition-property: left, bottom;
	transition-duration: 30s, 200ms;
	transition-timing-function: linear, cubic-bezier(0.000, 0.000, 0.000, 0.440);
}

.jumpdown {
	/*transition: left 30s linear, bottom 200ms cubic-bezier(0.440, 0.000, 1.000, 1.000);*/
	transition-property: left, bottom;
	transition-duration: 30s, 200ms;
	transition-timing-function: linear, cubic-bezier(0.440, 0.000, 1.000, 1.000);
}

.log {
	height: 100%;
	width: 20%;
	position: absolute;
	box-sizing: border-box;
	right: 0;
	top: 0;
	border: 3pt ridge #909090;
	padding: 5px;
	overflow: auto;
}

JavaScript

/**
 * @author Samuel Li
 */

var PAUSE_TIME = 100;
var runningr = false;
var runningl = false;
var runningj = false;
/* 50 is the bottom, edit the 2nd number */
var min_bottom = setMinBottom(0);

var spp = 500 / 20;

var log = {
    'log': function (s) {
        $('.log').append(s + '<br>');
    }
};



/* Collision Thingy:
 * http://stackoverflow.com/questions/5419134/how-to-detect-if-two-divs-touch-with-jquery */

function collision($div1, $div2) {
    var x1 = $div1.offset().left;
    var y1 = $div1.offset().top;
    var h1 = $div1.outerHeight(true);
    var w1 = $div1.outerWidth(true);
    var b1 = y1 + h1;
    var r1 = x1 + w1;
    var x2 = $div2.offset().left;
    var y2 = $div2.offset().top;
    var h2 = $div2.outerHeight(true);
    var w2 = $div2.outerWidth(true);
    var b2 = y2 + h2;
    var r2 = x2 + w2;

    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
    return true;
}

function setMinBottom(integer) {
    return 50 + integer;
}

(function () {
    $.fn.keyone = function (keyCode, action, fn) {
        this.one(action, function (e) {
            if (e.keyCode == keyCode) {
                fn();
            }
        });
    };
})(jQuery);

window.setInterval(function () {
    if (collision($('.square-wrapper'), $('.block'))) {
        log.log(true);

        min_bottom = setMinBottom(100);
    }
}, 50);

$(document).on('keyup', function (e) {
    switch (e.keyCode) {
        case 39:
            runningr = false;
            $('.square-wrapper').css('left', $('.square-wrapper').css('left'));
            break;
        case 37:
            runningl = false;
            $('.square-wrapper').css('left', $('.square-wrapper').css('left'));
            break;
        case 32:
            break;
        default:
            runningr = false;
            runningl = false;
            runningj = false;
            break;
    }
});

$(document).on('keydown', function (e) {

    /* CSS Method */

    // log.log(e.keyCode + ' Pressed!');

   ...