3

我正在制作一款 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 回答