gpt4 book ai didi

javascript - 基本旋转和平移 keydown 上的元素

转载 作者:行者123 更新时间:2023-11-28 03:51:31 26 4
gpt4 key购买 nike

我正在尝试了解如何向特定元素添加基本交互性。在这里,我希望用户能够按任意箭头键并看到元素相应地旋转和平移。我不确定为此使用 DOM 与 Canvas 之间的区别,但由于我知道如何使用 DOM,所以我在此处选择了该方法。我的问题是元素的移动不一致,我认为这是因为我不小心用我的函数覆盖了转换值。

这是下面的片段。除了 down 键之外,所有箭头键都在做一些事情。

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

我的问题是为什么对象会在屏幕上跳来跳去,我怎样才能避免覆盖转换以使其正常工作。想法?

最佳答案

您将转换用于不打算做的事情。元素总是从它的原始位置被转换。这就是为什么在你翻译它然后改变它的旋转之后,它会旋转一堆(这可能不是你期望发生的事情)。如果您考虑一下,它会以度为单位旋转,所以您将三 Angular 形从“中间”或它的起点移得越远,它移动的距离就越远。

我建议您为此使用 Canvas (有很棒的游戏库可以使它比您想象的更容易)。请记住,CSS 是为样式而不是交互而创建的。

关于javascript - 基本旋转和平移 keydown 上的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43699510/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com