javascript - マウスを使って JavaScript でオブジェクトの方向を制御するにはどうすればよいですか?

Question

私は 1 つの html5 ゲーム プロジェクトに取り組んでいます。これでは、マウスでオブジェクトの方向を制御する必要があります。私はすでにキーボードからそれを制御しています。しかし、マウス制御を実装したいです。だから誰でも助けて、私に返信してください。

Answer 1

jQuery を使用していると仮定します。

$(document).bind('mousemove', function(e) {
    var refObj = $('#image-id');  // reference object selector
    var objPos = refObj.offset(); // get object's absolute position
    var objCenterPos = {          // get object's center absolute position
        x: objPos.left + refObj.width()  / 2,
        y: opjPos.top  + refObj.height() / 2
    };
    var refPos = { // compute mouse position relative to reference object
        x: e.pageX - objCenterPos.x,
        y: e.pageY - objCenterPos.y
    };

    updateDirectionVector(refPos); // refPos is also the direction vector
});

function updateDirectionVector(vector) {
    // do whatever you want here
}

Answer 2

「onmousemove」を使用してそのイベントをキャプチャします

window.onmousemove = functionName;

functionName(event){
    //now read the relevant event properties for the mouse
    //console.log(event); //use console.log to get a list of possible event properties
    x = event.pageX;
    y = event.pageY;

}

以前の場所を追跡し、その関数内で他の多くのことを行う必要がありますが、開始するためのドキュメントがたくさんあります。

このリンクを試してください: http://orangesplotch.com/mouse_follower-javascript_tutorial/

Answer 3

次のコードは、あなたにいくつかのアイデアを与えるかもしれません!

var refPos = {x:window.event.clientX,y:window.event.clientY};

window.addEventListener("mousemove",function(){
var curPos = {x:window.event.clientX,y:window.event.clientY};
var left = refPos.x - curPos.x;
var top = refPos.y - curPos.y;
var direction = "";
direction += (top < 0)?"South":"North";
direction += (left <0)?"East":"West";
alert("Relative Direction " + direction);
},true);

これが役立つことを願っています！