Détection de collision de deux arcs en toile html5

J'essaie de détecter si deux balles se croisent sur un canevas HTML5. J'ai besoin d'une fonction appelée intersection dans le cadre d'un objet constructeur appelé Ball. Cette fonction prendra un objet Ball comme argument et retournera vrai si les deux balles sur la toile sont en contact/intersection. et faux sinon.Détection de collision de deux arcs en toile html5

Je n'arrive pas à comprendre comment passer une nouvelle instance d'une balle à la fonction d'intersection et ensuite la comparer à une autre balle sur la toile. La fonction sur laquelle je travaille est la fonction finale se croisant à la fin de l'objet balle. S'il vous plaît voir ci-dessous pour le code que j'ai jusqu'à présent.

Toute aide serait grandement appréciée.

<!DOCTYPE html> 
<hmtl> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Canvas</title> 
    <style type="text/css"> 
    canvas{ 
    border: 1px solid black; 
    } 
    </style> 

    </head> 

    <body> 

    <canvas id="canvasOne" ></canvas> 


    <script type="text/javascript"> 
     // Gets a handle to the element with id canvasOne. 
     var canvas = document.getElementById("canvasOne"); 

     // Set the canvas up for drawing in 2D. 
     var ctx = canvas.getContext("2d"); 
     canvas.width = 500; 
     canvas.height = 500; 

    function Ball(xpos,ypos,r) { 
     this.xpos = xpos; 
     this.ypos = ypos; 
     this.r = r; 
     this.move = function(addx,addy){ 
      this.xpos = this.xpos + addx; 
      this.ypos = this.ypos + addy; 
     }; 
     this.resize = function(setr){ 
      this.r = setr; 
     }; 


     this.draw = function(){ 

      for (var i = 0; i < 7; i++) { 
       ctx.beginPath(); 
       ctx.moveTo(ball.xpos, ball.ypos); 
       ctx.arc(ball.xpos, ball.ypos, ball.r, i*(2 * Math.PI/7), (i+1)*(2 * Math.PI/7));      
       ctx.lineWidth = 2; 
       ctx.strokeStyle = '#444'; 
       ctx.stroke(); 
      } 

      ctx.beginPath(); 
      ctx.moveTo(ball.xpos, ball.ypos); 
      ctx.arc(ball.xpos,ball.ypos,ball.r-10,0,2*Math.PI); 
      ctx.lineWidth = 2; 
      ctx.strokeStyle = '#444'; 
      ctx.stroke(); 

     }; 
     this.rotate = function(){ 
      ctx.clearRect(0, 0, canvas.width, canvas.height); 

      // Move registration point to the center of the canvas 
      ctx.translate(ball.xpos, ball.ypos); 

      // Rotate 1 degree 
      ctx.rotate(Math.PI/180); 

      // Move registration point back to the top left corner of canvas 
      ctx.translate(-ball.xpos, -ball.ypos); 

      ball.draw(); 

      ctx.restore(); 

     }; 
     this.contains = function(x, y){ 
      this.x = this.x; 
      this.y = this.y; 
      if(Math.sqrt((x-ball.xpos)*(x-ball.xpos) + (y-ball.ypos)*(y-ball.ypos)) <= ball.r) 
      { 
       return true; 
      }else{ 
       return false; 
      } 
     }; 

     this.intersect = function(){ 
      this.ball1 = this.ball1; 

      var distance = (ball.xpos * ball.xpos) + (ball.ypos *ball.ypos); 
      if(distance <= (ball.r + ball.r)*(ball.r + ball.r)){ 
       return true; 
      }else{ 
       return false; 
      } 

     }; 

    } 

    var ball = new Ball(100,100,100); 
    ball.draw(); 




    </script> 

    </body> 

</html>

Source

2017-10-12 user2963022

Tout d'abord, si vous ne comptez pas utiliser le mot-clé this dans votre classe, alors pourquoi en faire une classe?

Vous pouvez configurer votre intersect pour qu'il prenne un Ball en tant que paramètre. De là, vous pouvez calculer la collision entre this et le paramètre Ball.

