JSFiddle - React, Tailwind, and code Playground

by nathan

HTML

<div id="foo"></div>

CSS

#foo {
    width: 20px;
    height : 20px;
    position : absolute;
    top : 100px;
    left : 100px;
    background-color: blue;
}

JavaScript

$.fn.smoothCursor = function (options) {
    function isCursorKey(e) {
        return (e.which < 41 && e.which > 36);
    }
    function createCursorkeyEvent (size, axis, positiveDirection) {
        var event = $.Event('cursorkey');
        event.cursorX = 0;
        event.cursorY = 0;
        event.magnitude = size;
        event['cursor' + axis.toUpperCase()] = (positiveDirection * 2 - 1) * size;
        return event;
    }
    var keys = {
        37 : 'left',
        38 : 'up',
        39 : 'right',
        40 : 'down'
    };
    return this.each(function (index, element) {
        var pressed = {
                37 : false,
                38 : false,
                39 : false,
                40 : false
            },
            sizes = {
                x : options.initialJump,
                y : options.initialJump
            };
        $(element).on('keydown', function (e) {
            var axis = 'y';
            if (!isCursorKey(e)) {
                return;
            }
            pressed[e.which] = true;
            if (e.which % 2) {
                axis = 'x';
            }
            sizes[axis] *= options.jumpScale;
            event = createCursorkeyEvent(sizes[axis], axis, e.which > 38);
            $(element).trigger(event);
        });
        $(element).on('keyup', function (e) {
            var axis = 'y';
            if (pressed[e.which]) {
                pressed[e.which] = false;
            } else {
                return;
            }
            if (e.which % 2) {
                axis = 'x';
            }
            (function decay() {
                if (sizes[axis] < options.decayUntil) {
                    sizes[axis] = options.initialJump;
                    return;
                }
                sizes[axis] /= options.decay;
                createCursorkeyEvent(sizes[axis], axis, axis > 38);
                window.setTimeout(decay, options.repeatTime);
            }());
        });
    });
};

var el =...