# Um loop de jogo que permanece previsível em todas as telas

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

- URL: https://oneshotgems.ai/pt-BR/topics/browser-game-loop
- Categoria: Para desenvolvedores de jogos
- Tipo: Guia
- Atualizado: 5 de outubro de 2026

Um loop de jogo no navegador coordena simulação, desenho e entrada, mas não deve partir da suposição de que toda tela produz a mesma quantidade de quadros por segundo. Uma chamada de retorno pode ocorrer em diferentes taxas de atualização, ser pausada em uma aba oculta ou chegar atrasada quando a thread principal está ocupada. Baseie a simulação no tempo decorrido e deixe o navegador agendar a apresentação. Essa separação facilita entender o movimento e permite controlar o que acontece após uma interrupção prolongada.

## Separar as alterações de estado do desenho

Use requestAnimationFrame para a próxima atualização visual e passe o carimbo de data/hora para um pequeno coordenador do loop. Atualize posições, cronômetros e regras com base no tempo decorrido e, depois, desenhe o estado atual. O renderizador não deve decidir se houve uma colisão, e a verificação de colisão não deve depender de um sprite ter sido desenhado.

Para um teste de plataforma pequena, mova um marcador horizontalmente em um número escolhido de unidades mundiais por segundo. Execute a mesma rota em uma tela de 60 Hz e uma tela de alta atualização. Se o marcador percorrer uma distância maior no mesmo intervalo do relógio de parede em uma tela, algum movimento ainda estará sendo aplicado por retorno de chamada em vez de por unidade de tempo.

## Escolha uma política de recuperação para frames atrasados

Uma pausa longa pode produzir um intervalo decorrido enorme. Limite esse intervalo em um jogo casual em tempo real para que, ao voltar, o jogador não veja o personagem atravessar vários obstáculos por teleporte. Em simulações determinísticas, use uma etapa fixa de atualização com um acumulador, execute um número limitado de atualizações para recuperar o atraso e renderize entre estados da simulação se a interpolação for útil.

Registre o maior intervalo entre chamadas durante um percurso de obstáculos que possa ser repetido e examine o jogo depois de alternar para outra tela e voltar. Decida se o jogo deve pausar, recuperar parte do tempo ou retomar do último estado. Deixe essa escolha explícita em vez de permitir que um único quadro atrasado a determine.

## Perguntas

**Devo usar setInterval para desenhar?** Use requestAnimationFrame para trabalho visual porque ele é agendado próximo à repintura e geralmente é pausado para documentos ocultos. Um cronômetro ainda pode agendar tarefas não visuais, mas não deve ser tratado como um relógio de exibição.

**De onde vem o carimbo de data/hora do quadro?** O retorno de chamada requestAnimationFrame fornece um carimbo de data/hora de alta resolução. O MDN documenta seu tempo e comportamento único; use esse carimbo de data/hora para calcular o progresso em vez de contar retornos de chamada.

## Siga sua curiosidade

- [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.
- [Pausar um jogo quando sua guia estiver oculta](https://oneshotgems.ai/pt-BR/topics/pausing-background-games): 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.
- [Mantenha um HUD de jogo de navegador sincronizado](https://oneshotgems.ai/pt-BR/topics/synchronizing-game-hud): Mantenha a consistência da pontuação, das vidas e dos cronômetros tratando o estado do jogo como a fonte da verdade e renderizando os valores do HUD a partir de um caminho de atualização.

## Leitura complementar

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

---
Página canônica: https://oneshotgems.ai/pt-BR/topics/browser-game-loop