Question

我想通过按空格键来旋转元素，就像俄罗斯方块效果一样。但到目前为止，我只能旋转一次，而且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)');

});

Answer 1

您的轮播属性始终为-90px。我会有一个变量来跟踪＆＃39;旋转＆＃39;从0开始。然后按每个空格减去-90。请记住，不要超过360，而是重置为0。

＆＃13;

$(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)');
    }
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

JavaScript / jQuery：按键上的旋转元素（俄罗斯方块效果）

1 个答案: