    <!DOCTYPE html>
    <html>
    <head>
  <style>
      #keys {
          position: absolute;
          left:10px;
          top:10px;
          height: 200px;
          width:200px;
          border:1px solid #ff0000;
        
              
      }        
        
        
</style>



    </head>
    <body onkeydown="showKey(event)">
        <div id="keys">
        
        </div>

        
    <script>
        document.getElementById("keys").style.left = 10 + "px";
        document.getElementById("keys").style.top = 10 + "px";
 
        var rightpos = 10;
        var toppos = 10
function showKey(e){
    console.log(e);
    //enter is 13
    //down is 40
    //left 37
    //up is 38
    if (e.keyCode == 39){
        rightpos += 15
        document.getElementById("keys").style.left = rightpos + 'px';
     }
     
    if (e.keyCode == 40){
        toppos += 15
        document.getElementById("keys").style.top= toppos + 'px';
     }
    
      if (e.keyCode == 37){
        rightpos -= 15
        document.getElementById("keys").style.left= rightpos + 'px';
     }
    
   // console.log( document.getElementById("keys").style.left );
    //document.getElementById("keys").style.left += 15;
    
    
}
    </script>    
        
        </body>
    </html>


    