Tutorial - Colisão de elementos com javascript 10.07.13 14:53
Olá,
Agora irei ensinar como cria um sistema de colisão:
Código:
((position1.left + size1.width) > position2.left
Verifica se o elemento 1 está se chocando na borda do outro elemento, ou seja: Ele pega a posição da esquerda do elemento 1 soma com a largura dele, e verifica se está maior que a posição da esquerda do elemento 2! Resumindo, ele ve se a borda direita do elemento 1 (de acordo com a sua visão) está se chocando ou passando da borda esquerda do elemento 2!
Imagem:
A borda vermelha está maior que a borda azul, ou seja ele está se chocando com o elemento do 2, ou passando à direita dele
Lógica 2:
((position1.top + size1.height) > position2.top)
Verificamos se o elemento 1 se choca em cima do elemento 2 ou passa debaixo dele, pegamos a posição do topo do elemento 1 somamos com sua altura e depois verificamos se é maior que a posição do top do elemento 2:
Borda vermelha(borda de baixo do elemento 1) está passando da borda azul(borda de cima do elemento 2), isso verifica se o elemento 1 se chocou em cima do elemento 2 ou se passou por debaixo dele.
Lógica 3:
((position2.left + size2.width) > position1.left)
Verificamos se a borda direita do elemento 2 está mais distante da borda esquerda do elemento 1, isso é, se o elemento 2 se chocou na direita do elemento 1, ou se o elemento 1 se chocou na esquerda do elemento 2:
A borda vermelha, direita do elemento 2, está mais distante da borda esquerda do elemento 1, ou seja, o elemento 2 passou do elemento 1, ou está se chocando na direita dele, ou o elemento 1 do passou da esquerda do elemento 2, ou se chocou na esquerda dele.
Depois faço a lógica 4...
Agora irei ensinar como cria um sistema de colisão:
Código:
Vamos a lógica:function testcs(position1,size1,position2,size2){
if (((position1.left + size1.width) > position2.left) &&((position1.top + size1.height) > position2.top) &&((position2.left + size2.width) > position1.left) && ((position2.top + size2.height) > position1.top)) {
/*funcao caso eles tenham se chocado */
}
}
((position1.left + size1.width) > position2.left
Verifica se o elemento 1 está se chocando na borda do outro elemento, ou seja: Ele pega a posição da esquerda do elemento 1 soma com a largura dele, e verifica se está maior que a posição da esquerda do elemento 2! Resumindo, ele ve se a borda direita do elemento 1 (de acordo com a sua visão) está se chocando ou passando da borda esquerda do elemento 2!
Imagem:
A borda vermelha está maior que a borda azul, ou seja ele está se chocando com o elemento do 2, ou passando à direita dele
Lógica 2:
((position1.top + size1.height) > position2.top)
Verificamos se o elemento 1 se choca em cima do elemento 2 ou passa debaixo dele, pegamos a posição do topo do elemento 1 somamos com sua altura e depois verificamos se é maior que a posição do top do elemento 2:
Borda vermelha(borda de baixo do elemento 1) está passando da borda azul(borda de cima do elemento 2), isso verifica se o elemento 1 se chocou em cima do elemento 2 ou se passou por debaixo dele.
Lógica 3:
((position2.left + size2.width) > position1.left)
Verificamos se a borda direita do elemento 2 está mais distante da borda esquerda do elemento 1, isso é, se o elemento 2 se chocou na direita do elemento 1, ou se o elemento 1 se chocou na esquerda do elemento 2:
A borda vermelha, direita do elemento 2, está mais distante da borda esquerda do elemento 1, ou seja, o elemento 2 passou do elemento 1, ou está se chocando na direita dele, ou o elemento 1 do passou da esquerda do elemento 2, ou se chocou na esquerda dele.
Depois faço a lógica 4...