Javascript 旋转元素碰撞/重叠检测

需要一些帮助来检测两个元素的碰撞/重叠，其中一个元素正在动态旋转

我正在制作一个游戏，其中一个用户控制一把剑，剑根据鼠标光标的位置旋转和移动，用于该游戏的图像宽5像素，长130像素。旋转可能超过360度。我将有目标产卵在页面上，用户需要用他的剑，所以我需要检测图像切片时通过一个目标div。由于图像的旋转，我似乎无法进行有效的检测

有没有人能为我指出正确的方向/有这样的检测解决方案

到目前为止，我这里有一个例子，还没有正确的检测

我从以下几点开始

var square = {x: 500, y: 500, width: 25, height: 25}
var intervalId = setInterval(function(){
    var lightsaber = {
        x: getOffset( document.getElementById('lightsaber') ).left,
        y: getOffset( document.getElementById('lightsaber') ).top,
        width: $("#lightsaber").width(),
        height: $("#lightsaber").height()
     }

    if (lightsaber.x < square.x + square.width &&
       lightsaber.x + lightsaber.width > square.x &&
       lightsaber.y < square.y + square.height &&
       lightsaber.height + lightsaber.y > square.y) {
        console.log('collision');
       //clearInterval(intervalId);
    }
 }, 33);

var square={x:500，y:500，宽：25，高：25}
var intervalId=setInterval（函数（）{
var光剑={
x:getOffset（document.getElementById（'lightsaber'））。左，
y:getOffset（document.getElementById（'lightsaber'））.top，
宽度：$（“#光剑”）.width（），
高度：$（“#光剑”）。高度（）
}
如果（光剑xsquare.x&&
光剑.ysquare.y）{
console.log（“冲突”）；
//clearInterval（intervalId）；
}
}, 33);

很明显，这并没有旋转碰撞框，就像它一直站直一样，我希望会有类似的解决方案，但它确实旋转了碰撞框

---

谢谢

请在问题中直接提供一些代码我还没有任何与碰撞相关的代码，因为我没有考虑任何旋转，只是将偏移量与宽度和高度进行比较。我正在寻找一个从这里开始的方向，这个链接只是为了展示剑是如何移动的以及目标是什么样子的。嗯，你通常来这里至少有一个开始。。。但好吧，这里有一个开始：做一些数学！使用一些

position（）

，

Math.cos（）

，

height（）

。。。看看它们是否在另一个物体内。在

mousemove

event上检查此项。我添加了之前没有考虑旋转的内容。我会再摆弄一些，看看是否能把我的头绕在它周围，额外的指针总是受欢迎的；