Skip to main content
3 de 7
adicionou 443 caracteres ao conteúdo
user31050
  • 440
  • 4
  • 12

Alinhamento para esquerda com detecção de colisão de elementos

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

user31050
  • 440
  • 4
  • 12