3

私は、World of Warcraft のカメラとほとんど同じカメラが必要な 3D ゲームを作成しています。つまり、画面をクリックするとカーソルが消え、マウスを動かすとカメラがフォーカス ポイント (プレーヤー) を中心に回転します。

私はほとんどのコードを作成しました。画面をクリックするとカーソルが消えますが、問題は、表示されていないのにまだ動いていることです。それは不自然に感じます。カーソルをずっと同じ場所にとどめておきたいのです。

では、Javascript でこれを実現するにはどうすればよいでしょうか。

唯一のサポート要件は、最新バージョンの Chrome と Firefox です。

4

2 に答える 2

3

セキュリティ上の影響があるため、JavaScript のようにカーソルの位置を操作することはできません。

于 2012-05-29T18:34:38.983 に答える
3

私があなたの質問を正しく理解していれば、

JavaScript ではできません。Flash が必要です。

しかし、はい、いくつかの進歩は実際に進行しています。

ポインターロック API

更新：（暇だったので遊んでみました）

このようなことを試すことができますが、完全ではなく、推奨されておらず、元のマウスが画面の境界に達すると失敗します（ただし、ラッパーでマウスの動きを制限すると問題が解決します）。

HTML:

<body style='width:100%;min-height:800px;overflow:hidden'>  
<img id='fakeCursor' src='http://i50.tinypic.com/359d3km.jpg'  style='z-index:1000;position:absolute;display:none' />  
<div href='javascript:void(0);' style='position:absolute;left:50px;top:10px;width:100px;height:100px;background:gray;' onclick='console.log("fake click 1");return false;'>Fake click 1</div>
<div href='javascript:void(0);' style='position:absolute;left:50px;top:130px;width:100px;height:100px;background:gray;' onclick='console.log("fake click 2");return false;'>Fake click 2</div>
</body>

Javascript:

var clientX,clientY;   
var fakeCursor = document.getElementById('fakeCursor'); 

var isFakeMouse = false;
document.onclick = function(e){
    if(isFakeMouse){    
        if(document.elementFromPoint(fakeCursor.style.left,fakeCursor.style.top)!=null){
            document.elementFromPoint(fakeCursor.style.left,fakeCursor.style.top).click();
            return false;
        }
        fakeCursor.style.display = 'inline';
        fakeLeft = clientX;
        fakeTop = clientY;
        var mouseLastLeft = -1;
        var mouseLastTop = -1;
        document.onmousemove = function(e){  
            if(mouseLastLeft ===-1 && mouseLastTop ===-1){
                mouseLastLeft = e.clientX;
                mouseLastTop = e.clientY;
                return;
            } 
            fakeCursor.style.left = (parseInt(fakeCursor.style.left) + ((mouseLastLeft - e.clientX)*-1)) + 'px';
            fakeCursor.style.top = (parseInt(fakeCursor.style.top) + ((mouseLastTop - e.clientY)*-1)) + 'px'; 
            mouseLastLeft = e.clientX;
            mouseLastTop = e.clientY;
        }
    }
    else{
        isFakeMouse = true;
        document.body.style.cursor = "none";
        fakeCursor.style.display = 'none';
        fakeCursor.style.left = clientX = e.clientX;
        fakeCursor.style.top = clientY = e.clientY;
        document.onmousemove = null;
    }
}

documentここでは、まず、非表示をクリックしますreal mouse。documentユーザーがもう一度クリックするreal mouseと、まだ非表示になり、新しいfake mouse(画像) が代わりに表示されます。の位置は、fake mouseユーザーが を離れた場所と同じreal mouseです。fake mouseのように動作します (試みます) real mouse。

インラインCSSとjavascrictで申し訳ありません

于 2012-05-29T19:17:16.567 に答える