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;

//events
$(document).on("keydown",function(e){
    var key = parseInt(e.keyCode, 10);
    console.log(key)
    if(keysPressed.indexOf(key) == -1){
        keysPressed.push(key);
    }
    console.log(keysPressed);

});

//glob
var pollspeed = 30;
var keysPressed = [];

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

    
var game = setTimeout(function(){
    
    $.each(keysPressed, function(i,el){
        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            
        }
    });
    
    keysPressed = [];
    renderPos(pos);
    
    //recurse
    setTimeout(arguments.callee,pollspeed);
}, pollspeed);