5

Quem fornecer uma resposta que explique todas as nuances necessárias para tal em javascript ganhará os pontos.

11
  • Se você não entendeu o código de um usuário, você deveria ter postado comentários lá na pergunta original solicitando esclarecimentos dele (afinal, ninguém melhor do que o autor para explicar o que foi feito). Ou seja, abrir uma nova pergunta não é o caminho pra isso neste site. Eu só não voto pra fechar como duplicada (ou, até mesmo, fora do escopo) por causa da recompensa ativa. Commented 18/03/2017 às 17:48
  • Oi Luiz muito obrigado pelas dicas e observações, quanto ao usuário do outro post sou eu mesmo, inclusive requisitei que o autor do algoritmo da solução fizesse comentário no próprio código e que também esclarecesse um trecho do código, o comentário no código ele fez, mas a pergunta do trecho do código ele não respondeu, depois disso apaguei o post que eu mesmo havia postado perguntando. Um outro detalhe Luiz se você me permite é que apesar da semelhança do título o algoritmo será diferente pois os objetivos são outros apesar da semelhança.
    – user31050
    Commented 18/03/2017 às 20:51
  • Por último se eu fosse inteligente como você é Luiz, eu poderia ter entendido desde a primeira vez e claramente a lógica que ele fez e o trecho da codificação.
    – user31050
    Commented 18/03/2017 às 20:51
  • 2
    Pra essa questão, e pra aproveitar a sua recompensa, eu sugeriria perguntar diretamente "Como detectar a colisão entre dois quadrados/retângulos". Quem fornecer uma resposta que explique todas as nuances necessárias para tal, conforme você julgar apropriado, é pra quem você concede a recompensa. É melhor do que ir perguntando por partes com base em "alinhamento" (que não é exatamente o conceito ideal para o que parece que você quer fazer). Commented 19/03/2017 às 0:40
  • 1
    Olá @Ack você lembra daquele jogo Tetris onde formas geométricas diferentes vão descendo para base para serem encaixadas? Gostaria de entender justamente aquele princípio, quando um quadrado encosta em outro e ele para de se mover, pois gostaria de enviar múltiplos quadrados para cima (um quadrado de cada vez) e quando ele encostar em outro ele parar de se mover.
    – user31050
    Commented 20/03/2017 às 21:35

1 Resposta 1

8
+50

Para mostrar como funciona a detecção de colisão entre dois objetos vou utilizar duas div's quadradas em um plano 2D, mas a detecção de colisão pode ser aplicada para qualquer forma de objeto, desde que tenhamos as dimensões dos objetos em questão e esse conceito serve também para planos em 3D, a diferença do 2D para o 3D é que em 3D trabalhamos com três dimensões (x,y,z) enquanto no 2D são apenas duas (x,y), o que torna o processo bem mais simples.

inserir a descrição da imagem aqui

