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 sobre pausar guia de plano de fundo do jogo do navegador
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.
Leitura complementar
Viu alguma informação desatualizada? Informar uma correção