Canvas JavaScript：如何让子弹发射器指向鼠标位置？

核心问题分析 #

当前代码中鼠标角度计算错误的根源：

• 使用e.pageX/e.pageY作为坐标参考，这是相对于整个文档的位置，没有匹配画布的初始平移和动态场景偏移，导致坐标错位
• 发射器初始绘制方向（向上）与Math.atan2的角度基准（x轴正方向）不匹配，造成指向偏移

直接解决方案 #

替换鼠标移动事件的代码为以下内容：

document.addEventListener("mousemove", (e) => {
    // 获取画布在浏览器中的位置信息
    const rect = scene.getBoundingClientRect();
    // 将鼠标窗口坐标转换为画布本地坐标
    const canvasX = e.clientX - rect.left;
    const canvasY = e.clientY - rect.top;

    // 转换为游戏世界坐标：抵消初始平移和动态场景偏移
    const worldMouseX = canvasX - ((scene.width / 2) - player1.x) - (sceneTranslateX / 5);
    const worldMouseY = canvasY - ((scene.height / 2) - player1.y) - (sceneTranslateY / 5);

    // 计算角度并修正发射器初始方向（向上）
    const angle = Math.atan2(worldMouseY - player1.y, worldMouseX - player1.x) + Math.PI / 2;
    player1.angle = angle;
});

原理说明 #

1. 坐标匹配：
   • 通过getBoundingClientRect()获取画布在窗口中的位置，将鼠标的窗口坐标转为画布内部的本地坐标
   • 减去初始的画布平移量((scene.width / 2) - player1.x)，再抵消main函数中动态添加的场景偏移sceneTranslateX/5和sceneTranslateY/5，得到鼠标在游戏世界中的真实位置
2. 角度修正：
   • 原发射器通过roundRect(-10, -45, 20, 25)绘制，初始方向为y轴负方向（向上），而Math.atan2的角度基准是x轴正方向，因此需要加上Math.PI/2（90度），让发射器的初始方向与角度计算基准对齐，实现正确指向

内容的提问来源于stack exchange，提问作者Pete21