CODEWITHSUNDEEP
javascript
Jakob
Jakob

Reputation: 24360

Mouse management in JavaScript games

Im using JavaScript, the HTML5 canvas-element and WebGL to make a simple 3D-game in first person view for fun.

Ideally, I would like to control my movement by using the keyboard to move and the mouse to look around, like you usually do in FPS-games. As you probably understand, there are some limits to this in the browser, since the mouse cant be captured:

From what I know, it's impossible to hide the mouse as well as setting it's position in JavaScript. Hence, my question is this:

If we cant to those things, what can we do in order to get close to the desktop gaming experience when it comes to the mouse in the browser?

And I mean right now, using current APIs. Not "what could be changed in some standard to make life easier". Also, I realize that I could use the keyboard to look around, but then we're back in 1995 when Quake were actually played like that. And of course I know that it would be easier to write a desktop application or use Flash at least, but Im trying to push JavaScript's limits here.

Apart from those things, what are your suggestions? Any kind of reference, existing game, crazy idea, hack or even browser specific solution would be appreciated.

Upvotes: 8

Views: 897

Answers (2)

ChaseMoskal
ChaseMoskal

Reputation: 7681

Your hopes and dreams are now possible with the new Pointer Lock API

Upvotes: 0

aaaaaaaaaaaa
aaaaaaaaaaaa

Reputation: 3700

I have done some experiments with mousehiding for a game, as far as I recall it was only Opera that I didn't make behave, so I gave it the cross instead. One crucial point is that some browsers will display a completely invisible cursor image as a black box, but with just one almost invisible pixel it'll work. Feel free to take the mousehiding part and the cursor file. http://ebusiness.hopto.org/iimdtdt/

I have thought a bit about the look around part myself, for the up/down movement it is easy, since you will cap this anyway, and all you have to do is to make sure that the cap is in sync with the mouse movement cap. For the sideways part, I suggest that you try messing with the sensitivity, when the mouse nears the edge of the screen sensitivity should go up it the direction towards the screen edge, and down in the direction away from the screen edge. I haven't tried out this method, so I can't tell how well it will actually work, but it should help keep the mouse in the middle area even if the user spins around more one way than the other.

Good luck with the project, sounds exciting.

Upvotes: 3

Related Questions