JSFiddle - React, Tailwind, and code Playground

HTML

<div class="keyboard"></div>

CSS

.keyboard {
    background: red;
    position: absolute;
    width: 10px;
    height: 10px;
}

JavaScript

// Check if it's a function
function isFunction(functionToCheck) {
    var getType = {};
    return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
}

// Store the keys and callback for each
var keys = {};
var keycalls = {};

// Loop and call all the needed callbacks
function run_keys() {
    $.each(keys, function (index, value) {
        if (value == true) {
            console.log(keys);
            var fun = keycalls[index];
            if (isFunction(fun)) fun();
        }
    });
}
// Store a key
$(document).keydown(function (e) {
    keys[e.which] = true;
    run_keys();
});
// Delete a key
$(document).keyup(function (e) {
    delete keys[e.which];
    run_keys();
});
// Assign a callback to a key
keyboard = function (key, callback) {
    console.log(callback);
    keycalls[key.toUpperCase().charCodeAt()] = callback;
}
// Assign keys
// Assign w to up action
keyboard("w", function () {
    $(".keyboard").animate({
        'top': "-=5px"
    }, 0);
});
keyboard("a", function () {
    $(".keyboard").animate({
        'left': "-=5px"
    }, 0);
});
keyboard("s", function () {
    $(".keyboard").animate({
        'top': "+=5px"
    }, 0);
});
keyboard("d", function () {
    $(".keyboard").animate({
        'left': "+=5px"
    }, 0);
});