javascript - 在 mousemove 上旋转对象以面对鼠标指针

Question

我的游戏中有一个 mousemove 光标，它可以让我的对象朝我的鼠标光标射击。我希望我的对象始终旋转以与我的鼠标光标对齐。我如何将光标所在位置的 X 和 Y 转换为度 Angular 以将我的对象旋转到？

我希望我的 fiddle 能让我通过旋转播放器(黑色方 block )更清楚地理解我的意思:http://jsfiddle.net/3nEUv/4/

这是我的 mouseMove 函数；只确保光标保持在它的边界框内

function mouseMove(e) {
    if (cursor) {
        if (e.rawX && e.rawY) {
            cursorBoundingBox(e.rawX, e.rawY);
        }
    }
}

Answer 1

基本上，您需要找到方框中心点与鼠标光标点之间的向量，然后计算 Angular 并将其转换为度数。然后通过 CSS 应用 Angular :

let box = document.querySelector(".box");
let boxBoundingRect = box.getBoundingClientRect();
let boxCenter= {
    x: boxBoundingRect.left + boxBoundingRect.width/2, 
    y: boxBoundingRect.top + boxBoundingRect.height/2
};

document.addEventListener("mousemove", e => {
    let angle = Math.atan2(e.pageX - boxCenter.x, - (e.pageY - boxCenter.y) )*(180 / Math.PI);      
    box.style.transform = `rotate(${angle}deg)`;  
})

等等，什么？

好吧，让我们把它分开。这就是我们所拥有的:

向量 AB 位于框的中心和鼠标位置之间。我们去计算θ(theta)，也就是X轴和AB的夹 Angular 。

想象一条直线从 B 向下平行于 Y 轴，直到它接触 X 轴。使用那条线、AB 和 X 轴，我们得到一个三 Angular 形。这意味着我们可以使用 Arctan 函数来计算 theta。更准确地说，我们使用 Arctan2 的便捷功能当 y>0 时给出正 Angular ，当 y<0 时给出负 Angular 。

atan2 返回以弧度为单位的度数，而 CSS 使用度数，因此我们使用 180/Math.PI 在两者之间进行转换。 (弧度是一个 Angular 度量，当绘制一个圆的中心 Angular 时，截取长度等于圆半径长度的弧。-取自 here )

最后一个警告 - 因为在浏览器中 Y 轴是倒转的(意思是，你在页面中越往下走，Y 值越高)，我们不得不翻转 Y 轴:我们通过添加一个Y 项上的减号:

- (e.pageY - boxCenter[1])

我希望这有助于清除一些东西...

这是一个孤立的 jsfiddle example

顺便说一句，你的游戏很难! :)