Como posso implementar uma resposta de colisão retangular?

Estou trabalhando em um jogo em JavaScript e minha implementação atual de colisão usa a menor distância para afastar o objeto que se cruza, o que nem sempre é correto. Eu fiz este diagrama da colisão ideal. A caixa vermelha representa a posição inicial, a caixa verde representa a posição correta e a caixa preta representa o objeto estático no qual está colidindo. A seta azul é o vetor de velocidade. Com minha implementação atual, o objeto seria colocado em sua posição final e empurrado para fora (e, neste caso, seria empurrado para a esquerda)

Como posso consertar isso?

Você pode descobrir, proceduralmente, como executar um rastreio AABB / AABB em movimento com as fórmulas nesta página.

http://www.realtimerendering.com/intersections.html

Basicamente, essas equações indicam a porcentagem de sua jogada que você deve fazer nesse quadro, o que permitirá que você coloque seu quadrado no local correto.

Existem algumas maneiras de fazer isso, mas uma maneira fácil é uma pesquisa binária na linha do tempo entre o último quadro e o atual. Digamos que o último quadro esteja no tempo t, e esse quadro esteja em t + 1. Se ocorrer uma colisão, faça backup dos objetos em t + 0,5. Se uma colisão ainda estiver ocorrendo, tente t + 0,25; se não, t + 0,75. Continue até as etapas serem suficientemente pequenas. Em seguida, faça o seu teste para a distância mais curta empurrando para trás. Em seguida, certifique-se de avançar o tempo restante (desde que você fez backup para encontrar o ponto de colisão).

A chave é chegar o mais perto possível desse ponto no tempo, pois isso definitivamente lhe dirá qual face colidiu com qual outra face.