fonction vous à distance était loin, car il ne regardait l'objet this, et je fixe le problème this dans votre code:

var canvas = document.body.appendChild(document.createElement("canvas")); 
 
// Set the canvas up for drawing in 2D. 
 
var ctx = canvas.getContext("2d"); 
 
canvas.width = 500; 
 
canvas.height = 500; 
 

 
function Ball(xpos, ypos, r) { 
 
    this.xpos = xpos; 
 
    this.ypos = ypos; 
 
    this.r = r; 
 
    this.move = function(addx, addy) { 
 
    this.xpos = this.xpos + addx; 
 
    this.ypos = this.ypos + addy; 
 
    }; 
 
    this.resize = function(setr) { 
 
    this.r = setr; 
 
    }; 
 
    this.draw = function() { 
 
    for (var i = 0; i < 7; i++) { 
 
     ctx.beginPath(); 
 
     ctx.moveTo(this.xpos, this.ypos); 
 
     ctx.arc(this.xpos, this.ypos, this.r, i * (2 * Math.PI/7), (i + 1) * (2 * Math.PI/7)); 
 
     ctx.lineWidth = 2; 
 
     ctx.stroke(); 
 
    } 
 
    ctx.beginPath(); 
 
    ctx.moveTo(this.xpos, this.ypos); 
 
    ctx.arc(this.xpos, this.ypos, this.r - 10, 0, 2 * Math.PI); 
 
    ctx.lineWidth = 2; 
 
    ctx.stroke(); 
 
    }; 
 
    this.rotate = function() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    // Move registration point to the center of the canvas 
 
    ctx.translate(this.xpos, this.ypos); 
 
    // Rotate 1 degree 
 
    ctx.rotate(Math.PI/180); 
 
    // Move registration point back to the top left corner of canvas 
 
    ctx.translate(-this.xpos, -this.ypos); 
 
    this.draw(); 
 
    ctx.restore(); 
 
    }; 
 
    this.contains = function(x, y) { 
 
    this.x = this.x; 
 
    this.y = this.y; 
 
    if (Math.sqrt((x - this.xpos) * (x - this.xpos) + (y - this.ypos) * (y - this.ypos)) <= this.r) { 
 
     return true; 
 
    } else { 
 
     return false; 
 
    } 
 
    }; 
 
    //put "ball" as a paremeter 
 
    //ball will be the foreign Ball to test intersection against 
 
    this.intersect = function(ball) { 
 
    var productX = this.xpos - ball.xpos; 
 
    var productY = this.ypos - ball.ypos; 
 
    var distance = Math.sqrt(productX * productX + productY * productY); 
 
    if (distance <= (this.r + ball.r)) { 
 
     return true; 
 
    } else { 
 
     return false; 
 
    } 
 
    }; 
 
} 
 
var ball1 = new Ball(100, 100, 100); 
 
var ball2 = new Ball(240, 140, 40); 
 

 
function update(evt) { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    if (evt !== void 0) { 
 
    ball2.xpos = evt.offsetX; 
 
    ball2.ypos = evt.offsetY; 
 
    } 
 
    //Pass the ball as an argument to the method 
 
    ctx.strokeStyle = ball1.intersect(ball2) ? "red" : '#444'; 
 
    ball1.draw(); 
 
    ball2.draw(); 
 
} 
 
update(); 
 
canvas.onmousemove = update;

Source

2017-10-12 12:55:28

Je ne peux pas comprendre comment passer dans une nouvelle instance d'une balle à la Intersection fonction

bien passer quelque chose de vraiment qu'il devrait avoir un argument.

this.intersect = function(otherball){ 
// then compare the two ball objects

Alors ...

var ball1 = new Ball(100,100,100); 
var ball2 = new Ball(100,100,100); 
ball1.draw(); 
ball2.draw(); 

console.log(ball1.intersect(ball2));

Source

2017-10-12 12:55:15 Fraser

Détection de collision de deux arcs en toile html5

Répondre

Questions connexes