javascript - 当对象 "Hit"彼此 - Javascript

Question

如何跟踪物体何时相互碰撞？下面是一个子弹 (div) 四处飞行并击中三 Angular 形 (svg polygon) 的示例。如何知道子弹何时位于三 Angular 形的绿色区域内？

var left1 = parseInt(document.getElementById("bullet").style.left);
var left2 = 0; 

setInterval(bounce, 10);
function bounce() {
  if ( left1 < (window.innerWidth - 35) ) {
    left1++; 
    left2 = left1; 
    document.getElementById("bullet").style.left = left1 + "px"; 
    
  }
  if ( left1 >= (window.innerWidth -35) ) {
    left2--;
    document.getElementById("bullet").style.left = left2 + "px"; 
  }
  if ( left2 <= 0 ) {
    left1 = 0;   
  }
}

<div id="bullet" style="position:absolute; top:100px; width: 15px; height:15px; background-color: #000;"></div>
  
<svg height="200" width="200" style="position:absolute; top: 0px; left: 100px;">
  <polygon points="100,10 200,200 0,200" style="fill:#23ac6a;"/>  
</svg>

Answer 1

svg polygon 元素提供了一个名为 points 的属性，该属性将其 points 属性中指定的值作为称为数组的结构返回SVGPointList。该结构的每个元素都有一个 x 和 y 属性，它们相对于 svg 的位置和 viewBox元素。您可以使用这些值来计算出与移动的 div 相关的三 Angular 形边界的 x 和 y 坐标，并从那里检测是否有任何 div Angular 在三 Angular 形内部。

假设您的polygon的id为triangle，您可以使用Array.prototype.slice.call(document. getElementById('三 Angular 形').points)