javascript - 在指定的 onkeydown 上将对象旋转 45 度

Question

我从事游戏项目已有一段时间，但在使用特定控件时遇到了障碍。我决定稍微改变一些机制来解决这个问题。我已经编写了一大段代码来让对象随鼠标移动而旋转，但现在我需要让我的对象在按键时旋转。

我想让它在按下右箭头键时顺时针旋转 45 度，在按下左箭头键时逆时针旋转 45 度。我已将输入键调用全部写好，我只需要将旧代码转换为新代码即可。

这是我现有的代码

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)";

这是我想要更改的代码，正如我在评论中所述，最后一行是其下方 3 种框样式的炒作 api，以帮助阅读此代码的任何人理解该行是什么。

Answer 1

我不确定炒作文档标记，但我为您整理了这些标记。您能否提取有意义的部分:关键代码以使其适用于您的项目？

window.addEventListener('keyup',function(e) {
  var keyCode = e.keyCode,
      dir = '',
      box = document.getElementById('box');
  if (keyCode == 39) {
    dir = 'left';
  } else if (keyCode == 37) {
    dir = 'right';
  }
  box.setAttribute('data-dir','');
  setTimeout(function() {
    box.setAttribute('data-dir',dir);
  })
})

#box {
  width: 100px;
  height: 100px;
  background: black;
  transform: rotate(0);
}

[data-dir="left"] {
  animation: left .5s forwards; 
}

[data-dir="right"] {
  animation: right .5s forwards; 
}

@keyframes left {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(90deg);
  }
}

@keyframes right {
  to {
    transform: rotate(-90deg);
  }
}

<div id="box"></div>