Теорема о разделяющей трудности трудности

Question

Теорема о разделяющей трудности трудности

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

 canvas {
                    border:1px solid black;
             }

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

Vuxer 30 июль 2017, в 18:35

Источник

2

Это не вопрос ...
obe 30 июль 2017, в 16:16
0

Да, но это проблема.
Vuxer 30 июль 2017, в 16:18
1

Должен ли это быть треугольник? 2 круга были бы самыми легкими, квадраты также выполнимы.
Ecstabis 30 июль 2017, в 16:23
0

За что ты хочешь ... что? Совет? Объяснение алгоритма? Кто-то, чтобы написать все это для вас?
obe 30 июль 2017, в 16:23
0

Да, это должно быть.
Vuxer 30 июль 2017, в 16:25
0

Объяснение было бы хорошо.
Vuxer 30 июль 2017, в 16:26
0

Я постараюсь написать что-то, что использует пересечения линий.
Ecstabis 30 июль 2017, в 16:32
1

@Hedylogos, если какая-либо фигура может содержаться в другой, тогда выяснить пересечение линий будет недостаточно ...
obe 30 июль 2017, в 16:40
0

@obe Спасибо, упомянув это! Написал это сейчас, когда проверяет пересечения и / или содержит ли оно друг друга. Но чтобы содержать друг друга, они должны сначала пересечь.
Ecstabis 30 июль 2017, в 18:03

Показать ещё 7 комментариев

Теги:

javascript

algorithm

collision

collision-detection

separating-axis-theorem

1 ответ

Ещё вопросы

Должен ли это быть треугольник? 2 круга были бы самыми легкими, квадраты также выполнимы.
За что ты хочешь ... что? Совет? Объяснение алгоритма? Кто-то, чтобы написать все это для вас?
Я постараюсь написать что-то, что использует пересечения линий.
@Hedylogos, если какая-либо фигура может содержаться в другой, тогда выяснить пересечение линий будет недостаточно ...
@obe Спасибо, упомянув это! Написал это сейчас, когда проверяет пересечения и / или содержит ли оно друг друга. Но чтобы содержать друг друга, они должны сначала пересечь.

Ecstabis · Accepted Answer · 2017-07-30T15-03-00.000Z

Добавлена функция столкновения, проверяется, пересекаются ли границы квадратов с треугольниками или друг с другом.

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>

Нет проблем, нарисовав это на бумаге, вы сможете решить эти проблемы в 10 раз проще.
Хорошая идея, я попробую это, спасибо.