html5キャンバスでの2つのアークの衝突検出

HTML5キャンバス上で2つのボールが交差しているかどうかを検出しようとしています。私は、ballというコンストラクターオブジェクトの一部としてintersectという関数が必要です。この関数は、1つのBallオブジェクトを引数として取り込み、キャンバス上の2つのボールが接触/交差している場合にtrueを返します。それ以外の場合はfalseです。html5キャンバスでの2つのアークの衝突検出

ボールの新しいインスタンスを交差関数に渡してキャンバス上の別のボールと比較する方法を理解できません。私が作業している関数は、最後の関数がボールオブジェクトの最後で交差していることです。私が今までに持っているコードについては、以下を参照してください。

ご協力いただければ幸いです。

<!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>

出典

2017-10-12 user2963022

まず第一に、そしてなぜそれクラス作りますか？

intersectには、Ballをパラメータとして設定できます。ここから、thisとパラメータBallの間の衝突を計算できます。それだけでthisオブジェクトに見えたとして

あなたの距離関数は、オフだった、と私はあなたのコード内のthis問題固定：

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;

を

出典

2017-10-12 12:55:28

私は本当にそれは引数を持たなければならない何かを渡す機能

まあ交わるにボールの新しいインスタンスに渡す方法を見つけ出す傾けます。あなたのクラスでthisキーワードを使用しない場合は

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

その後...

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

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

出典

2017-10-12 12:55:15 Fraser

html5キャンバスでの2つのアークの衝突検出

答えて

関連する問題