CODEWITHSUNDEEP
javascripthtmlbrowsercursor
corazza
corazza

Reputation: 32354

Hide the cursor and make it stop moving using Javascript

I'm making a 3D game where the camera needs to be pretty much identical to the World of Warcraft one. That means, that once the screen is clicked, the cursor disappears, and when the mouse is moved, the camera rotates around a focus point (the player).

I made most of the code, the cursor does disappear when the screen is clicked, but the problem is that it is still moving, even though it isn't shown. That feels unnatural, and I'd like to have the cursor to stay at the same spot for the whole time.

So, how do I achieve this with Javascript?

The only support reqs are the latest versions of Chrome and Firefox.

Upvotes: 3

Views: 1633

Answers (2)

Jashwant
Jashwant

Reputation: 28995

If I am getting your question right,

Not possible via javascript, you will need flash.

But yes, some progess is really going on,

Pointer lock api

Update: (I had free time, so I played with it)

You can try something like this, its not perfect,not recommended and it fails when original mouse reaches the screen borders (however you can restrict the mouse movements in a wrapper, that will solve the problem).

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;
    }
}

Here, at first click on document, the real mouse hides. When user clicks document again, real mouse would be still hidden and a new fake mouse (an image) will take its place. Position of the fake mouse would be the same where user has left the real mouse. fake mouse works (tries) to work like real mouse.

Sorry for inline css and javascrict

Upvotes: 3

Mathew Thompson
Mathew Thompson

Reputation: 56429

You can't manipulate the position of the cursor like that in JavaScript because of the security implications that it incurs.

Upvotes: 3

Related Questions