Como um protetor de tela Bouncing Calcula Collisions

Um protetor de tela de salto convincente é um pequeno problema de física. O
objeto deve viajar a uma velocidade consistente, tocar os limites visíveis de
forma limpa, preservar o excesso de movimento após uma colisão, adaptar-se ao
redimensionamento e contar um canto apenas quando as paredes horizontais e
verticais são alcançadas juntas. O movimento de digitação para “pixels por
quadro” falha assim que a taxa de atualização ou a carga de trabalho do
navegador muda.

Estado mínimo

Para um objeto retangular, posição da loja (x, y), velocidade
(vx, vy), largura e altura do objeto e largura e altura da porta
de visualização. Se o canto superior esquerdo representa a posição, os limites
válidos são:

0 ≤ x ≤ viewportWidth  - objectWidth
0 ≤ y ≤ viewportHeight - objectHeight

O emblema deve colidir por sua caixa visível, não por um único ponto central.
A mudança do tamanho do emblema altera os valores máximos de x e y.

Use o tempo decorrido, não uma taxa de quadros assumida

O navegador fornece um carimbo de data e hora de alta resolução para um
requestAnimationFrame
Subtraia o carimbo de data e hora anterior para obter milissegundos decorridos
e converta-o em segundos:

dt = min((now - previous) / 1000, maximumStep)
x  = x + vx * dt
y  = y + vy * dt

A velocidade é expressa em pixels por segundo. Um display de 60 Hz e um
display de 144 Hz cobrem aproximadamente a mesma distância ao longo do mesmo
tempo real. Braçadeira dt A página também cancela seu próprio
loop quando escondido, em vez de depender apenas do estrangulamento do
navegador.

Refletir sobre uma parede

Um conjunto de implementação simples x até o limite e nega
vx. Isso descarta a distância percorrida além da parede e torna o
movimento ligeiramente desigual. Refletindo o overshoot preserva-o:

if (x < 0) {
  x = -x
  vx = abs(vx)
}
if (x > maxX) {
  x = maxX - (x - maxX)
  vx = -abs(vx)
}

Aplicar a lógica equivalente verticalmente. Com uma etapa de tempo máximo
sensível, uma reflexão por eixo é normalmente suficiente. Um motor mais geral
pode loop enquanto uma ultrapassagem muito grande permanece fora dos limites.

O que conta como um hit de canto?

Durante uma etapa de simulação, registre booleanos separados para uma colisão
horizontal e colisão vertical. Incremente o contador de canto apenas quando
ambos se tornarem verdadeiros nessa mesma etapa. Não teste a igualdade de
ponto flutuante, como x === 0 && y === 0; a etapa de
reflexão já sabe que ocorreu uma travessia.

A probabilidade de um hit de canto depende da posição inicial, razão de
velocidade e dimensões. Um caminho discreto perfeitamente repetitivo pode
perder cantos indefinidamente. O tamanho do objeto de redimensionamento ou
alteração altera o caminho, portanto, um contador deve redefinir ou preservar
claramente sua semântica.

Detalhes que fazem a implementação sentir polida

• No redimensionamento, a posição de aperto nos novos limites sem
  teletransportar para um ponto aleatório não relacionado.
• Alterar a cor da colisão apenas em um evento de parede real, não
  continuamente da posição x / y.
• Mantenha a proporção de aspecto de imagem personalizada e rejeite arquivos
  além dos limites documentados de tipo e tamanho.
• Mantenha visíveis Pausa e Redefinir controles previsíveis, e deixe escapar
  sair em tela cheia.
• Respeite o movimento reduzido e pare de renderizar em uma guia oculta.
• relação de pixel do dispositivo cap para Canvas um telefone de alta
  densidade não aloca uma superfície excessiva.

Tente o comportamento em
Bouncing DVD Screensaver. Sua
marca padrão permanece nítida enquanto imagens locais personalizadas nunca
saem do dispositivo.

Referências técnicas

• MDN: requestAnimationFrame
• MDN: API de tela cheia
• MDN: Tela Wake Lock API API

Escolher um vetor de velocidade

Um controle deslizante de velocidade normalmente representa magnitude,
enquanto a direção vem de um vetor normalizado. Para um ângulo
θ e velocidade s:

vx = cos(θ) * s
vy = sin(θ) * s

