Estoy usando este código para mover un elemento según el evento keydown :
$("body").on("keydown", function(event) { var arrow_position = $(".down-arrow").position(); if(event.key == 's') { $(".down-arrow").css({"top": arrow_position.top - 10}); } if(event.key == 'w') { $(".down-arrow").css({"top": arrow_position.top + 10}); } if(event.key == 'a') { $(".down-arrow").css({"left": arrow_position.left - 10}); } if(event.key == 'd') { $(".down-arrow").css({"left": arrow_position.left + 10}); } }); body { font-family: var(--font-family); font-size: 4rem; overflow: hidden; position: relative; /* width: 1920px; */ /* height: 1080px; */ } .down-arrow { left: 58%; position: absolute; bottom: 5%; border: 1px solid red; height: 50px; width: 50px; transform: rotate(170deg); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="down-arrow"> </div>El elemento está directamente dentro del cuerpo.
Sin embargo, el elemento solo se mueve hacia la izquierda cuando presiono a o d . Del mismo modo, solo se mueve hacia arriba cuando presiono s o w . También se mueve en incrementos de 20 en lugar de 10. ¿Qué estoy haciendo mal?
Gracias.