Question

我正在尝试制作一个Agar.io克隆，一切顺利，直到我进行鼠标移动。我将鼠标移动事件添加到文档中，当鼠标移动时圆圈仅移向鼠标，我希望它在鼠标移动和停止时移动。我试图用鼠标移动，但似乎什么也没做。在处理JavaScript时，您可以随时访问鼠标坐标，但在JavaScript中，您不能这样做，我想知道如何使圆圈不断跟随鼠标指针。

以下是我的鼠标代码：

document.addEventListener("mousemove", m);

function m(e) {
    let mouseX=e.clientX;
    let mouseY=e.clientY

    mouseX-=player.pos.x;
    mouseY-=player.pos.y;

    let mouse=Math.atan2(mouseX, mouseY);

    player.pos.x+=Math.sin(mouse)/0.3;
    player.pos.y+=Math.cos(mouse)/0.3;

    if (player.pos.x > 0 && player.pos.x < 900) {
        ctx.translate(-Math.sin(mouse)/0.3, 0);
    } 

    if (player.pos.y > 0 && player.pos.y < 900) {
        ctx.translate(0, -Math.cos(mouse)/0.3)
    }
}

这是我的小提琴：https://jsfiddle.net/doss2ecd/1/

Answer 1

可能更好的方法是在鼠标移动时更新全局鼠标坐标。然后在更新/绘制事件中移动播放器并定位相机

Answer 2

您可以尝试从画布中心创建一个矢量到鼠标指针，然后沿着该矢量移动，直到您到达游戏区域的边界。应使用gameloop或setTimeout（）更新位置 e.g。

function onMouseMove(e) {
    var mousePos = convertPosInRelationToCanvasSize(e.clientX,e.clientY)
    moveVector = {X:mousePos.x-canvas.HalfWidth,Y:mousePos.y-canvas.HalfHeight}
    normalizeVector(moveVector); // adjusts values to -1.0-1.0
}

function moveCircle() {
   circle.X += moveVector.X*speed;
   circle.Y += moveVector.Y*speed;
}

setTimeout(moveCircle,20); // update circle position every 20ms

画布尺寸：100x100（中心50:50）
鼠标位置80:20（右上）

moveVector = {X：30，Y：-30} //然后归一化

所以你的圈子会向上移动

如何使用事件监听器永远地使用鼠标指针永远跟随鼠标指针？

2 个答案: