# Trate as guias ocultas como um estado do jogo

> Use as alterações de visibilidade da página para escolher o que é pausado, o que é salvo e como um jogo de navegador é retomado sem salto no tempo.

- URL: https://oneshotgems.ai/pt-BR/topics/pausing-background-games
- Categoria: Para desenvolvedores de jogos
- Tipo: Guia
- Atualizado: 5 de outubro de 2026

Enquanto um jogo de navegador está em execução, o jogador pode trocar de aba, minimizar uma janela ou bloquear o dispositivo. Os navegadores costumam pausar callbacks de animação em documentos ocultos e reduzir a frequência dos temporizadores, então o loop de atualização não pode depender de receber cada tick agendado. Modele a visibilidade como uma transição de estado explícita. Assim, você define o que acontece com temporizadores, entrada, som e progresso salvo, em vez de tentar reconstruir um intervalo incerto de simulação quando o jogador voltar.

## Defina o que muda com a visibilidade

Em um jogo de reflexos, pause a partida quando document.visibilityState mudar para hidden, congele a contagem regressiva, limpe o estado das teclas mantidas e mostre um botão para retomar quando a página voltar a ficar visível. Um quebra-cabeça por turnos pode manter o tabuleiro sem exibir uma tela de pausa e, ainda assim, silenciar o áudio e zerar o relógio de animação.

Anote o comportamento esperado para um cronômetro, um perigo em movimento e uma tecla pressionada antes da implementação. Em seguida, afaste-se durante cada caso e retorne. Esta pequena matriz detecta bugs, como uma tecla mantida logicamente pressionada ou um cronômetro expirando enquanto o jogo não estava visível.

## Reinicie a contagem do tempo antes de retomar

Escute o evento visibilitychange e separe a decisão de pausar da renderização. Ao voltar, defina o timestamp do quadro anterior como o timestamp atual da animação ou marque o primeiro quadro retomado como uma reinicialização do relógio. Caso contrário, o próximo delta poderá incluir todo o período em que a aba ficou oculta e mover os objetos de forma brusca.

Use a API de visibilidade de página em vez de depender apenas de desfoque e foco: uma janela pode perder o foco enquanto permanece visível, e a visibilidade indica se o documento está realmente oculto. Mantenha qualquer política de salvamento automático independente; o comportamento de pausa e a persistência têm finalidades diferentes e devem ser testados separadamente.

## Perguntas

**O requestAnimationFrame continuará sendo executado em uma guia oculta?** A maioria dos navegadores pausa os retornos de chamada de animação em guias de fundo ou iframes ocultos, e os retornos de chamada do temporizador também podem ser limitados. Trate esses comportamentos como razões para lidar com a visibilidade, e não como um relógio preciso.

**Todo jogo deve pausar quando estiver oculto?** Nenhuma política se adapta a todos os projetos. Pause jogos onde a simulação invisível muda o desafio; para jogos por turnos, preservar o tabuleiro atual pode ser suficiente. Em ambos os casos, redefina o tempo e o áudio deliberadamente no retorno.

## Siga sua curiosidade

- [Crie um loop de jogo de navegador confiável](https://oneshotgems.ai/pt-BR/topics/browser-game-loop): Estruture atualizações de jogos do navegador e desenhe em torno de quadros de animação sem vincular a velocidade da simulação à taxa de atualização da tela do jogador.
- [Use delta time sem movimentos bruscos](https://oneshotgems.ai/pt-BR/topics/delta-time-in-games): Aplique o tempo decorrido ao movimento do jogo, escolha uma política de recuperação segura e teste o movimento em diferentes taxas de atualização e após paralisações.

## Leitura complementar

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

---
Página canônica: https://oneshotgems.ai/pt-BR/topics/pausing-background-games