/*
* Copyright (c) 2012 [iPs]TeaM
* Bruno da Silva (brunoemail@r7.com)
* Tutorial básico de como detectar colisão de elementos em javascript canvas
* www.brunodasilva.com
* www.ips-team.forumeiros.com
*/
<canvas style="background-color:black" id='canvas' width=800 height=600></canvas>
<script>
cnv = document.getElementById('canvas').getContext('2d')
cnv.fillStyle="white"
// representar o tamanho máximo da tela onde movimenta os quadrados
var w = 800
var h = 600
// Aqui cria as arrays que irão armazenar a posição dos quadrados (importante)
var x = new Array(0, 100)
var y = new Array(100, 200);
// Aqui representará a velocidade dos nossos quadrados
// dx = Velocidade do quadrado que vai na posição leste-oeste
// dy = Velocidade do quadrado que vai na posição norte-sul
dx = 15
dy = 15
// Chamar função recursiva que vai executar o movimento dos quadrados
executarMovimento()
// Criando a função
function executarMovimento() {
// Deletar os quadrados já criados
cnv.clearRect(0,0,w,w)
// Verificar se a posição LESTE-OESTE já ultrapassou o limite de w
if(x[0] + dx < 0 || x[0] + dx + 25 > w) dx = -dx
// Adicionar nova coordenada em relação a velocidade colocada lá encima!
x[0] += dx
// Finalmente, desenhar o quadrado de 25x25
cnv.fillRect(x[0], y[0], 25, 25)
//////////////////////////////////////////////////////////////////////////////
// Agora nesta etapa modifico o quadrado que vai no sentido norte-sul
// Verificar se o quadrado e sua posição ultrapassaram o limite da área do canvas, representado por H
if(y[1] + dy < 0 || y[1] + dy + 25 > h) dy = -dy
// Adicionar nova coordenada conforme a velocidade
y[1] += dy
// Desenhar o quadrado de 25x25
cnv.fillRect(x[1], y[1], 25, 25)
// Aqui vem o sistema para detectar a colisão!
// Simples algorítimo aqui irá detectar a colisão dos dois triangulos
// Funciona da seguinte maneira .. Caso a DIFERENÇA da coordenada do primeiro quadrado com a diferença do segundo quadrado for menor que o tamanho dos quadrados, significa que eles colidiram!
if((x[0] - x[1]) <= 25 && (y[0] - y[1]) <= 25 & (x[0] - x[1]) > -25 && (y[0] - y[1]) > -25) {
alert("Colidiu");
}
// Chamar novamente a função para executar o próximo movimento
setTimeout(executarMovimento, 50)
}
</script>