(Javascript) Detectar colisão em Canvas

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