Solo estoy probando la funcionalidad básica del desplazador lateral usando js. Nunca he hecho nada como esto, así que no sé realmente lo que estoy haciendo, pero tengo problemas para encontrar algo en Internet que se parezca a lo que estoy experimentando. Aquí hay un enlace a la página de git con el juego https://fgvand94.github.io/side-scroller-test/ . No estoy usando lienzo ni nada. No sé si necesito hacerlo para que funcione como quiero. Solo estaba tratando de hacer que un bloque se moviera con entradas clave. Aquí está mi código JS
const block = document.querySelector('.block'); let right = false; let left = false; const move = (e) =>{ if (e.keyCode === 37) { left = true } if (e.keyCode === 39) { right = true; } blockmove(); } const move2 = () => { right = false; left = false; } let x = 0; const blockmove = () => { if (right) { x += .05; block.style.left = `${x}px`; } if (left) { x -= .05; block.style.left = `${x}px`; } requestAnimationFrame(blockmove) } document.addEventListener('keydown', move); document.addEventListener('keyup', move2); requestAnimationFrame(blockmove);Cuando me muevo, tarda aproximadamente un segundo en comenzar a moverse a la velocidad adecuada. La velocidad se mantiene constante después de aproximadamente un segundo, pero si te mueves hacia adelante y hacia atrás, la velocidad comienza a aumentar por alguna razón. No tengo ni idea de porqué.
Las propiedades CSS left y right generalmente las redondean los renderizadores del navegador, por lo que verá los cambios realizados en estas propiedades solo cuando haya cambiado un píxel redondeado completo.
Está incrementando su valor x en 0.05 , esto requerirá al menos 10 ocurrencias para llegar a 0.5 (~170ms @60FPS), y luego otras 20 ocurrencias (~240ms) para alcanzar el siguiente paso 1.5 .
Pero, su código inicia un nuevo ciclo cada vez que se presiona una nueva tecla, por lo que en la segunda pulsación de tecla, x se incrementará en 0.1 , en la tercera en 0.15 , etc. haciendo que todo funcione cada vez más rápido (hasta que come demasiados recursos y comienza a hacerlo más lento de nuevo). Recuerde que si mantiene presionada la tecla, se activarán nuevos eventos a intervalos regulares, lo que puede explicar el retraso de "1 segundo" que sintió.
Para superar esto, inicie un solo bucle requestAnimationFrame y defina a qué velocidad desea mover su objeto.
Además, si bien puede parecer un poco complicado para un primer ejercicio, debo señalar que requestAnimationFrame se ejecuta a la frecuencia de actualización de la pantalla, lo que significa que dos monitores diferentes harán que su animación se ejecute a diferentes velocidades.
Para esto, lo mejor que tenemos actualmente es usar un tiempo delta:
const block = document.querySelector('.block'); const speed = 50 / 1000; // 50px per second let right = false; let left = false; const move = (e) => { e.preventDefault(); if (e.keyCode === 37) { left = true } if (e.keyCode === 39) { right = true; } } const move2 = (e) => { e.preventDefault(); if (e.keyCode === 37) { left = false } if (e.keyCode === 39) { right = false; } } let lastTime = performance.now(); let x = 0; const blockmove = (time) => { // rAF passes a timestamp // representing the last v-sync event const delta = (time - lastTime) * speed; lastTime = time; if (right) { x += delta; block.style.left = `${x}px`; } if (left) { x -= delta; block.style.left = `${x}px`; } requestAnimationFrame(blockmove) } document.addEventListener('keydown', move); document.addEventListener('keyup', move2); // start the animation loop only once requestAnimationFrame(blockmove); body { display: flex; } .block { background: red; height: 200px; width: 200px; position: relative; } <div class="block"></div>