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 sobre pausar la pestaña de fondo del juego del navegador
¿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.
Más información
¿Has visto algo desactualizado? Notificar una corrección