在 mousemove 上旋转对象以面对鼠标指针 [英] Rotating object to face mouse pointer on mousemove

问题描述

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

我希望我的小提琴能够通过旋转播放器(黑块)让事情更清楚我的意思: 的便利函数，它在 y>0 时给出一个正角，并且当 y<0 时为负角.

atan2 以 radians 为单位返回度数，CSS 使用 degrees，因此我们使用 180/Math.PI 在两者之间进行转换.(弧度是一个角度的度量，当绘制圆的圆心角时，它与长度等于圆半径长度的弧相交.-取自 这里)

最后一个警告 - 由于在浏览器中 Y 轴是倒置的(意思是，您在页面中越往下，Y 值就越高)，我们必须翻转 Y 轴:我们通过添加一个Y 项上的减号:

- (e.pageY - boxCenter[1])

我希望这有助于澄清一些事情......

这是一个孤立的 jsfiddle 示例

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

I've got a mousemove cursor in my game which will make my object shoot towards my mouse cursor. I'd like my object to always rotate along to be in line with my mousecursor. How can i convert the X and Y of where the cursor is to a degree angle to rotate my object to?

I hope my fiddle will make things a little clearer of to what i mean by rotating the player(Black block): http://jsfiddle.net/3nEUv/4/

Here's my mouseMove function now; Only making sure the cursor remains in it's bounding box

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

解决方案

Basically you need to find the vector between the the point in the center of your box, and the point of the mouse cursor, then calculate the angle and convert it to degrees. Then just apply the angle via CSS:

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

WAIT, WHAT?

Ok, let's take this apart. This is what we have:

The vector AB goes between the center of the box and the mouse position. We went to calculate Θ (theta), which is the angle between the X axis and AB.

Imagine a line going down from B parallel to the Y axis until it touches the X axis. Using that line, AB and the X axis we get a triangle. That means we can use the Arctan function to calculate theta. More precisely, we use the convenience function of Arctan2 which gives a positive angle when y>0 and negative angle when y<0.

atan2 returns the degrees in radians, and CSS works with degrees, so we convert between the two using 180/Math.PI. (A radian is the measure of an angle that, when drawn a central angle of a circle, intercepts an arc whose length is equal to the length of the radius of the circle. - Taken from here )

One last caveat - Since in the browser the Y axis is inverted (meaning, the further down you go in the page, the higher the Y value gets), we had to flip the Y axis: We did so by adding a minus sign on the Y term:

- (e.pageY - boxCenter[1])

I hope this helps clear some things...

Here's an isolated jsfiddle example

BTW, Your game is hard! :)

这篇关于在 mousemove 上旋转对象以面对鼠标指针的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！