Ajouter collision à HTML5 Canvas

Question

Salut je la suivante application HTML5 Canvas: http://dev.driz.co.uk/app/

Lorsque vous déplacez la souris autour d'elle entraînera les boules de se déplacer, le problème est cependant que les balles ne réagissent pas les uns aux autres . Au lieu de cela, ils passent juste derrière ou l'un derrière l'autre.

Vous cherchez des informations de détection de collision pour HTML5 Canvas.

Merci.

Answer 1

Salut tout le monde. Je ne sais pas si vous avez déjà trouvé cela, mais je suis en train de créer un jeu de snooker en toile. Ma détection de collision/manipulation des balles est la suivante. Il utilise trig pour le moment, mais pourrait être optimisé en utilisant des mathématiques vectorielles à la place. Quoi qu'il en soit, vous pouvez voir les progrès avec en action ->here

Cette boucle fonctionne dans ma fonction Animer:

// checks if the any of the balls have collided with each other 
for(i=0;i<ballArray.length;i++) 
{ 
    for(j=i;j<ballArray.length;j++) 
    { 
     if(j != i) 
     { 

      if(Math.pow((ballArray[j].x - ballArray[i].x),2) + Math.pow((ballArray[j].y - ballArray[i].y),2) <= (ballArray[i].radius + ballArray[j].radius) * (ballArray[i].radius + ballArray[j].radius)) 
      { 
       dx = ballArray[i].x - ballArray[j].x; 
       dy = ballArray[i].y - ballArray[j].y; 
       // collision angle is often refered to as the greek character 'phi' 
       phi = Math.atan2(dy, dx); 

       magnitude_1 = Math.sqrt(ballArray[i].vx * ballArray[i].vx + ballArray[i].vy * ballArray[i].vy); 
       magnitude_2 = Math.sqrt(ballArray[j].vx * ballArray[j].vx + ballArray[j].vy * ballArray[j].vy); 

       direction_1 = Math.atan2(ballArray[i].vy, ballArray[i].vx); 
       direction_2 = Math.atan2(ballArray[j].vy, ballArray[j].vx); 

       new_xspeed_1 = magnitude_1 * Math.cos(direction_1 - phi); 
       new_yspeed_1 = magnitude_1 * Math.sin(direction_1 - phi); 

       new_xspeed_2 = magnitude_2 * Math.cos(direction_2 - phi); 
       new_yspeed_2 = magnitude_2 * Math.sin(direction_2 - phi); 

       final_xspeed_1 = ((ballArray[i].mass - ballArray[j].mass) * new_xspeed_1 + (ballArray[j].mass + ballArray[j].mass) * new_xspeed_2)/(ballArray[i].mass + ballArray[j].mass); 
       final_xspeed_2 = ((ballArray[i].mass + ballArray[i].mass) * new_xspeed_1 + (ballArray[j].mass - ballArray[i].mass) * new_xspeed_2)/(ballArray[i].mass + ballArray[j].mass); 

       final_yspeed_1 = new_yspeed_1; 
       final_yspeed_2 = new_yspeed_2; 

       ballArray[i].vx = Math.cos(phi) * final_xspeed_1 + Math.cos(phi + Math.PI/2) * final_yspeed_1; 
       ballArray[i].vy = Math.sin(phi) * final_xspeed_1 + Math.sin(phi + Math.PI/2) * final_yspeed_1; 
       ballArray[j].vx = Math.cos(phi) * final_xspeed_2 + Math.cos(phi + Math.PI/2) * final_yspeed_2; 
       ballArray[j].vy = Math.sin(phi) * final_xspeed_2 + Math.sin(phi + Math.PI/2) * final_yspeed_2; 
      } 
     } 
    } 
}