Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. /*
  2.  *  Copyright (c) 2012 [iPs]TeaM
  3.  *  Bruno da Silva (brunoemail@r7.com)
  4.  *  Tutorial básico de como detectar colisão de elementos em javascript canvas
  5.  
  6.  * www.brunodasilva.com
  7.  * www.ips-team.forumeiros.com
  8. */
  9.  
  10.  
  11. <canvas style="background-color:black" id='canvas' width=800 height=600></canvas>
  12.  
  13. <script>
  14.     cnv = document.getElementById('canvas').getContext('2d')
  15.  
  16.     cnv.fillStyle="white"
  17.  
  18.     // representar o tamanho máximo da tela onde movimenta os quadrados
  19.  
  20.     var w = 800
  21.  
  22.     var h = 600
  23.  
  24.     // Aqui cria as arrays que irão armazenar a posição dos quadrados (importante)
  25.  
  26.     var x = new Array(0, 100)
  27.  
  28.     var y = new Array(100, 200);
  29.  
  30.     // Aqui representará a velocidade dos nossos quadrados
  31.     // dx = Velocidade do quadrado que vai na posição leste-oeste
  32.     // dy = Velocidade do quadrado que vai na posição norte-sul
  33.  
  34.  
  35.     dx = 15
  36.     dy = 15
  37.  
  38.     // Chamar função recursiva que vai executar o movimento dos quadrados
  39.     executarMovimento()
  40.  
  41.  
  42.     // Criando a função
  43.  
  44.     function executarMovimento() {
  45.  
  46.         // Deletar os quadrados já criados
  47.  
  48.         cnv.clearRect(0,0,w,w)
  49.  
  50.         // Verificar se a posição LESTE-OESTE já ultrapassou o limite de w
  51.  
  52.         if(x[0] + dx < 0 || x[0] + dx + 25 > w) dx = -dx
  53.  
  54.         // Adicionar nova coordenada em relação a velocidade colocada lá encima!
  55.  
  56.         x[0] += dx
  57.  
  58.         // Finalmente, desenhar o quadrado de 25x25
  59.  
  60.         cnv.fillRect(x[0], y[0], 25, 25)
  61.  
  62.         //////////////////////////////////////////////////////////////////////////////
  63.         // Agora nesta etapa modifico o quadrado que vai no sentido norte-sul
  64.  
  65.         // Verificar se o quadrado e sua posição ultrapassaram o limite da área do canvas, representado por H
  66.         if(y[1] + dy < 0 || y[1] + dy + 25 > h) dy = -dy
  67.  
  68.         // Adicionar nova coordenada conforme a velocidade
  69.         y[1] += dy  
  70.  
  71.         // Desenhar o quadrado de 25x25    
  72.         cnv.fillRect(x[1], y[1], 25, 25)
  73.  
  74.         // Aqui vem o sistema para detectar a colisão!
  75.         // Simples algorítimo aqui irá detectar a colisão dos dois triangulos
  76.         // 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!
  77.  
  78.         if((x[0] - x[1]) <= 25 && (y[0] - y[1]) <= 25 & (x[0] - x[1]) > -25 && (y[0] - y[1]) > -25) {
  79.             alert("Colidiu");
  80.         }
  81.        
  82.         // Chamar novamente a função para executar o próximo movimento
  83.  
  84.         setTimeout(executarMovimento, 50)
  85.  
  86.       }
  87.  
  88. </script>