イベントリスナーを使用してマウスポインタを永久に追い続けていく方法は？

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

これはあなたのグローバルマウスの座標を更新するのMouseMoveであるかもしれない行うには良い方法。あなたの更新/描画イベントの内部で、プレーヤーを移動してカメラを配置します

Answer 2

キャンバスの中心からマウスポインタまでベクトルを作成し、ゲームフィールドの境界に達するまでそのベクトルに沿って移動できます。位置はあなたのgameloopまたはsetTimeout（） で更新する必要があります。

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 

キャンバスサイズ：100×100（中央50:50）
マウス（右最大）位置80:20

moveVector = {X：30、Y：-30} //および正規化

サークルが右に移動する