Tutorial - Colisão de elementos com javascript

Olá,

Agora irei ensinar como cria um sistema de colisão:
Código:

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 */
            
        }
}

Vamos a lógica:
((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...

Ta serto que foi você quem fez, mas mesmo assim, um belo (-sqn) post...

Ótimo tuto , já sabia :roll:.uashuhas