JSFiddle - React, Tailwind, and code Playground

by skram

HTML

<div id="hero">H</div>


<div id="log"></div>

CSS

div { border: 1px solid red; width: 20px; height: 20px; position: absolute; text-align: center; }

div#log { position: fixed: left: 0px; width: 200px; bottom: 0px; }

JavaScript

var keys = [];

$(document).keydown(function(e) {
 
    if (keys.push) {
        keys.push(e.which);
    }
     moveHero();
});

$(document).keyup(function(e) {
    var tmp = [];
    for (var i = 0; i < keys.length; i++) {
        if (keys[i] != e.which) tmp = keys[i];
    }

    keys = tmp;
});

function moveHero() {

    var moveProps = {};
    var moveTo = 0;


    for (var i = 0; i < keys.length; i++) {

        moveTo = keys[i];
        if (moveTo == "37") {
            moveProps['left'] = '-=30px';
        }

        if (moveTo == "39") {
            moveProps['left'] = '+=30px';
        }

        if (moveTo == "38") {
            moveProps['top'] = '-=30px';
        }

        if (moveTo == "40") {
            moveProps['top'] = '+=30px';
        }
    }

    $("#hero").stop(true).animate(moveProps);

    $('#log').html(moveProps['top'] + " " + moveProps['left']);
}