JavaScript 다각형 충돌 감지

Question

나는 HTML의 캔버스와 자바 스크립트를 사용하여 소행성과 유사한 아케이드 게임을 연구 중이다. 현재 무작위로 포인트 (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). 이 lib를 사용하면 도형을 쉽게 교차하고 충돌을 감지 할 수 있습니다 (교차 결과가 null이 아니고 충돌이있는 경우).

예 :

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>