https://fiddle.jshell.net/43jwxh35/
Alinhamento para esquerda com colisão de elementos para game
Critérios de alinhamento:
- Alinhar a esquerda a partir do elemento com menor valor de 'left'.
- Elementos com colisão devem permanecer ao lado do elemento colidido.
No exemplo acima o algoritmo busca o elemento mais a esquerda em referência aos outros elementos e armazena sua posição, em seguida busca alinhar todos os outros elementos a partir do dado armazenado.
Como o algoritmo sabe que vai colidir ou não? Para saber isso o algoritmo checa se o elemento que vai alinhar a esquerda, está acima do elemento armazenado:
if (distTopPlusHeightRefNext < distTopRef)
{
$("#" + arrayIdDivsFolllow[i]).css({'left': arrayLeftValue[0] + "px"
});
Se o elemento está acima, ele aplica a posição left armazenada, para o elemento que vai ser alinhado a esquerda.
O mesmo acontece se o elemento para ser alinhado está abaixo do elemento armazenado.
if (distTopRefNext > distTopPlusHeightRef)
{
$("#" + arrayIdDivsFolllow[i]).css({'left': arrayLeftValue[0] + "px"
});
Então quando essas duas opções anteriores não são possíveis de alinhar, significa que o elemento vai colidir.
if (distTopPlusHeightRefNext > distTopRef && distTopRefNext < distTopPlusHeightRef) {
var tempValue = marginLeftPlusWidthRef;
tempValue = tempValue + 3; //Espaço entre os elementos em pixel
$("#" + arrayIdDivsFolllow[i]).css({'left': tempValue + "px"
});
Uma vez que o elemento vá colidir, os valores de referência precisam estar atualizados, para que o elemento possa alinhar a partir do elemento mais próximo. Ex: getValDivs().
Mas existe um erro porque a div1 não está colidindo com a div3 como quando também dois elementos tem a mesma posição, o que está errado? Grato