Implémentation de la détection de collision de base pour l'animation HTML5 Canvas

Pour effectuer la détection de collision dans Canvas, les gens utilisent souvent directement la fonction de détection de collision intégrée du moteur de jeu (Cocos2d-JS, Egret) ou du moteur physique (Box2D). Êtes-vous curieux, avez-vous déjà pensé à leurs mécanismes de fonctionnement internes ? La technologie de base de détection de collision sera expliquée ci-dessous :

La détection de collision consiste à déterminer s'il y a un chevauchement entre les objets. Ici, nous supposons que les collisionneurs discutés sont tous des objets rectangulaires. Dans l'exemple suivant, nous allons créer deux objets rect A et B (ci-après dénommés A, B). La position de A est fixe et B se déplace avec la souris. Lorsque A et B se chevauchent, la console vous demandera de se croiser ! !

Ici, nous créons un nouveau Rect.js, créons un objet Rect et y ajoutons une méthode prototype draw. Cette méthode dessinera sur l'objet canevas entrant (contexte) en fonction des propriétés (position, taille) de l'objet actuel.

Le code est le suivant :

 function Rect(x,y,width,height) { this.x = x; this.y = y; this.width = width; this.height = height;}Rect.prototype.draw = function(context){ contexte. save(); context.translate(this.x,this.y); context.fillRect(0,0,this.width,this.height)

Parce que B doit suivre le mouvement de la souris, nous devons détecter la position actuelle de la souris sur le canevas. Créez une fonction Capturemouse pour détecter le mouvement de la souris sur le nœud (élément) du document entrant et renvoyer un objet souris (qui contient les coordonnées x, y de la souris).

Le code est le suivant :

 function Capturemouse (élément) { var mouse={x:null,y:null}; element.addEventListener('mousemove',function (event) { var x, y; if(event.pageX || event.pageY){ x = event.pageX; y = event.pageY; }else{ x = event.clientX+document.body.scrollLeft+ document.documentElement.scrollLeft; y = event.clientY+document.body.scrollTop+ document.documentElement.scrollTop; } x -=element.offsetLeft; },false); retourne la souris ;}

Détecter si A et B se chevauchent Lorsque nous discutons de l'existence d'un chevauchement, nous pouvons d'abord examiner les quatre situations sans chevauchement, comme indiqué ci-dessous :

Voici le jugement de ces quatre États :

1. rectB.y+rectB.hauteur < rectA.y

2. rectB.y > rectA.x +rectA.width

3. rectB.y > rectA.y + rectA.hauteur

4. rectB.x+rectB.width < rectA.x

Maintenant que nous savons comment juger l’état non chevauchant, comment juger l’état chevauchant ? C'est vrai, c'est le contraire ! , nous créons la fonction Interaect et l'ajoutons à Init.js. Cette fonction transmet deux paramètres d'objet Rect et retournera vrai lorsque les deux objets Rect se chevaucheront.

Le code est le suivant :

 function Intersect(rectA,rectB) { return !(rectB.y+rectB.height < rectA.y || rectB.y > rectA.x +rectA.width || rectB.y > rectA.y + rectA.height|| rectB.x+rectB.width < rectA.x)}

Créez un nouveau animationjs et définissez la fonction d'animation requestAnimationFrame().

Dans le corps de la boucle, les deux choses suivantes seront effectuées :

• Effacez le contenu du canevas actuel pour préparer le dessin de l’image suivante.
• Détectez si A et B se chevauchent. S'ils se chevauchent, la sortie interagit sur la console ! ! !
• Détectez le mouvement actuel de la souris sur le canevas et mettez à jour la position de la souris avec la propriété position de B.
• Redessinez A et B en fonction des nouveaux attributs de position (bien sûr, la position de A ne sera pas mise à jour mais elle doit être redessinée car le canevas sera effacé à chaque fois qu'il boucle)

Le code est le suivant :

 function drawAnimation() { window.requestAnimationFrame(drawAnimation); context.clearRect(0, 0, canvas.width, canvas.height); if(Intersect(rectA,rectB)){ console.log('interact!!!!' ); } if(mouse.x){ rectB.x = mouse.x; rectB.y = mouse.y; rectB.draw(contexte);}

3. Initialisation

Créez un nouveau Init.js, obtenez l'élément canevas et liez la détection de mouvement de la souris, initialisez les objets Rect A et B, et enfin démarrez la boucle d'animation.

Le code est le suivant :

 window.onload = function () { canvas = document.getElementById('collCanvas'); contexte = canvas.getContext('2d'); 2 100 100 ); rectB = nouveau Rect(100 100 100 100 ); dessinerAnimation();}

Après avoir parlé de collision rectangulaire, parlons de collision circulaire. De même, nous créerons deux objets Cercle A et B (ci-après dénommés A, B). La position de A est fixe et B suit le mouvement de la souris. B se chevauchent, la console Intercept sera invitée ! !

 function Cercle(x,y,radius) { this.x = x; this.y = y; this.radius = radius;}Circle.prototype.draw = function(context){ context.save(); this.x,this.y); contexte.beginPath(); contexte.arc(0,0,this.radius,0,Math.PI*2,false contexte.fill(); contexte.restore();}

La détection de collision entre cercles peut être jugée simplement en comparant la distance entre les centres des deux cercles avec la somme des rayons des deux cercles lorsque la distance entre les centres des deux cercles est inférieure à la somme des rayons des deux cercles. deux cercles, une collision se produit.

Comme indiqué ci-dessous :

La première chose que nous devons faire est donc de calculer la distance entre les centres des deux cercles. Ici, nous utiliserons la formule de distance entre deux points, comme suit :

Lorsque la distance entre les centres de deux cercles est obtenue, elle sera comparée à la somme des rayons des deux cercles. Si la distance est inférieure à la somme des rayons, vrai sera renvoyé.

Nous mettons maintenant à jour la fonction Interaect.

Le code est le suivant :

 function Intersect(circleA,circleB) { var dx = circleA.x-circleB.x; var dy = circleA.y-circleB.y; var distance = Math.sqrt(dx*dx+dy*dy); cercleA.radius + cercleB.radius);}

Mettez à jour animation.js, nous remplaçons ici l'objet Rect par un objet Circle.

Le code est le suivant :

 function drawAnimation() { window.requestAnimationFrame(drawAnimation); context.clearRect(0, 0, canvas.width, canvas.height); if(Intersect(circleA,circleB)){ console.log('interact!!!!' ); } if(mouse.x){ circleB.x = mouse.x; circleB.y = mouse.y; cercleB.draw(contexte);}

Mettez à jour Init.js, initialisez les objets Circle A et B, et enfin démarrez la boucle d'animation.

Le code est le suivant :

 window.onload = function () { canvas = document.getElementById('collCanvas'); contexte = canvas.getContext('2d'); Capturemouse(canvas); 2 100 ); cercleB = nouveau Cercle (100 100 100 );

Les explications précédentes concernent la détection de collisions entre des formes uniques. Nous allons ensuite détecter les collisions entre des rectangles et des cercles.

1. Détecter les collisions

Comme pour la détection de rectangle, examinons d'abord les quatre situations dans lesquelles aucune collision ne se produit.

Comme indiqué ci-dessous :

Voici le jugement de ces quatre États :

• Cercle.y + Cercle.radius < Rect.y
• Cercle.x - Cercle.radius > Rect.x + Rect.width
• Cercle.y - Cercle.radius > Rect.y + Rect.hauteur
• Cercle.x + Cercle.radius < Rect.x

Mettez à jour la fonction Interaect, inversez l'état de non-chevauchement et transmettez l'objet Rect et l'objet Circle à la fonction lorsque l'objet Rect et l'objet Circle se chevauchent, true sera renvoyé.

Le code est le suivant :

 function Intersect(Rect,Circle) { return !(Circle.y + Circle.radius < Rect.y || Circle.x - Circle.radius > Rect.x + Rect.width || Circle.y - Circle.radius > Rect .y + Rect.hauteur || Cercle.x + Cercle.radius < Rect.x)}

Mettez à jour animation.js, ici nous suivons l'objet cercle jusqu'au mouvement de la souris et détectons la collision avec l'objet rect à position fixe.

Le code est le suivant :

 function drawAnimation() { window.requestAnimationFrame(drawAnimation); context.clearRect(0, 0, canvas.width, canvas.height); if(Intersect(rect,circle)){ console.log('interact!!!!' ); } if(mouse.x){ circle.x = mouse.x; circle.y = mouse.y;} circle.draw(context);

Mettez à jour Init.js, initialisez l'objet Circle et l'objet Rect, et enfin démarrez la boucle d'animation.

Le code est le suivant :

 window.onload = function () { canvas = document.getElementById('collCanvas'); contexte = canvas.getContext('2d'); cercle = new Circle(100,100,100); width/2,canvas.height/2,100,100); drawAnimation();}

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.