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