Question

如何跟踪对象何时碰到？下面是一个项目符号（$('document').ready(function(){ $('.glyphicon-pencil').closest('button').click(function () { if ($('td').attr('contenteditable') === 'false') { $('td').attr('contenteditable', true); } else { $('td').attr('contenteditable', false); } }); });）的例子，它飞来飞去，撞到一个三角形（div svg）。怎么能知道子弹何时在三角形的绿色区域内？

polygon

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

Answer 1

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

因此，假设您的polygon的ID为triangle，您可以使用Array.prototype.slice.call(document.getElementById('triangle').points)

获取这些点的数组

当对象“击中”彼此 - Javascript

1 个答案: