I am trying to find out if it is possible for JavaScript and HTML's to take control of the mouse and introduce relative movement control - the type of mouse control you get in first person games (where the mouse can be moved in one direction and the player will infinitely turn until the mouse stops).

The only way I can think this could be achieved is by taking control of the mouse via JavaScript, which I'm sure is not possible. Does anyone have any ideas on this?

I am trying to find out if it is possible for JavaScript and HTML's to take control of the mouse and introduce relative movement control - the type of mouse control you get in first person games (where the mouse can be moved in one direction and the player will infinitely turn until the mouse stops).

The only way I can think this could be achieved is by taking control of the mouse via JavaScript, which I'm sure is not possible. Does anyone have any ideas on this?

• javascript
• html
• canvas
• controls
• mouse

Share Improve this question Follow asked Dec 23, 2010 at 15:04 GregGreg 21.9k1717 gold badges8888 silver badges109109 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Good news old question, with the introduction of Mouse Lock, https://developer.mozilla/en/API/Mouse_Lock_API , you can capture relative movement.

Depending on what you are making you could do like flight sims. Meaning, the rate of change is determined by the distance of the mouse from the center/rest position, instead of the actual delta of the mouse. This only works well for vehicle games though.

Not really. You could simulate this: onmousemove, get X and Y coordinates, and calculate from this the cursor's position relative to your game viewport (e.g. if the game happens in a square from [100,100] to [200,200], then mouse at [59,92] means "turn left", as it's to the left of the game's "center" at [150,150]).

A possible problem: you stop receiving events once the mouse is outside the browser window (ask player to maximize window for best experience?).