title: Rotating an object 45 degrees on specified onkeydown
body: <p>I have been working on a game project for a while and have hit a snag with a particular control. I have decided to change some of the mechanics a bit to deal with this. I had written a chunk of code to make an object rotate with my mouse movement but now I need to make my object rotate on keypress.</p>
  
  <p>I want to make it rotate 45 degrees clockwise when I press the right arrow key, and 45 degrees counter clockwise on left arrow key press. I have the input key call all written up I just need to translate my old code to the new code.</p>
  
  <p>This is my existing code</p>
  
  <pre><code>window.onmouseclick = function(event) {
  var box = hypeDocument.getElementById('bolt')
  cx = event.pageX; // Mouse X
  cy = event.pageY; // Mouse Y
  bx = parseInt(hypeDocument.getElementById('group').style.left);
  by = parseInt(hypeDocument.getElementById('group').style.top);
  tx = hypeDocument.getElementProperty(box, 'left') + 
  (hypeDocument.getElementProperty(box, 'width')/2) + bx;
  ty = hypeDocument.getElementProperty(box, 'top') + 
  (hypeDocument.getElementProperty(box, 'height')/2) + by;
  
  
  angle = Math.atan2((cy-ty),(cx-tx)) * (180/Math.PI) ; // AHHHH MATH!
  hypeDocument.setElementProperty(box, 'rotateZ', angle)
  }
  
  
  hypeDocument.setElementProperty(box, 'rotateZ', angle) // hype api code for
  
  box.style.webkitTransform = "rotate(" + angle + "deg)";
  box.style.mozTransform = "rotate(" + angle + "deg)";
  box.style.transform = "rotate(" + angle + "deg)";
  </code></pre>
  
  <p>This is the code I want to change, as I state in the comment the last line is hype api for the 3 box styles below it to help anybody who reads this understand what that line is.</p>