JavaScript/jQuery: rotieren Element beim Drücken der Taste (Tetris-Effekt)

Question

Ich möchte ein Element durch Drücken der Leertaste, wie ein Tetris-Effekt zu drehen. Aber bis jetzt kann ich es nur einmal drehen, und die Methode position() scheint nicht so zu funktionieren, wie wenn man Tasten verwendet, um sich seitwärts zu bewegen. Jede Hilfe oder ein Hinweis wäre willkommen. Hier ist, was ich habe:

$(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

Ihre Eigenschaft drehen ist immer -90px. Ich würde eine Variable haben, die die 'Rotation' verfolgt, die bei 0 beginnt. Dann subtrahiere ich -90 bei jedem Leerzeichen. Denken Sie daran, gehen nicht über 360, sondern zurückgesetzt auf 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>