JavaScript Обнаружение столкновений многоугольников

Question

Я работаю над астероидной аркадой с использованием холста HTML и JavaScript. В настоящее время у меня есть куча случайно сгенерированных фигур («астероидов») со случайным числом точек (3, 4 или 5) и случайным размером в случайных местах.

Я пытаюсь настроить систему обнаружения столкновений с этими полигонами. Я использовал SAT.js (https://github.com/jriecken/sat-js) для этого. Однако я не могу точно изобразить невидимые полигоны столкновений вокруг реальных полигонов, отображаемых на экране.

Вот что я имею в своем классе астероидов, где я делаю астероиды. В настоящее время я тестирую только 3 точки в фигурах (треугольники). Я отключил астероиды с 4 и 5 точками.

ctx.moveTo(0, 0); 
 
ctx.lineTo(10 + size, 20); 
 
ctx.lineTo(10 + size, 20 + size); 
 
ctx.closePath();

Вот соответствующий SAT.js код.

/** 
 
    * @function createCollisionPolygon 
 
    * Traces the outline of the asteroid to allow it to detect collisions 
 
    * based on the number of points the shape has (3, 4, or 5) 
 
    * @param {asteroid} The asteroid to make collision detectable 
 
    * @return The traced polygon 
 
    */ 
 
function createCollisionPolygon(asteroid) 
 
{ 
 
    var V = SAT.Vector; 
 
    var P = SAT.Polygon; 
 
    var polygon; 
 
    switch(asteroid.randomNumPoints) 
 
    { 
 
    // 3 point polygon 
 
    case 3: 
 
     polygon = new P(new V(asteroid.position.x, asteroid.position.y), [ 
 
     new V(10 + asteroid.size, 0), 
 
     new V(asteroid.position.x,asteroid.position.y), 
 
     new V(10 + asteroid.size, 20 + asteroid.size) 
 
     ]); 
 
     break; 
 
    } 
 
    return polygon; 
 
} 
 

 
/** 
 
    * @function checkCollision 
 
    * Checks for collisions between any two asteroids 
 
    * @param {polygon1} The first asteroid 
 
    * @param {polygon2} The next asteroid 
 
    * @return True if there was a collision, false otherwise 
 
    */ 
 
function checkCollision(polygon1, polygon2) 
 
{ 
 
    var response = new SAT.Response(); 
 
    var collided = SAT.testPolygonPolygon(polygon1, polygon2, response); 
 
    return collided; 
 
}

Который позже называют здесь:

 
    for(var i = 0; i < asteroids.length - 1; i++) 
 
    { 
 
    var asteroid1 = asteroids[i]; 
 
    var asteroid2 = asteroids[i+1]; 
 

 
    // Trace an invisible outline around each asteroid 
 
    var polygon1 = createCollisionPolygon(asteroid1); 
 
    var polygon2 = createCollisionPolygon(asteroid2); 
 

 
    // console.log("Polygon 1: "+ console.log(polygon1.points[0] 
 
    // + console.log(polygon1.points[1]) + console.log(polygon1.points[2]))); 
 
    // console.log("Polygon 2: " + console.log(polygon2.points[0] 
 
    // + console.log(polygon2.points[1]) + console.log(polygon2.points[2]))); 
 

 
    // Check if there is a collision 
 
    if(checkCollision(polygon1, polygon2)) 
 
    { 
 
     asteroid1.color = 'red'; 
 
     asteroid2.color = 'red'; 
 
     console.log("Collision detected."); 
 
    } 
 
    }

Любая помощь будет оценена - я пытался выяснить это в течение нескольких дней , Благодаря!

Answer 1

Из-за отсутствия свойств холста для извлечения области пересечения. Я бы предложил следующее решение. Используйте одну из js-библиотек для расчета пересечения полигона, например Greiner-Hormann. Используя эту библиотеку, вы можете легко пересечь ваши фигуры и обнаружить столкновение (если результат пересечения не равен нулю, тогда существует столкновение).

пример:

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

 
function drawTriangle(trianglePoints, color) 
 
{ 
 
    ctx.beginPath(); 
 
    ctx.moveTo(trianglePoints[0].x, trianglePoints[0].y); 
 
    ctx.lineTo(trianglePoints[1].x, trianglePoints[1].y); 
 
    ctx.lineTo(trianglePoints[2].x, trianglePoints[2].y); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = color; 
 
    ctx.fill(); 
 
} 
 

 
function getTriangle(size, startPointX, startPointY) 
 
{ 
 
    return [{x:startPointX,y:startPointY}, 
 
      {x:startPointX + size,y:startPointY}, 
 
      {x:startPointX,y:startPointY + size}, 
 
      {x:startPointX,y:startPointY}]; 
 
} 
 

 
//sample triangles 
 
var triangle1 = getTriangle(50,100,100); 
 
var triangle2 = getTriangle(50,100,90); 
 
var triangle3 = getTriangle(50,200,100); 
 
var triangle4 = getTriangle(50,280,90); 
 

 
//draw all triangles 
 
drawTriangle(triangle1,'#d3d3d3'); 
 
drawTriangle(triangle2,'#e3e3e3'); 
 
drawTriangle(triangle3,'red'); 
 
drawTriangle(triangle4,'blue'); 
 

 
//intersaction results 
 
console.log("intersection exists"); 
 
console.log(greinerHormann.intersection(triangle1 , triangle2)); 
 
console.log("intersection not exists result of intersaction - null"); 
 
console.log(greinerHormann.intersection(triangle3 , triangle2));

<script src="https://cdn.rawgit.com/w8r/GreinerHormann/master/dist/greiner-hormann.min.js"></script> 
 
<canvas id="myCanvas" width="578" height="200"></canvas>