# Trata las pestañas ocultas como un estado del juego

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

- URL: https://oneshotgems.ai/es/topics/pausing-background-games
- Categoría: Para desarrolladores de juegos
- Tipo: Guía
- Actualizado: 5 de octubre de 2026

Mientras un juego de navegador está en marcha, el jugador puede cambiar de pestaña, minimizar la ventana o bloquear el dispositivo. Los navegadores suelen pausar las llamadas de animación en documentos ocultos y reducir la frecuencia de los temporizadores, así que el bucle de actualización no puede confiar en recibir cada tic programado. Modela la visibilidad como una transición de estado explícita. Así podrás definir qué ocurre con los temporizadores, la entrada, el sonido y el progreso guardado, en vez de intentar reconstruir un tiempo de simulación incierto cuando vuelva el jugador.

## Definir qué cambia al cambiar la visibilidad

En un juego de reflejos, pausa la partida cuando document.visibilityState cambie a hidden, detén la cuenta regresiva, borra el estado de las teclas mantenidas y muestra un control para reanudar cuando la página vuelva a estar visible. En un puzle por turnos, puedes conservar el tablero sin mostrar una pantalla de pausa y, aun así, silenciar el audio y reiniciar el reloj de animación.

Escriba el comportamiento esperado de un cronómetro, un peligro en movimiento y una tecla presionada antes de la implementación. Luego cambie durante cada caso y regrese. Esta pequeña matriz detecta errores como que una tecla permanezca presionada lógicamente o que un temporizador expire mientras el juego no estaba visible.

## Reiniciar el reloj antes de reanudar

Escucha el evento visibilitychange y separa la decisión de pausar del proceso de dibujo. Al volver, establece la marca de tiempo del fotograma anterior en la marca de tiempo de animación actual, o indica que el primer fotograma reanudado debe reiniciar el reloj. De lo contrario, el siguiente delta puede abarcar todo el tiempo que la pestaña estuvo oculta y mover los objetos de golpe.

Usa la Page Visibility API en lugar de depender solo de los eventos de pérdida y recuperación del foco: una ventana puede perder el foco sin quedar oculta, mientras que la visibilidad indica si el documento está realmente oculto. Mantén independiente cualquier política de guardado automático; pausar y guardar tienen propósitos distintos y deben probarse por separado.

## Preguntas

**¿Seguirá ejecutándose requestAnimationFrame en una pestaña oculta?** La mayoría de los navegadores pausan las devoluciones de llamadas de animación en pestañas en segundo plano o iframes ocultos, y las devoluciones de llamadas del temporizador también pueden limitarse. Trate esos comportamientos como razones para manejar la visibilidad en lugar de como un reloj preciso.

**¿Todos los juegos deberían pausarse cuando están ocultos?** Ninguna política se adapta a todos los diseños. Pausa juegos donde una simulación invisible cambia el desafío; Para el juego por turnos, conservar el tablero actual puede ser suficiente. En cualquier caso, restablezca deliberadamente la sincronización y el audio al regresar.

## Sigue tu curiosidad

- [Cree un bucle de juego de navegador confiable](https://oneshotgems.ai/es/topics/browser-game-loop): 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.
- [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.

## Más información

- [MDN: API de visibilidad de página](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API)

---
Página canónica: https://oneshotgems.ai/es/topics/pausing-background-games