HTML 5 – Colisões de círculos

[Anderson Ferminiano 2]

 

Colisão sem dúvida é umas das partes mais discutidas na área de desenvolvimento de jogos, infelizmente ou felizmente (rsrs) o HTML5 não possui métodos nativos que ajudam nessa parte, ou você trabalha com tile collisions, ou parte para física e matemática de cálculo entre distâncias.

 

Trouxe uma solução matemática para colisões entre círculos com explicação e código fonte, segue o exemplo:

http://andersonferminiano.com/html5/studies/balls_collisions/

 

 

Veja também a explicação da fórmula em inglês:

[Mário Monteiro 179]

Programação para jogos é fascinante mesmo

 

quem ver aqueles jogos prontos nem imagina o que tem por tras

[DesenvolvedorRoger 50]

Olá, Anderson!!!

 

Acessei com o firefox e chrome(o mais recente)e em ambos achei um bug...

 

Antes mesmo das bolinhas se colidirem, o código está detectando como se já tivessem colidido. A distância em que estão pausando entre si é um tanto grande(algo em torno de 4 ou 5pxs)... Em outros casos o código está detectando a colisão depois de já terem colidido(diferença de aproximadamente de 3px). Não sei se mais alguém conseguiu visualizar isso, mas a iniciativa é boa...

 

Parabéns!!

 

EDIT

 

Aqui um print para você conferir

[Anderson Ferminiano 2]

@Mário

No começo é relativamente complicado se adequar a área de desenvolvimento de jogos, depois acostuma e fica normal rs

 

@Roger

É, algumas bolinhas, principalmente as pequenas tão colidindo um pouco longe (2px +/-), as médias/grandes parece normal pela imagem...

O certo na verdade é adicionar uma distância um pouco menor pra colidir, alterando na fórmula, subtraindo 1~2 pixels para evitar erros de cálculo como estes.

 

Testei nas versões mais atualizadas de Chrome, Opera, Safari e Mozilla utilizando Win XP, Seven e Mac OS X Snow Leopard.

 

Valeu :)