Question

我正在尝试制作各种坦克模拟器。严格来说是在div上，而不是在画布上等。它已经在旋转并按我想要的方向前进/后退，但是旋转炮塔有点麻烦。我到了转塔旋转到鼠标指针的地步，但是当坦克车体旋转时，转塔旋转并没有考虑到它（它随坦克车体一起旋转）。有谁知道如何使它正常工作，以便转塔始终指向鼠标光标？

最好使用纯JS。

它太大了，无法粘贴，因此我将链接到小提琴：

https://jsfiddle.net/9pom714a/

mousemove处理程序的示例：

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减去turretAngle旋转：

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)';

})

更新的小提琴：https://jsfiddle.net/9pom714a/1/

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

1 个答案: