JSFiddle - React, Tailwind, and code Playground

by qustosh

JavaScript

//POLLING TIMERS 30ms //IMPLEMENT KEYUP!!!!!
$ = jQuery;
//dom
$body = $("body");
$move = $("<div>9</div>").css({
        position:"absolute",
        width:"20px",
        height:"20px",
        color:"white",
        textAlign:"center",
        fontSize:"14px",
        fontWeight:"bold",
        backgroundColor:"black",
        borderRadius:"10px",
        left:"100px",
        top:"100px"
}).appendTo($body);

var pos = {l:100,t:100}
var delta = 2;

//functions
function renderPos(newPos){
    $move.css({
        top:newPos.t + "px",
        left:newPos.l + "px"
    })
}

//events
$(document).on("keydown",function(e){
    var el = parseInt(e.keyCode, 10);
    if(el == 65){//left
            pos.l -= 2           
        }else if(el == 87){//top
            pos.t -= 2
        }else if(el == 68){//right
            pos.l += 2            
        }else if(el == 83){//down
            pos.t += 2            
        }
    renderPos();
});

$(document).on("keyup",function(e){
     var el = parseInt(e.keyCode, 10);
    if(el == 65){//left
            pos.l -= 2           
        }else if(el == 87){//top
            pos.t -= 2
        }else if(el == 68){//right
            pos.l += 2            
        }else if(el == 83){//down
            pos.t += 2            
        }
        renderPos();
})