Uma direção que é exatamente horizontal ou vertical nunca explora a superfície
completa, então o ângulo inicial deve evitar valores muito próximos de
múltiplos de 90 graus. A velocidade aleatória x e y independentemente também
pode produzir um caminho quase plano se um componente for pequeno. Gere um
ângulo de um intervalo permitido e, em seguida, derivem ambos os componentes.

A relação entre a velocidade horizontal e vertical influencia se o caminho se
repete. Na geometria contínua ideal, um canto ocorre quando os tempos de
viagem para um limite x e um limite y coincidem. Dimensões finitas e etapas de
ponto flutuante tornam a igualdade de posição exata não confiável, razão pela
qual eventos de colisão, não coordenam a igualdade, dirigem o contador.

Lidar com grandes etapas de tempo e múltiplas reflexões

O tempo decorrido de fixação protege a animação comum, mas um motor
reutilizável também pode lidar com um objeto que atravessa mais de uma parede
durante uma grande etapa. Depois de mover-se, reflita repetidamente qualquer
coordenada fora de alcance até que esteja dentro dos limites. O loop precisa
de um limite de iteração rigoroso no caso de estado mal formado criar um
alcance impossível.

function reflect(position, velocity, maximum) {
  let hits = 0
  while ((position < 0 || position > maximum) && hits < 8) {
    if (position < 0) {
      position = -position
      velocity = Math.abs(velocity)
    } else {
      position = maximum - (position - maximum)
      velocity = -Math.abs(velocity)
    }
    hits++
  }
  return { position: clamp(position, 0, maximum), velocity, hits }
}

A tela de produção usa uma etapa de tempo máximo conservadora e pausa quando
escondida, então os saltos multi-paredes são excepcionais. O manuseio
defensivo ainda torna a reinicialização, as pausas do depurador e o
agendamento incomum do navegador mais seguro.

Eventos de Colision mais poder do que direção

Uma vez que o motor relata hits horizontais e verticais, o renderizador pode
mudar a cor do distintivo, incrementar colisões totais, reproduzir um som
ativado pelo usuário opcional ou atualizar a contagem de cantos. Esses efeitos
colaterais devem ocorrer uma vez por evento. A derivação da cor continuamente
da posição cria um efeito de movimento do arco-íris e não comunica mais a
colisão.

O som permanece desligado por padrão e requer uma interação porque as
restrições de reprodução automática do navegador e a matéria de conforto do
usuário. Colisão rápida em velocidade muito alta deve ser limitada a taxa,
para que os anúncios de som e status não se tornem esmagadores.

As trilhas exigem um modelo de limpeza deliberada

Um quadro nítido limpa todo o Canvas Uma trilha cobre o quadro anterior com um
fundo translúcido antes de desenhar o próximo emblema. O alfa inferior
preserva marcas por mais tempo. Porque o comprimento percebido da trilha
também depende da velocidade e da taxa de quadros, defina-o de uma maneira que
permaneça visualmente estável e desative-o sob movimento reduzido se o efeito
for perturbador.

Na animação baseada em DOM, uma trilha pode ser um conjunto limitado de
elementos desvanecimento. Não adicione um novo nó para sempre; isso vaza
memória e, eventualmente, prejudica o desempenho da interação.

Texto e imagens personalizados alteram limites de colisão

A largura do texto depende da fonte, conteúdo, peso e renderização do
dispositivo. Meça depois que a fonte estiver disponível, adicione
preenchimento intencional e recalcule o máximo x / y. Limite o comprimento do
texto para que não possa se tornar mais amplo do que a janela de visualização.
Se o emblema for maior do que uma dimensão, dimensione-o ou centralize-o em
vez de permitir limites negativos.

Uma imagem local deve ser decodificada antes que suas dimensões intrínsecas
sejam confiáveis. ScreenOrbit aceita apenas PNG, JPEG, e WebP dentro de 5 MB e
4096 pixels por lado, verifica as dimensões decodificados, preserva a
proporção de aspecto, e libera o URL objeto temporário. Ele rejeita SVG e HTML
Em vez de tentar higienizar conteúdo local ativo ou inesperadamente complexo.

Redimenu sem perder o objeto

Quando a porta de visualização mudar, calcule novos limites e preserve a
localização relativa sempre que possível:

ratioX = oldMaxX > 0 ? x / oldMaxX : 0.5
ratioY = oldMaxY > 0 ? y / oldMaxY : 0.5
x = clamp(ratioX * newMaxX, 0, newMaxX)
y = clamp(ratioY * newMaxY, 0, newMaxY)

