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庫中的一個進行poligon交集計算，例如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>