Separar los cambios de estado del dibujo.
Usa requestAnimationFrame para la siguiente actualización visual y pasa su marca de tiempo a un pequeño coordinador del bucle. Actualiza las posiciones, los temporizadores y las reglas según el tiempo transcurrido; después, dibuja el estado actual. El renderizador no debe decidir si ocurrió una colisión, y la detección de colisiones no debe depender de si se llegó a dibujar un objeto.
En una prueba sencilla de plataformas, mueve un marcador horizontalmente a una velocidad determinada, expresada en unidades del mundo por segundo. Recorre la misma ruta en una pantalla de 60 Hz y en otra de alta frecuencia de actualización. Si el marcador recorre más distancia en el mismo intervalo de tiempo real en una pantalla, parte del movimiento todavía se aplica en cada callback en vez de calcularse por unidad de tiempo.
Elija una política de recuperación para fotogramas tardíos
Una pausa prolongada puede producir un intervalo de tiempo transcurrido enorme. Limita ese intervalo en un juego casual en tiempo real para que, al volver, el jugador no vea al personaje teletransportarse a través de varios obstáculos. En simulaciones deterministas, usa un paso de actualización fijo con un acumulador, ejecuta una cantidad limitada de actualizaciones para recuperar el tiempo y dibuja entre estados de simulación si la interpolación resulta útil.
Registra el intervalo más largo entre callbacks durante un recorrido de obstáculos que puedas repetir y luego revisa el juego después de cambiar de pestaña y volver. Decide si el juego debe pausarse, recuperar parte del tiempo o reanudarse desde el último estado. Haz explícita esa decisión, en lugar de dejar que la determine un único fotograma retrasado.
Preguntas sobre bucle de juego del navegador
¿Debo usar setInterval para dibujar?
Utilice requestAnimationFrame para el trabajo visual porque está programado cerca del repintado y normalmente se pausa para documentos ocultos. Un cronómetro aún puede programar tareas no visuales, pero no debe tratarse como un reloj de visualización.
¿De dónde viene la marca de tiempo del fotograma?
La devolución de llamada requestAnimationFrame proporciona una marca de tiempo de alta resolución. MDN documenta su sincronización y comportamiento de una sola vez; use esa marca de tiempo para calcular el progreso en lugar de contar las devoluciones de llamadas.
Más información
¿Has visto algo desactualizado? Notificar una corrección