Isso é mais suave do que selecionar uma posição aleatória após cada mudança de
barra de endereço móvel ou evento de orientação. Um redimensionamento não é
uma colisão e não deve aumentar contadores ou mudar de cor.

Canvas pixels e CSS geometria

CSS As dimensões definem limites de movimento. O Canvas buffer de apoio pode
ser maior para uma tela de alta densidade: multiplicar por uma relação de
pixel do dispositivo limitado e dimensionar o contexto de desenho para que as
coordenadas permaneçam em CSS Sem a escala, a física e a renderização usam
unidades diferentes; sem a tampa, um telefone 4 pode alocar dezesseis vezes a
área de pixels.

Para uma imagem ou objeto de texto que pode ser representado como HTML,
animação DOM baseada em transformação também é possível. Canvas A composição
previsível da cena e ainda exportam, enquanto o DOM pode oferecer semântica
mais simples. A escolha não altera a necessidade de movimento em tempo
decorrido e limpeza do ciclo de vida.

Pausa, visibilidade e ciclo de vida em tela cheia

Manter um identificador de loop de animação. Começar enquanto já estiver em
execução não deve agendar um segundo loop. Pausa cancela o retorno de chamada
pendente e registra o estado; currículo estabelece um novo carimbo de data e
hora anterior para que a duração oculta não seja tratada como movimento. O
manipulador de visibilidade segue a mesma regra.

A tela cheia é um estado de apresentação, não um requisito de animação. Um
pedido de tela cheia rejeitado ou não suportado deve deixar a visualização
embutida funcionando. Na saída, recalcular os limites após a janela de
visualização se instalar. Wake Lock é solicitado separadamente e liberado
quando a página está escondida; falha nunca bloqueia a animação.

Teste o motor, não apenas uma corrida atraente

• Acertos diretos nas paredes esquerda, direita, superior e inferior
• Colisão x/y simultânea e incremento de um canto
• impactos próximos que ocorrem em passos adjacentes e não contam
• Sobretire a reflexão preservando a distância e sinal
• Sequências de 60, 120 e 144 Hz que produzem viagens iguais em tempo igual
• Um longo intervalo pausado seguido de currículo sem teletransporte
• Redimensível para menor que a posição atual e para menor que o objeto
  escolhido
• Rejeição de imagem local por tipo, tamanho de byte, dimensões decodificadas
  e decodificação falhada
• Repetidos ciclos de reinicialização/início com um retorno de chamada ativo e
  sem URL de objeto retido
• Redução de movimento, pausa no teclado, negação em tela cheia e
  comportamento de guia oculta

Os testes automatizados cobrem as transições aritméticas e de estado;
Playwright cobre o ciclo de vida do navegador e geometria responsiva. Uma
corrida de estabilidade manual de trinta minutos verifica que Canvas O
tamanho, a memória e a contagem de loops permanecem estáveis.

Acessibilidade além do movimento reduzido

Pausa, Redesetar e Tela cheia precisam de foco visível no teclado e rótulos de
texto na visualização normal da página. A contagem de colisões não deve ser
anunciada em cada batida para um leitor de tela; isso criaria conversas
inutilizáveis. Anúncios de status são reservados para mudanças significativas
de controle. Os alvos de toque permanecem pelo menos 44 por 44 CSS A
visualização incorporada não rouba a operação do teclado dos controles
circundantes.

Por que um canto pode demorar tanto

Em um retângulo perfeitamente determinístico, posição e velocidade podem
produzir uma órbita de repetição. Dependendo da proporção de largura de viagem
efetiva para componentes de altura e velocidade, essa órbita pode encontrar um
canto rapidamente, apenas depois de muitos saltos, ou não em tudo dentro do
tempo prático. Arredondamento de pixels, redimensionamento, mudando o tamanho
do emblema e ajustes de velocidade alteram o caminho.

A raridade faz parte do apelo. O contador é um registro de evento honesto, não
um temporizador projetado para fabricar um canto. A redefinição torna o estado
inicial conhecido; não promete um hit.

Use esta página para uma tarefa clara

Explique o tempo de tempo do quadro, colisão de parede, redimensionamento e
regras de canto por trás da cena saltitante. Os desenvolvedores da Web,
estudantes, streamers e usuários curiosos usam este guia para verificar o
comportamento de animação visível. Anote o resultado que você precisa antes
de seguir um link ou alterar uma configuração. Um objetivo estreito
economiza tempo e mantém a decisão final ligada a evidências.

