# Un bucle de juego que se mantiene predecible en todas las pantallas.

> Estructura las actualizaciones de juegos de navegador y dibuja cuadros de animación sin vincular la velocidad de simulación a la frecuencia de actualización de la pantalla del jugador.

- URL: https://oneshotgems.ai/es/topics/browser-game-loop
- Categoría: Para desarrolladores de juegos
- Tipo: Guía
- Actualizado: 5 de octubre de 2026

Un bucle de juego en el navegador coordina la simulación, el dibujo y la entrada, pero no debe partir de la suposición de que cada pantalla produce la misma cantidad de fotogramas por segundo. Una devolución de llamada puede ejecutarse con distintas frecuencias de actualización, pausarse en una pestaña oculta o llegar tarde si el hilo principal está ocupado. Basa la simulación en el tiempo transcurrido y deja que el navegador programe la presentación. Esta separación facilita razonar sobre el movimiento y permite controlar qué ocurre tras una pausa prolongada.

## 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

**¿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.

## Sigue tu curiosidad

- [Usa delta time para evitar movimientos bruscos](https://oneshotgems.ai/es/topics/delta-time-in-games): Aplique el tiempo transcurrido al movimiento del juego, elija una política de recuperación segura y pruebe el movimiento con diferentes frecuencias de actualización y después de las paradas.
- [Pausar un juego cuando su pestaña está oculta](https://oneshotgems.ai/es/topics/pausing-background-games): Utilice los cambios de visibilidad de la página para elegir qué se pausa, qué se guarda y cómo se reanuda un juego de navegador sin saltos en el tiempo.
- [Mantenga sincronizado el HUD de un juego de navegador](https://oneshotgems.ai/es/topics/synchronizing-game-hud): Mantenga la puntuación, las vidas y los cronómetros consistentes al tratar el estado del juego como la fuente de la verdad y representando los valores del HUD desde una ruta de actualización.

## Más información

- [MDN: requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame)

---
Página canónica: https://oneshotgems.ai/es/topics/browser-game-loop