Os dois objetos(div's) vão possuir as seguintes dimensões, a primeira div(azul) possui 100px de altura e 100px de largura, a segunda div(vermelha) possui a metade do tamanho da primeira, logo 50px de altura e 50px de largura.

inserir a descrição da imagem aqui

Posição

Para conseguir a posição do elemento temos duas opções .position() ou .offset(), o método .position() retorna a localização relativa ao ancestral mais próximo, enquanto o .offset() retorna a posição em relação ao documento. Não explicarei a fundo os métodos se quiser entender mais sobre eles clique aqui, no exemplo em questão não faz diferença pois o elemento pai ou ancestral é o próprio documento.

Colisão

A colisão nesse contexto que criamos, considerando somente estes dois elementos, vai acontecer quando as seguintes condições forem verdadeiras:

Na horizontal:

Quando a extremidade direita do elemento mais a esquerda(A2) for maior ou igual a extremidade esquerda do elemento mais a direita(V1) e menor ou igual a extremidade direita do elemento mais a direita(V2).

V1<=A2<=V2

inserir a descrição da imagem aqui

Na vertical:

Quando a extremidade de baixo do elemento mais acima(A4) for maior ou igual a extremidade de cima do elemento mais abaixo(V3) e menor ou igual a extremidade de baixo do elemento mais abaixo(V4).

V3<=A4<=V4

inserir a descrição da imagem aqui

Extremidades

var posAzul = $(".azul").position();
A1 = posAzul.left;
A2 = posAzul.left + $(".azul").width();
A3 = posAzul.top;
A4 = posAzul.top + $(".azul").height();

Da mesma maneira conseguimos as extremidades do bloco vermelho.

Se essas duas condições forem satisfeitas simultaneamente podemos afirmar que houve colisão entre os objetos. Existem n formas de fazer essa verificação, segue um exemplo bem prático que verifica se há colisão entre dois objetos, espero que ajude.

$("#dir").click(function() {
  $(".azul").animate({
    "left": "+=50px"
  }, "fast", checkCollisions);
});

$("#esq").click(function() {
  $(".azul").animate({
    "left": "-=50px"
  }, "fast", checkCollisions);
});

$("#cima").click(function() {
  $(".azul").animate({
    "top": "-=50px"
  }, "fast", checkCollisions);
});

$("#baixo").click(function() {
  $(".azul").animate({
    "top": "+=50px"
  }, "fast", checkCollisions);
});

function getPositions(vermelho) {
  var $vermelho = $(vermelho);
  var pos = $vermelho.position();
  var width = $vermelho.width();
  var height = $vermelho.height();
  return [
    [pos.left, pos.left + width],
    [pos.top, pos.top + height]
  ];
}

function comparePositions(p1, p2) {
  var x1 = p1[0] < p2[0] ? p1 : p2;
  var x2 = p1[0] < p2[0] ? p2 : p1;
  return x1[1] > x2[0] || x1[0] === x2[0] ? true : false;
}

function checkCollisions() {
  var vermelho = $(".vermelho")[0];
  var pos = getPositions(vermelho);

  var pos2 = getPositions(this);
  var horizontalMatch = comparePositions(pos[0], pos2[0]);
  var verticalMatch = comparePositions(pos[1], pos2[1]);
  var match = horizontalMatch && verticalMatch;
  if (match) {
    $("body").append("<p>Colisão!</p>");
  }
}
.azul {
  position: absolute;
  background-color: blue;
  left: 50px;
  width: 100px;
  height: 100px;
  margin: 30px;
}

.vermelho {
  position: absolute;
  background-color: red;
  left: 300px;
  width: 50px;
  height: 50px;
  margin: 30px;
  top: 70px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="cima" style="width:150px;">Cima</button>
<br>
<button id="esq" style="width:75px;">Esquerda</button>
<button id="dir" style="width:75px;">Direita</button>
<br>
<button id="baixo" style="width:150px;">Baixo</button>

<div class="azul"></div>
<div class="vermelho"></div>

7
  • @user31050 Olha esse fiddle que fiz alterando o código da primeira resposta do tópico que tu me mandou, isso que tu precisava? jsfiddle.net/mathiasfcx/crboo2hz
    – Mathiasfc
    Commented 21/03/2017 às 17:50
  • @user31050 Razoavelmente foi simples, ao invés de alterar o .left de cada elemento, foi alterado o .top, compara os dois métodos que tu identifica com facilidade as mudanças.
    – Mathiasfc
    Commented 21/03/2017 às 17:57
  • @user31050 Posso te explicar sim, estou na rua no momento mas assim que possível deixo uma breve explicação.
    – Mathiasfc
    Commented 21/03/2017 às 18:05
  • @user31050 hahaha, desculpa cara to meio cheio de coisa no trabalho, estou em dívida contigo, vamos fazer o seguinte, tu tens o link do fiddle com o código, hoje ainda atualizo lá o código com a explicação em um comentário.
    – Mathiasfc
    Commented 22/03/2017 às 14:38
  • @user31050 jsfiddle.net/mathiasfcx/crboo2hz/7
    – Mathiasfc
    Commented 22/03/2017 às 15:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .