html5 canvas中兩個弧的碰撞檢測

Question

我正在嘗試檢測兩個球是否在HTML5畫布上相交。 我需要一個名為intersect的函數作為名為Ball的構造函數對象的一部分。 此功能將一個Ball對象作為參數，如果畫布上的兩個球接觸/相交，則返回true。 否則為假。

我無法弄清楚如何將球的新實例傳遞給相交函數，然后將其與畫布上的另一個球進行比較。 我正在使用的函數是在Ball對象末尾的最終函數相交。 請參閱以下我到目前為止的代碼。

任何幫助將不勝感激。

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

Answer 1

我不知道如何將球的新實例傳遞給相交函數

好吧，要傳遞任何東西，它應該有一個論點。

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));

Answer 2

首先，如果您不打算在班級中使用this關鍵字，那么為什么要使其成為班級呢？

您可以設置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;

html5 canvas中兩個弧的碰撞檢測

問題描述

2 個解決方案

解決方案1
0 2017-10-12 12:55:15

解決方案2
0 已采納 2017-10-12 12:55:28

html5 canvas中兩個弧的碰撞檢測

問題描述

2 個解決方案

解決方案1 0 2017-10-12 12:55:15

解決方案2 0 已采納 2017-10-12 12:55:28

解決方案1
0 2017-10-12 12:55:15

解決方案2
0 已采納 2017-10-12 12:55:28