分离轴定理难点

Question

我在使用这种碰撞检测算法时遇到了很大的问题。我了解它是如何工作的，但我不知道如何在我的代码中实现它，尽管我已经看过很多关于它的教程。此代码段中目前没有碰撞检测代码。这是演示：

          var ctx = document.getElementById('canvas').getContext("2d");

          var square = {
               x:150,
               y:100,
               width:100,
               height:100
          };
          var triangle = {
               x:300,
               y:100,
               width:100,
               height:100
          };

          function draw() {
                ctx.clearRect(0,0,canvas.width,canvas.height);
               ctx.lineWidth = 1;
               ctx.strokeStyle = "black";
               
               //Draw the square
               ctx.strokeRect(square.x,square.y,square.width, square.height);

               //Draw the triangle
                ctx.beginPath();
                ctx.moveTo(triangle.x+triangle.width/2,triangle.y);
                ctx.lineTo(triangle.x + triangle.width, triangle.y + triangle.height);
                ctx.lineTo(triangle.x, triangle.y + triangle.height);
                ctx.closePath();
                ctx.stroke();       

               requestAnimationFrame(draw);
          }
          draw();

          document.body.addEventListener("mousemove", function(e) {
               square.x = e.clientX;
               square.y = e.clientY;
          });

 canvas {
                    border:1px solid black;
             }

<canvas id="canvas" width="600" height="600"></canvas>

Answer 1

添加了碰撞功能，检查正方形边界是否与三角形边界相交或是否彼此包含。

var ctx = document.getElementById('canvas').getContext("2d");

var square = {
  x:150,
  y:100,
  width:100,
  height:100
};
var triangle = {
  x:300,
  y:100,
  width:100,
  height:100
};

function draw() {
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.lineWidth = 1;
  ctx.strokeStyle = "black";

  //Draw the square
  ctx.strokeRect(square.x,square.y,square.width, square.height);

  //Draw the triangle
  ctx.beginPath();
  ctx.moveTo(triangle.x+triangle.width/2,triangle.y);
  ctx.lineTo(triangle.x + triangle.width, triangle.y + triangle.height);
  ctx.lineTo(triangle.x, triangle.y + triangle.height);
  ctx.closePath();
  ctx.stroke();       

  requestAnimationFrame(draw);
}
draw();

document.body.addEventListener("mousemove", function(e) {
  square.x = e.clientX;
  square.y = e.clientY;
  collision();
});

function collision(){
  if(triangle.x + triangle.width - square.x >= 0 && triangle.y + triangle.height - square.y >= 0 && square.y - (triangle.y - square.height) >= 0 && square.x - (triangle.x - square.width) >= 0 && square.x - x1(square.y) >= 0 && x2(square.y) - square.x >= 0){
    console.log("collision");
  }
}

function x1(y){
  return triangle.x - square.width + ((triangle.width/2) / triangle.height) * ((triangle.y + triangle.height - square.height) - y);
}

function x2(y){
 return triangle.x + triangle.width/2 + ((triangle.width - triangle.width/2)/triangle.height) * (y - (triangle.y - square.height)); 
}

canvas {
                    border:1px solid black;
             }

<canvas id="canvas" width="600" height="600"></canvas>

分离轴定理难点

Separating axis theorem difficulties

javascript

algorithm

collision-detection

collision

separating-axis-theorem