Leia a página completa uma vez antes de agir quando a tarefa envolve um
teste de exibição, etapa de limpeza, simulação, direito de arquivo, pedido
de privacidade ou relatório de suporte. Em seguida, retorne à seção exata
necessária para o trabalho. Mantenha os limites declarados visíveis enquanto
você decide o próximo passo. Esta rota se concentra em: Explicar o tempo do
quadro, colisão de parede, redimensionamento e regras de canto por trás da
cena saltitante.

Prepare um ponto de partida estável

Escolha uma janela fixa, tamanho do crachá, velocidade e ponto de partida
antes de comparar corridas. Grave o estado inicial antes de alterar um
controle, mover um dispositivo, enviar um formulário ou confiar em uma
declaração de política. Use o material de origem atual e a versão atual da
página para qualquer revisão formal.

Mantenha um problema por sessão ou mensagem. Separe um sintoma visual de uma
reivindicação de hardware. Separe uma simulação do navegador de um evento do
sistema. Separe um arquivo gerado de material de terceiros colocado dentro
do arquivo. Esses limites tornam as evidências mais fáceis de avaliar. O
risco principal de rota é: O movimento de contagem de quadros corre em
velocidades diferentes em monitores de 60 Hz e 120 Hz.

Siga um processo prático de quatro partes

1. Defina o objetivo. Explique o tempo de enquadramento,
   colisão de parede, redimensionamento e regras de impacto por trás da cena
   de salto. Pare se a tarefa mudar para um problema diferente.
2. Capture a linha de base. Tamanho da viewport de registro,
   proporção de pixel do dispositivo, tempo decorrido, posição, velocidade,
   contagem de colisões e redimensionamento de evento. Use valores e nomes
   exatos onde eles existem.
3. Verifique o risco principal. O movimento de contagem de
   quadros é executado em velocidades diferentes em monitores de 60 Hz e 120
   Hz. Corrija a configuração antes de repetir o passo.
4. Escolha a próxima ação. Abra o DVD Screensaver, mude um
   controle e compare o contador ao vivo com as fórmulas no guia. Mantenha o
   registro original para comparação.

Evidência que outra pessoa entende

Tamanho da viewport de registro, proporção de pixel do dispositivo, tempo
decorrido, posição, velocidade, contagem de colisões e evento de
redimensionamento. Adicione a data e o URL da página. Remova senhas,
endereços, números de série, dados de pagamento, mensagens privadas e
registros confidenciais antes de compartilhar uma captura de tela ou
relatório. Uma sequência curta escrita geralmente carrega mais valor do que
uma fotografia próxima.

Para uma comparação, repita a mesma ordem e mantenha cada variável não
relacionada estável. Para uma questão de política ou direitos, cite o
arquivo ou cláusula exata em suas próprias palavras e ligue a fonte. Para um
bug, inclua o comportamento esperado, o comportamento observado e o menor
caminho de reprodução confiável. Esta rota pede que você grave: Tamanho do
viewport, proporção de pixels do dispositivo, tempo decorrido, posição,
velocidade, contagem de colisões e evento de redimensionamento.

Evite evidências fracas e alegações pouco claras

• O movimento de contagem de quadros é executado em velocidades diferentes
  em monitores de 60 Hz e 120 Hz.
• A página não modela o atrito físico ou o impacto. A página não foi
  encontrada.
• Evite várias mudanças de configuração entre a linha de base e o resultado.
  Preparação para esta rota: Escolha uma janela fixa, tamanho do crachá,
  velocidade e ponto de partida antes de comparar corridas.
• Evite uma reivindicação privada ou específica do modelo sem uma fonte
  primária atual. O limite da página é: Uma animação do navegador demonstra
  geometria e tempo. A página não modela atrito ou impacto físico.
• Evite dados privados em capturas de tela públicas, links, exemplos e
  mensagens de suporte. A evidência útil é: Tamanho do viewport do registro,
  proporção de pixel do dispositivo, tempo decorrido, posição, velocidade,
  contagem de colisões e evento de redimensionamento.
• O principal risco é: O movimento de contagem de quadros é executado em
  velocidades diferentes em monitores de 60 Hz e 120 Hz.

Mover para a próxima ação útil

Abra o DVD Screensaver, mude um controle e compare o contador ao vivo com as
fórmulas do guia. Mantenha a linha de base e o limite de página ao lado do
resultado. Entre em contato com o fabricante, vendedor, plataforma,
especialista, detentor dos direitos ou ScreenOrbit Editor quando a decisão
não estiver dentro do escopo da página.