Quem fornecer uma resposta que explique todas as nuances necessárias para tal em javascript ganhará os pontos.
-
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.– Luiz VieiraCommented 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.– user31050Commented 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.– user31050Commented 18/03/2017 às 20:51
-
2Pra 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).– Luiz VieiraCommented 19/03/2017 às 0:40
-
1Olá @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.– user31050Commented 20/03/2017 às 21:35
1 Resposta
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.
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.
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
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
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>
-
@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 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. 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. 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. Commented 22/03/2017 às 14:38
-