Question

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:

• When using the onmousemove event, no further movement will be detected when the mouse pointer reaches the border of my screen (which means that I wont be able to run in a circle for example)
• Seeing the mouse move across the screen is not the end of the world, but it is a little annoying

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.

Answer 1

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.