Question

我试图了解如何为特定元素添加基本交互性。在这里，我希望用户能够按任意箭头键并看到元素旋转并相应地翻译。我不确定使用DOM与Canvas之间的区别，但是我知道如何使用DOM我在这里选择了这个方法。我的问题是元素在它的运动中是不一致的，我认为它是因为我不小心用我的函数覆盖了变换值。

以下是以下代码段。除了down键之外，所有箭头键都做了一些事情。

＆＃13;

function rotate( e, n ) {  //get current rotation and add n to it
  var curTranslation = getTrans( e );
  
  e.style.transform = 
  'rotate( ' + n + 'deg ) translateY(' + curTranslation + 'px )';
}
function translate( e, n ) { //get current translation and add n to it
  var curRotation = getRot( e );  
  
  e.style.transform = 
  'rotate( ' + curRotation + 'deg ) translateY(' + n + 'px )';
}     
function checkKey( e ) { //fire when a key on the keyboard is pressed. 
  var d = document,
      triBx = d.getElementById( 'tri-bx' );
  
  if ( e.keyCode == '38' ) { //up
    countTrans = Math.abs( countTrans ) * -1.1;  
    translate( triBx, countTrans );
  }
  else if ( e.keyCode == '40' ) { //down
    body.innerHTML = 'down';
  }
  else if ( e.keyCode == '37' ) { //left
    countRot = Math.abs( countRot ) * -1.1;
    rotate( triBx, countRot );
  }
  else if ( e.keyCode == '39' ) { //right
    countRot = Math.abs( countRot ) * 1.1;
    rotate( triBx, countRot );
  }
}

function start() { //call first function
  var d = document,
      triBx = d.getElementById( 'tri-bx' );
  
  window.addEventListener( 'keydown', checkKey );
}

//prevent entire window from scrolling
window.addEventListener("keydown", function(e) { 
    // space and arrow keys
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);
start();

＆＃13;

html, 
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
.tri-bx {
  transform: rotate( 0 );
  transition: transform 1s;
}
.tri {
  width: 0; 
  height: 0; 
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-bottom: 1rem solid black;
  transform: scaleX( 0.5 );
}

＆＃13;

<div id="tri-bx" class="tri-bx">

  <div id="tri" class="tri"></div>

</div>

<p style="position:absolute; bottom: 0;">use arrow keys</p>

<script>
  var countRot = 1,   //keep track of how many times the keys are pressed for rotation
  countTrans = 1;     //Same for translation

  function getRot( e ) {  //get rotation angle of element
    var st = window.getComputedStyle( e, null ),
        tr = st.getPropertyValue( 'transform' ) || 'FAIL',
        values = tr.split( '(' )[ 1 ].split( ')' )[ 0 ].split( ',' ),
        a = values[ 0 ],
        b = values[ 1 ],
        c = values[ 2 ],
        d = values[ 3 ],
        scale = Math.sqrt( a * a + b * b ),
        sin = b / scale,
        angle = Math.round( Math.atan2( b, a ) * ( 180 / Math.PI ) );

    return angle;
  }
  
  function getTrans( e ) { //get translation value of element
  var st = window.getComputedStyle( e, null ),
      tr = st.getPropertyValue( 'transform' ) || 'FAIL',
      values = tr.split( '(' )[ 1 ].split( ')' )[ 0 ].split( ',' ),
      f = values[ 5 ];

  return f;
}
</script>

＆＃13;

我的问题是为什么对象跳过屏幕，我怎样才能避免覆盖转换以使其正常工作。想法？

Answer 1

您正在使用转换来执行不打算执行的操作。该元素始终从其原始位置进行转换。这就是为什么在翻译它然后改变它的旋转之后，它会旋转一堆（这可能不是你期望发生的那种）。如果你考虑它，它会以度数旋转，所以你从“中间”或从它开始的位置越远，它移动的距离就越远。

我建议您使用canvas（这里有很棒的游戏库，比你想象的要容易）。请记住，CSS是为样式而非交互而创建的。

基本旋转并在keydown上翻译元素

1 个答案: