title: Javascript: Moving an Object with Arrow Keys
body: <p>Im making a simple Tetris game. So far I have a Tetris piece that rotates when the space bar is clicked.</p>
  
  <p>The next step for me is to move the objects left and right using the arrow keys. From looking at other <a href="https://stackoverflow.com/questions/21790295/move-an-image-with-the-arrow-keys-using-javascript">Stack Questions</a> I found that this was possible by changing the margins.</p>
  
  <pre><code>        var angle = 0;
          var obj = document.getElementById('image')
  
          document.onkeydown = checkKey;
  
          function checkKey(e) {
  
              e = e || window.event;
  
              if (e.keyCode == '32') {
                  rotate();
              }
              else if (e.keyCode == '37') {
                  moveLeft();
              }
              else if (e.keyCode == '39') {
                  moveRight();
              }
  
          }
          function rotate() {
              angle = angle + 90;
              console.log(angle)
              obj.className = "image" + angle;
              console.log(obj.className)
              if (angle == 360) {
                  angle = 0;
              }
          }
  
          function moveLeft() {
              obj.style.left = parseInt(obj.style.left) - 5 + 'px';
          }
  
          function moveRight() {
              obj.style.left = parseInt(obj.style.left) + 5 + 'px';
          }
  </code></pre>
  
  <p>For some reason this isn't working for me.</p>
  
  <p>I've also re-created my code in a <a href="https://jsfiddle.net/h8ox0g15/#update" rel="nofollow noreferrer">JSFiddle</a> using a banana instead of a Tetris piece.</p>