使元素旋转到鼠标位置，再旋转一次

Question

我正在尝试制作一种坦克模拟器。它严格地在 div 上，而不是在 canvas 等上。它已经按照我想要的方式旋转和移动 forward/backward，但是旋转炮塔有点问题。我到达了炮塔旋转到鼠标指针的地步，但是当坦克主体旋转时，炮塔旋转没有考虑到它（它与坦克主体一起旋转）。有谁知道如何让它工作以便炮塔始终指向鼠标光标？

最好是纯 JS。

有点大，贴不出来，所以我就link到fiddle:

https://jsfiddle.net/9pom714a/

鼠标移动处理程序示例：

window.addEventListener('mousemove', (e) => {
    mouseX = e.clientX - field.offsetLeft;
    mouseY = e.clientY - field.offsetTop;

    turretAngle = Math.atan2(mouseX - turretBaseX, -(mouseY - turretBaseY)) * (180/Math.PI);

    turretBase.style.transform = 'rotate(' + turretAngle + 'deg)';
})

我知道代码很乱，我会在一切正常后重构它 ;)

Answer 1

像这样将 tankAngle 减去炮塔角度旋转：

window.addEventListener('mousemove', (e) => {
    mouseX = e.clientX - field.offsetLeft;
    mouseY = e.clientY - field.offsetTop;

    turretAngle = Math.atan2(mouseX - turretBaseX, -(mouseY - turretBaseY)) * (180/Math.PI);
        turretAngle -= tankAngle;
    turretBase.style.transform = 'rotate(' + turretAngle + 'deg)';

})

已更新 fiddle：https://jsfiddle.net/9pom714a/1/

使元素旋转到鼠标位置，再旋转一次

Making element rotate to mouse position, after another rotation

html

javascript

trigonometry