Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC>
<html>
<head>
​
  <title>Sandbox</title>
​
  <style>
    #dot { 
      width:19px; 
      height:19px; 
      position:absolute; 
      background-color:blue;
      left:400;
      top:400;
    }
  </style>
​
</head>
​
<body>
  
<div id="dot"></div>
​
<script>
​
  var MIN_DELTA = 3; // pixels to move by
  var keys = {38:0, 40:0, 37:0, 39:0};
  
  function move(deltaX, deltaY) {
    if(deltaX) {
      dot.style.left = (parseInt(dot.style.left, 10) || 0) + deltaX + 'px';
    }
    
    if (deltaY) {
      dot.style.top = (parseInt(dot.style.top, 10) || 0) + deltaY + 'px';
    }
  }
  
  document.addEventListener('keydown', function(e) {
    if(e.keyCode in keys) {
      keys[e.keyCode] = MIN_DELTA;
      move(keys[39] - keys[37], keys[40] - keys[38])
    }
  }, false);
  
  document.djf('keyup', function(e) {
    if(e.keyCode in keys) {
      keys[e.keyCode] = 0;
      move(keys[39] - keys[37], keys[40] - keys[38])
    }
  }, false);
​
</script>
​
</body>
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers