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>

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

1 个答案: