JSFiddle - React, Tailwind, and code Playground

by tylerbrownhenry

HTML

<div class="battlefield">

    <div class="a"></div>


</div>

CSS

.battlefield{
width:100px;
height:100px;
border:1px solid black;    
position:relative;
}
.b{
    background-color:#333;
    height:10px;
    width:90px;
    left:0px;
    position:absolute;
}

.a{
    background-color:#888;
    height:10px;
    width:10px;
    position:fixed;
    transition: all .1s ease;
    left:0;
    top:0;
}

JavaScript

(function(){


var keysPress = [];

    var hero = {
        pos: {
            left: $('.a').offset().left,
            top: $('.a').offset().top 
        },
        select : $('.a')
    };
    
    
    
$(document.body).keyup(function (e) {
    keysPress[e.keyCode] = {move:false,momentum:0};
    console.log(keysPress,'gfdgdf');
});

$(document).keydown(function(e){
    
    if(typeof keysPress[e.keyCode] === 'undefined' || keysPress[e.keyCode].move == false ){
        keysPress[e.keyCode] = {move:true,momentum:0};
    };
    
   var keys = keysPress[e.keyCode]  
   keys.momentum++
    
    var pos = hero.select.offset();
    var key = e.keyCode;
    

    
    console.log(keys);
switch (key) {
    case 37:
        hero.select.css('left',hero.pos.left-keys.momentum);break;
    case 38:
        hero.select.css('top',hero.pos.top-keys.momentum);break;
    case 39:
        hero.select.css('left',hero.pos.left+keys.momentum);break;
    case 40:
        hero.select.css('top',hero.pos.top+keys.momentum);break;
}
    

});
   
})();