JavaScript/jQuery : rotate element on key press (tetris effect)

我想通过按空格键来旋转元素，就像俄罗斯方块效果一样。但到目前为止，我只能旋转一次，而且 position() 方法似乎不像使用键横向移动时那样工作。任何帮助或提示将不胜感激。这是我所拥有的:

$(document).ready(function() {
  $(document).on('keydown', function(e) {
    var keyCode = e.keyCode;
    var div = $("#div");
    e.preventDefault();

    if (keyCode === 37) div.css("left", (div.position().left - 1) + "px");
    if (keyCode === 39) div.css("left", (div.position().left + 1) + "px");
    if (keyCode === 32) div.css('transform','rotate(-90deg)');

});

最佳答案

您的旋转属性始终是 -90px 。我会有一个变量来跟踪从 0 开始的“旋转”。然后在每次空格键时减去 -90。请记住不要超过 360，而是重置回 0。

$(document).ready(function() {
  var rotation = 0;
  $(document).on('keydown', function(e) {
    var keyCode = e.keyCode;
    var div = $("#div");
    e.preventDefault();

    if (keyCode === 37) div.css("left", (div.position().left - 1) + "px");
    if (keyCode === 39) div.css("left", (div.position().left + 1) + "px");
    if (keyCode === 32) {
      rotation -= 90;
      if (rotation < -360)
        rotation = 0;

      div.css('transform','rotate('+rotation+'deg)');
    }
  });
});

#div {
  border: 1px solid #CCC;
  width: 100px;
  height: 50px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">test</div>

关于JavaScript/jQuery : rotate element on key press (tetris effect)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42793438/